CSS in Vaadin


My name is Rohith and I have been going through the Vaadin book cover to cover for the last two weeks. It definitely is a very powerful tool.

The problem I am having is modifying how the small applications I make look like. i.e. modifying it with CSS. I have never used CSS before. Does anyone have any suggestions on where I can learn more about it? I know there is a small section on Chapter 7 “Introduction to Cascading Style Sheets” about it.

In many of the code samples provided in the book, there are CSS examples like

Where exactly should such CSS code go in your project? I know it should not go within my init() method. Should i create a separate class or something? I am sorry, this must seem like a stupid question. Its just that I have never worked with CSS before.

Thanks in advance,

has a good picture about this. Then:

  1. Create the directory “MyProject/WebContent/VAADIN/themes/mytheme”
  2. Create the file “styles.css” in the directory created above
  3. In your styles.css file import a default theme. For example to import the reindeer theme, write @import "../reindeer/styles.css With this you can leverage from the ready made theme, and don’t have to do everything yourself.
    4)Use setTheme(“mytheme”) in your application

You can find lots of good CSS tutorials by just googling, for example


Could you help me about css and particulary the styles.css files.
I would want to override that style:

.v-checkbox > input:checked ~ label:after {
color: $link-label-color;

But, the geanerated file styles.css ignores it and adds systematically another style with
prefix in front of it as:

.v-checkbox > input:checked ~ label:after {
color: $link-label-color;

I don’t know where
comes from and would want not to include it in generated styles.css file.
Could you help me?

Hi dude…i have same problem…do you solve that issue

I could not change checkbox icon color…give some tips for changing color for checkbox icon in css