title: change background color of a Layout - Vaadin
body: <p>in one of my apps, i created a footer :</p>
  
  <pre><code>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("&lt;a href='mailto:contact@flavien-normand.fr'&gt;Par email&lt;/a&gt;",ContentMode.HTML);
  
      contact.addComponents(contact_title,mail);
  
  
      hl.addComponent(contact);               
  }
  </code></pre>
  
  <p>where <code>hl = new HorizontalLayout();</code></p>
  
  <p>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 :</p>
  
  <p>adding <code>hl.addStyleName("backColorGrey");</code> 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.</p>
  
  <p>I also tried with <code>JavaScript.getCurrent().execute("$('.backColorGrey').css('background-color', 'grey')");</code></p>
  
  <p>but nothing to do, the color remains the same, it never changed.</p>
  
  <p>to try javascript, i tried to do an alert : <code>JavaScript.getCurrent().execute("alert('Hi SO!')");</code> but it did not work, and i wonder why.</p>
  
  <p>So now, how can i do to change my hl's background color?</p>