I customized the cameleon theme using this editor: http://demo.vaadin.com/chameleon-editor
Then I downloaded the jar and saw that it only contains a css file with very few rules, but importing the original chameleon one. However, when I put this jar into /WEB-INF/lib and add to my Eclipse project, I’m able to use it by specifying
@theme("my-chameleon")
The custom colors seem to work somehow, but everything else is messed up, i.e. font is sans-serif and all icons are gone. On the console, I see
Information: Requested resource
[/VAADIN/themes/reddish-chameleon/favicon.ico] not found from filesystem or through class loader.
Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder.
How can I keep the original chameleon theme and just extend it?
The chameleon theme color editor isn’t updated yet to produce Vaadin 7 compatible selectors.
There are two options to make it work: either convert the editor output to be Sass compatible (the new Vaadin 7 way), or convert the editor output to use legacy-styles.css (deprecated backwards compatibility way).
Option #1
Extract the the styles.css from the JAR which you download from the editor
Place it into your VAADIN/themes/my-chameleon folder and rename it to e.g. colors.scss
Modify the file like so:
Remove the first line (@import…)
Add @mixin colors { to the beginning of the file
Close the mixin with a curly brace in the end of the file[code] @mixin colors {
…
}
[/code] - Find & replace
.v-app to
&.v-app (prepend with an ampersand)
Create a file named styles.scss, and add the following content[code] @import “…/chameleon/chameleon”; @import “colors”;
Extract the the styles.css from the JAR which you download from the editor
Place it into your VAADIN/themes/my-chameleon folder
Modify the first line from @import “…/chameleon/styles.css”; to @import “…/chameleon/legacy-styles.css”;
I tested both options, and they should work with 7.1 nightly at least. I think there might be some issues with theme names that include a dash “-”, but that’s fixed in 7.1 at least. So be sure to try out with a theme name without a dash as a last option.
I tried your solution #1 and it seems to work.
I removed the @optional-generated-shadow clause because it caused a message.
I´m not sure what the change from .v-app to &.v-app means but it works.
Finally i have three files:
colors.scss (modified as described)
mychameleon.scss (the new theme autogenerated refering to chameleon)
styles.scss (modified as described)
Sorry, I´m a Vaadin beginner and only know general things about css. So many questions came up after many, many trials and I didn´t wanted to give it up at this point.
@import "../chameleon/chameleon.scss";
@mixin mytheme {
@include chameleon;
- here all the stuff from the style.css content (downloaded from jar from my-chameleon) from [u]
.v-app {
[/u] to [u]
}
[/u]at eof -
}
I omitted the hyphen in the file name as a precaution and removed the @optional-generated-shadow clause.
This example seems to work in my little test application. Therefore it is only a test application I don´t know if there are any pitfalls.
The installation is Vaadin 7.0.5 on an eclipse juno (windows 7).
Unfortunately the integrated browser is not reliable - it shows different results as a real browser although it startet new after every compiling process - so the tests took longer than necessary…
I was having the same mixin exception as above when using the Chameleon “blue” theme although everything worked fine for the “black” one. Eventually I tracked it down to these lines :
I am newbie in Vaadin and I am doing my first app, I wanted to change theme and I followed some tips here.
The point when I was using the theme by default it was like capt1 (see attached) but now I just downloaded my-chameleon theme and tried to set it up and it takes colours and so on but it is a bit messed up “even after trying both Options”, you can see it in capt2 (attached).
