change background color of a Layout - Vaadin

Question

in one of my apps, i created a footer :

public Footer(){
        hl.setHeight("120px");
        hl.setWidth("100%");
        hl.setMargin(true);
        hl.setSpacing(true);

    VerticalLayout contact = new VerticalLayout();
    Label contact_title = new Label("Contact");
    Label mail = new Label("<a href='mailto:contact@flavien-normand.fr'>Par email</a>",ContentMode.HTML);

    contact.addComponents(contact_title,mail);


    hl.addComponent(contact);               
}

where hl = new HorizontalLayout();

This footer is included in my main page (absoluteLayout). But the problem is i don't see the difference between my main content and the footer, mainly because it's the same background color. SO i wanted to change the footer's background Color, here is how i tried :

adding hl.addStyleName("backColorGrey"); in the code and .backColorGrey{background-color:#ACACAC} in my theme .scss, i tried the same with .v-horizontallayout-backColorGrey as class name in css.

I also tried with JavaScript.getCurrent().execute("$('.backColorGrey').css('background-color', 'grey')");

but nothing to do, the color remains the same, it never changed.

to try javascript, i tried to do an alert : JavaScript.getCurrent().execute("alert('Hi SO!')"); but it did not work, and i wonder why.

So now, how can i do to change my hl's background color?

you should check with a tool like firebug (or whatever browser you are using, there most likely is something alike), that the color is not overwritten by a more accurate CSS rule. A first indicator for this would declaring your background color in your css `!important`. if this does not help, you have to check with this tool, what is happening there. without a complete example, there hardly is any help to provide. you css there looks ok at first glance (the first one. the second one refers to a horlayout (which at least in provided code ain't there) — cfrick, Jan 18 '15 at 11:23
perhaps needless to say, but you need to compile your theme in order for .scss file changes to appear in your client side. Also the alert should work, you may also find a clue for this using Firefox's Firebug or IE's or Chrome's developper tools, as suggesred by @cfrick — geert3, Jan 19 '15 at 13:58

score 4 · Accepted Answer · edited May 23 '17 at 12:28

Sounds like you are on the right track. I noticed in your css you did not end the background-colour with a semi colon. (May have just been a typing error).

It could be that your theme is not compiling correctly. Check that you have included a mixin definition in your theme.

Vaadin...

Footer footer = new Footer();
footer.addStyleName("backColorGrey");

Scss....

@import "../reindeer/reindeer.scss";

@mixin mytheme{

    @include reindeer;

      .backColorGrey{
           background-color:#ACACAC;
      }

}

Are you using maven/gradle/ivy? You may need to add a sass compiler in your pom.xml see VAADIN cannot find themes when in productionMode

Also check that you are not in production mode...

When a Vaadin application is in development mode, it does the SCSS -> CSS compilation automatically when styles.css is requested and the file does not exist. In the production mode this does not happen. If styles.css exists, regardless of mode, the file is used and there is no SCSS -> CSS compilation

change background color of a Layout - Vaadin

1 Answers1