Vaadin CSS Styles

You can override Vaadin styles in your own theme. If you don't already have a theme, create a directory under the VAADIN file called themes

and create a subdirectory in themes named after your theme eg. MyTheme.

Vaadin 6:

• Call setTheme("mytheme")
  
  in application class
• Calling myTextField.setStyleName("labelstyle");
  
  in your code
• Create styles.css in a new theme directory.
• Add the following to styles.css:

styles.css:

 @import "../reindeer/styles.css";

 .v-textfield-labelstyle {
     background: none repeat scroll 0 0 #F5F5F5;
     border-color: #F5F5F5;
     border-image: none;
     border-left: 1px solid #F5F5F5;
     border-radius: 3px 3px 3px 3px;
     border-right: 1px solid #F5F5F5;
     border-style: solid;
     border-width: 1px;
 }

      

        
        
        
      

    

Vaadin 7:

• Add @Theme("mytheme")
  
  annotation to your user interface
• Calling myTextField.setStyleName("labelstyle");
  
  in your code
• Create styles. scss in its new theme directory.
• Add the following styles. scss

styles.css:

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

 .mytheme {
    @include reindeer;

    .v-textfield-labelstyle {
        background: none repeat scroll 0 0 #F5F5F5;
        border-color: #F5F5F5;
        border-image: none;
        border-left: 1px solid #F5F5F5;
        border-radius: 3px 3px 3px 3px;
        border-right: 1px solid #F5F5F5;
        border-style: solid;
        border-width: 1px;
    }
}

      

        
        
        
      

    

• Compile your theme by calling java -cp '../../../WEB-INF/lib/*' com.vaadin.sass.SassCompiler styles.scss styles.css
  
  in your theme directory

This little trick will give you a shortcut-like text layer that will focus on a regular TextField.

Note that this will only work when using the Reindeer theme and the default background color # F5F5F5. You will have to tweak it a bit if you are using a different theme or the background color is different from the original.