I am trying to apply normal Css fomating in a Vaadin 7 application (I am new in Vaadin) and I can not get it work properly. In partucular I want to use the method addStyleName() on a Table like in GWT:

Table table = new Table("Films");
table.addStyleName("test");

My problem is that I do not know precicely where to put the .css file and how to "inject" it. I have followed the instructions of the Vaadin Book and of the first answer of the question but in my project it does not work. There is no folder VAADIN under WebContent. I create the folder VAADIN/Themes/mytheme and I create the file mytheme.css and styles.css in it. I am not sure if I need a custom file styles.css (probably the problem come from that). The file mytheme.css looks like:

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

.test{
    margin-left: 100px;
    margin-top: 100px;
    margin-right: 100px;
}

and the file styles.css is empty. In the application class I use the annotation:

@Theme("mytheme")
@SuppressWarnings("serial")
public class MyprojectUI extends UI {
...
}

However it does not work. Not only the "test" css class is not applied but the standard css style of the UI is lost (a white page with black letters). I receive also the warning:

Requested resource [/VAADIN/themes/mytheme/styles.css] not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder.
Jun 12, 2013 8:44:44 PM com.vaadin.server.VaadinServlet serveStaticResourcesInVAADIN

Ok, it does not find the theme jar. What is wrong, since the instructions do not indicate something different. Maybe the

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

?

UPDATE: It is the same problem as in the question but I do not use maven. What should be done in this occassion?

I have found the solution. It seems to me a little bit peculiar, but the project tries always to find a styles.css file in the Theme folder when someone creates a new Theme. The styles.css file should not be empty, but it should import the mytheme.css. Finaly the css files are:

mytheme.css:

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

.test{
    margin-top: 10px;
    margin-left: 10px;
}

styles.css:

@import "mytheme.css";

The legacy-styles.css and styles.css files are included in the vaadin.themes jar.

more