Chameleon themes (blue/green/black)

Flow
1

Hi,

In order to use the chameleon-blue theme we had to download a jar with the enhancements to the css into a separate package, then make sure our build tool picks this up to put into the lib directory for deployment which is a little messy.

Is there any chance ‘default’ Chameleon theme/jars (e.g. chameleon-blue.jar) could be made available alongside the core Vaadin jar from maven so we can use them directly without the need to maintain a local jar and custom build.

Or better still include these in the core Vaadin package (as Chameleon already is) with a (new) constant so you could call:
setTheme(Chameleon.THEME_BLUE)
,
setTheme(Chameleon.THEME_BLACK)
 etc.?

Thanks,

David

2

Please,
file an enhancement ticket
.

3

Actually, now that Chameleon (colorless scheme) is in the core, you can get the color mixes by just adding one css file into your theme folder and import in your main styles.css file.

If you go to
http://demo.vaadin.com/chameleon-editor/
 and download your choice of color set, you get a zip file which (more or less) contains a css file named styles.css. Rename that file to something else like blue-chameleon.css and throw it into your theme folder. now your actual theme styles.css file can do this import at the very start:

@import "../chameleon/styles.css";
@import "blue-chameleon.css";

and you will get the blue chameleon theme and you can add your modifications to it into styles.css. It is also easy to change the chameleon color scheme whenever you want.

Not that there is also another deployment of that app under
http://demo.vaadin.com/chameleontheme
 which was for pre 6.7. That one will give you jar files in the zip so there is a few extra hoops to jump through to get the css file. Use the first one I linked to to make it easy in Vaadin 6.7.0 or newer.

The tre color presets should in my opinion be definitely in the Vaadin core package.

4

Hello,

My finding follows.

  • the first URL still provides a zip that contains a jar that contains
    the styles.css
  • this css file already contains the line
    @import “…/chameleon/styles.css”;
    So if you have no special needs it can be used out-of-the box.

Running my vaadin app this is what I get:
Requested resource [VAADIN/themes/my-chameleon/styles.css]
not found
from filesystem or through class loader. Add widgetset and/or theme JAR
to your classpath or add files to WebContent/VAADIN folder.

I double (triple) checked that my war does contain the theme and in the
approriate structure: /VAADIN/themes/my-chameleon/styles.css

Debug mode says:
Starting Vaadin client side engine. Widgetset:
com.vaadin.terminal.gwt.DefaultWidgetSet Widget set is built on
version: 6.7.2 Warning: widgetset version 6.7.2 does not seem to match
theme version Starting application psmc-3450585
Vaadin application servlet version: 6.7.2

How can I resolve this non-matching case?

Thank you!
Zsolt

5

Are you able to access these files directly with a browser (type in the address field)?
http:///VAADIN/themes/chameleon/styles.css (should be available - check the base URL if not)
http:///VAADIN/themes/my-chameleon/styles.css

Did you try not extracting the theme but just dropping the my-chameleon JAR in WEB-INF/lib? Your own theme could still import it in that case.

If there is a problem, I suspect it might be related to security restrictions concerning accessing static resources under /VAADIN (AbstractApplicationServlet.serveStaticResourcesInVAADIN(…)).

Do you see the mismatch message on the screen, or only when copying text?
At least for theme version, the message is always present but hidden with CSS if versions match.

6

My bad. I should have quadruple-checked the path. With fresh eyes of today I see the VAADIN path element was missing… Now it works.

Sorry for the noise and hijacking to an extent of the thread!

Zsolt

7

I"m having the similar problem with Chameleon theme.I want to create “almalino” theme based on “chameleon” what I did:

  1. Downloaded .zip file from http://demo.vaadin.com/chameleon-editor/
  2. Unpacked styles.css file to /WebContent/VAADIN/themes/almalino/styles.css
  3. Added setTheme(“almalino”);

Now, when I try to run vaadin application I get application running but without any styles. Also I get error message:

Feb 15, 2012 10:45:37 PM com.vaadin.terminal.gwt.server.AbstractApplicationServlet serveStaticResourcesInVAADIN
INFO: Requested resource [VAADIN/themes/almalino/
styles.css] not found
from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder.


I tried following links:

http://localhost:8080/calculator/VAADIN/themes/chameleon/styles.css - works fine
http://localhost:8080/calculator/VAADIN/themes/almalino/styles.css - [b]
[color=#ff0000]

[/color]no access
[/b]

Could anyone tell me how to make vaadin see my custom styles.css file? Shall I add some mapping to web.xml?

Any help will be highly apreciated!

8

Hy,

I’m brand new to vaadin and I work with grails.
I have exactly the same problem as yours.

Didi you find a workaround for this issue?

Regards

9

Have a look at:
https://vaadin.com/forum/-/message_boards/view_message/1090136

10

I’ve solved the problem. To make my theme inheriting chameleon theme I did the following:

  1. Created custom theme named “almalino” according these instructions: https://vaadin.com/book/-/page/themes.eclipse.html
  2. Replaced styles.css created by wizard of custom theme with styles.css downloaded from vaadin site.

It works now though I’m not sure why. Vaadin Eclipse plugin configured my application somehow but I have no glue how.

Hope this helps

11

Thanks,

I’ll try this ASAP.

regards

12

Thanks it works.

regards

13

Hi,
Can anyone send me the sample program which consists of simple form and submit button which is styled properly.
That project should be a touchkit using maven project, with navigation view and buttons included in it. My question is about how to apply css or scss styles to navigation components.
If possible send me a css table for touchkit UI components.
Thank you…
My email id is praneeth.chintu9@gmail.com