How to add css to Vaadin / Maven project?

问题

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 >

回答1:

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

回答2:

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]/.

Just a little change : put your folder in src/main/resources/VAADIN/themes/ instead of src/main/webapp/VAADIN/themes/

I hope it will work for you as it worked for us

Regards Éric

edit : Here an useful link : Deploying a Maven web project on Jetty

来源：https://stackoverflow.com/questions/7120436/how-to-add-css-to-vaadin-maven-project

标签

css