O'Reilly logo

Vaadin 7 UI Design By Example Beginner's Guide by Alejandro Duarte

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – creating a new Vaadin theme

Follow these steps to change the way labels look:

  1. Open the themes example application on your IDE.
  2. Edit the cool mixin (in cool.scss) to include one rule for labels:
    @mixin cool {
      @include chameleon;
    
      .v-label {
        color: #fff;
        background-color: #4455aa; 
        font: 16px Verdana, Arial;
        padding: 5px;
        margin-bottom: 10px;
      }
      
    }
  3. Run the application.

What just happened?

Well, this happened:

What just happened?

We defined a rule to be applied to labels. The CSS class v-label is automatically added to every label element.

Tip

How to know which CSS classes are added by Vaadin? The fastest way to get this information is by inspecting the HTML ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required