Custom Theme Development

Vaadin 6 / 7 / 8
1

All -
I am trying to work on a Custom Theme and I feel like I am missing something basic.

I am using the Eclipse plug-in methodology and I have the following structure:
WebContent
->META-INF
->VAADIN
->themes
→
->img
.scss
styles.scss
->WEB-INF

.scss:


@import "../reindeer/reindeer.scss";

@mixin <theme name> {
   @include reindeer;

}

styles.scss


.<theme name> {
 @include <theme name>
}

My app class contains:
@Theme(“”)

When I am viewing source (Chrome devtools), it appears that it is picking up the theme. The main div has:

I also see that the styles.css is populated with what appears to be the same content as the reindeer theme.

The following questions come to mind:

  1. With the theme being empty, shouldn’t it be picking up the reindeer theme for all markings?
  2. There is request for icon and shortcut icon pointing to /favicon.ico → is this needed?
  3. The time without the custom theme is 612 ms, the time with the custom theme is almost 7 seconds (though I am guessing that is because there is an issue with the customization)

Any help would be greatly appreciated.

Thanks,
Evan

2

Hi,

You can’t use Sass in a regular .css file. Your styles.css file will get sent to the browser as is, no Sass compilation. Rename the file to styles.scss and it will be compiled.

The favicon is not necessary, if you don’t mind the 404 request being made by the browser. You can either add an icon there, or customize the startup page HTML so that it doesn’t search for an icon.

3

That was a typo. All the double checking and I missed that one. It styles.scss.

Correcting it in the original post now.

4

Would also like to add that I am using Vaadin 7.0 beta 9. In Eclipse JUNO, I can’t figure out where I need to go to change to the latest version without rebuilding the project. The preferences appears to have the version blocked out.

5

I’m working on a similar problem and can’t get my custom themes running.
But what i found is: you have to use Vaadin 7.0 beta 10.

That made me one step forward.

6

Deiter:
Thanks for identifying that as a point of contention. I did upgrade it and that seemed to resolve the issue I was having.