How to create my own theme

This question keeps popping up so here is a quick tutorial on how to start building your own theme.

  1. Copy
    example
    directory into
    mytheme
  • themes are located under
    Webcontent/WEB-INF/lib/themes
    directory
  1. In case you do not wish to use custom layouts (HTML templates), you can empty
    Layout
    directory

  2. Create CSS file for your theme, e.g.
    mytheme.css
    into your theme directory

  3. In
    script/example-ajax-componennts.js
    change all occurances of
    example -&gt mytheme
    and rename file.

  4. modify
    description.xml
    file:

  • example -&gt mytheme
  • add your stylesheet file to your theme after js-file
    [/code]<file name=“mytheme.css” />[code]
  1. Set your theme in application init method by
    [/code]setTheme(“mytheme”);[code]

  2. Give style names to your components, e.g.


setTheme("mytheme");
Label l = new Label("Hello World!");
l.setStyle("red");
main.addComponent(l);
  1. style name will appear with component name prefix in html code, so in labels case you’ll have “label-red” css class name

  2. modify your style sheet in a usual manner “.label-red {color:red;}”

When creating new theme you it’s easiest to just restart your server.

(sorry to bring up a very old post)

These instructions are for IT Mill Toolkit v.4. and don’t work for Vaadin anymore (partly maybe).

Instructions for theming can be found in the Book of Vaadin:
Chapter 8. Themes