Vaadin 7 Theme How To?

Hi all,

I have had some limtied experience with Vaadin 6 a few months ago and now looking at a new project which requires vaadin and considering using Vaadin 7. I am trying to get themeing to work in Vaadin 7. I have annoted the UI class with @Theme. I have added a themes/newtheme folder to the VAADIN directory and created a style.scss file with the following demo classes: (my understanding is sass will get applied automatically.

@charset "UTF-8";
@import url(../reindeer/styles.css);

$color: rgb(51,204,255);

body {
	background-color: $color;

.welcome {
	font-size: xx-large;
	color: red;

I am using maven and created the required folders etc. by hand after generating a quick start maven project. My VAADIN folder is located under /src/main/webapp/VAADIN and not a WebContent folder I see referenced in online documentation, don’t know if this makes a difference? Vaadin libraries and the widget sets are picked up when the application is run, just no styles are applied.

In the generated war file I can see the VAADIN directory together with the themes directory is included as follows /VAADIN/themes/ - i.e in the root of the war file. Is this all correct? Why is my css not being applied?


The paths are a bit different in Maven than in Eclipse, which has the “[tt]
[/tt]” directory. Nevertheless, the [tt]
[/tt] directory is supposed to be copied to the root of the WAR package, so that’s probably correct.

As far as I know, the Sass compilation is still under work and the on-the-fly compilation doesn’t work properly. You would have to use the Sass compiler manually, which is probably a bit awkward. There’s currently no instructions for using it manually (need to write those). It’s included in the [tt]
[/tt] JAR and you need to run the class
. It takes the input SCSS and output CSS file names as parameters. Running it requires some dependencies in the classpath.

Sorry, the on-the-fly compilation of SCSS themes should work just fine. Just have the SCSS file as [tt]
[/tt], use @Theme(“yourtheme”) in the UI class and it should work OK.


Except for this:
Which happens to me. But I guess it doesn’t happen to everyone?

As far as I understood, the problem only occurs if you compile one monolithic CSS file from your own SCSS + Vaadin theme SCSS. That is, if you import the styles.scss of the Vaadin base theme. If you import the styles.css, for example …/reindeer/styles.css, it should work ok.

maybe this post can help somebody!

In a nutshell, this was not working for me:

@import “…/reindeer/reindeer.scss”;

but this worked:

@import url(…/reindeer/legacy-styles.css);

@import “…/reindeer/reindeer.scss”; doesnt work for me neither~ :frowning:

Please read
this tutorial

Just importing reindeer.scss is
not supposed to work
unless you also include the mix-in within a suitable theme name block (see the tutorial). Otherwise, you should import reindeer legacy-styles.css instead.

How do you place a textbox with the image in the header element? For example, how one can create a search box like vaadin home page?