Home/ Questions/Q 6330643
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T17:54:26+00:00

There exists a question at SO about how to add css to Vaadin project.

  • 0

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 >

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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
    • 0