How to add css to Vaadin / Maven project?

Question

There exists a question at SO about how to add css to Vaadin project. The tip there was to add css at /WEB-INF/VAADIN/themes/ location.

My problem is that Vaadin projects normally have WEB-INF folder under WebContent and now on Maven the similar folder is under webapp. This seems to be causing that my css changes do not take effect.

Also, is it necessary to have the custom css in same sub-structure as the original css? I want to modify table css and don't know if the css needs to be in a specific path.

So how to add the css for table so that also the table is changed, not just that the code builds correctly? :)

Update 1: I could get the following tempalate out with Firebug, but this is closest thing what I get to browser.

< link rel="stylesheet" type="text/css" href="/html/VAADIN/themes/mytheme/styles.css" >
< html >
< head >
< title > < /title >
< /head >

< body onload="javascript:location.replace('/c')" >
< !--The numbers below are used to fill up space so that this works properly in IE. See http://support.microsoft.com/default.aspx?scid=kb;en-us;Q294807 for more information on why this is necessary.
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
-- >
< /body >
< /html >
< /link >

Solution

You will probably put your styles.css file in the src/main/webapp/VAADIN/themes/[yourtheme]/ folder and configure Maven to copy everything in src/main/webapp into your WEB-INF. This way your .css file will end up in WEB-INF/VAADIN/themes/[yourtheme]/.

It is strongly recommended to inherit from a theme rather than trying to override the behavior of a default theme.

Then you need to specify your theme name in the application

public void init()
{
    setTheme("simplegae");
    ...

and make your .css file inherit from a theme's css (runo, reindeer, ...).

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

I have recently put up a sample Vaadin application using Maven which is accessible at this address. It is aimed to work on GAE, but you can check it out from SVN and have a look at what I have done:

svn co http://code.google.com/p/tinywebgears-samples/source/browse/trunk/simplegae/ simplegae

Comments

[mico]

+1: Thanks for great answer. I will validate it works for my problem and then I'll get back accepting the answer!

[n0rm1e]

You're welcome. You might want to have a look at this page as well.

[mico]

My application is furthermore a Liferay portlet. Following the given tutorials I could not go further than finding empty 'template' html page with Firebug on the browser. The 'template' had some short html page under html tags. I'll add it to my question.

[mico]

So, this solution did not answer my question (= solution did not work ), so others are also free to answer.

[mico]

I got things working when I fixed build path and web deployment assembly settings on Eclipse tool I was using. Your answer was the nearest solution, you get the points. Thank you! (nearest means it has the correct file setup, but my problem got solved via solving problems in other things + following your info)

[mico]

Fixes were so that I made build path and deployment assembly to follow the Maven file structure of the project (src/main/java, src/main/resources, /src/main/webapp)