General questions on working with themes

General
1

Hey,

I have a couple of questions while working with themes.

From what i have read, you are supposed to put your custom theme under WebContent/VAADIN/themes

However, I do not have such a folder. I have two folders META-INF &WEB-INF under the WebContent Folder. the WEB-INF folder contains a vaadin6.0.0.jar file which contains the VAADIN folder with a themes subfolder.

So, should I extract the.jar file and make it a subfolder of WebContent? That way, I have Vaadin as a subfolder of WebContent and can make separate .css files for whichever component I want a .css file for. Do I just make a “style.css” file for all the components (that I want a new style for) together or do I make separate folders for each component like how you guys did it for “runo” and “reindeer” and also have a “style.css” file?

Also, is there anyway to see the HTML implementation of your Vaadin Code. In Chapter 7, you talk about when you make a .css file, you need to look at the HTML implementation as well. However, “Default CSS Style Names of Vaadin Components” is provided for us in that same chapter. Will we ever need to figure out the HTML implementation if you have this table? Also, is there a way you can get that from your within project?

I am currently using openSUSE, not Windows if that makes a difference. Thanks in advance

Rohith

2

Hi Rohith,

yes, you’ll need to create the WEB-INF/VAADIN/themes/<your_theme_name> folder in your webapp for yourself if you want to customize themes. At least, in your custom theme, you’ll need to create a minimalistic styles.css file with a reference to one of the default themes css, then set your custom theme to the main window by setTheme(“<your_theme_name>”) sentence. Now you can copy css fragments from the referenced default theme into your styles.css and customize/change them.

The vaadin.jar does also contain this folder with all default themes and resources, but you do not need to extract it in your webapp, however you may want to do so into a temp folder in case to look at default themes css files and resources.