Tabsheet Color

Jason · August 30, 2009, 4:39am

Hi

This might be an easy question. But I can’t figure out a way to change the background color of the tabsheet or selected tabs. I tried using css with the class ids. But no luck with that. It seems to me that tabsheet’s background is created using a png file. Please correct me if im wrong.

Thanks
Jason

Dmitri · August 30, 2009, 10:52am

Hi Jason,

that’s correct, tabsheet’s background is build from a png files, but this all described in a CSS. Take a look at CSS file regarding tabsheet in the default theme, so you’ll see how you can override this in your custom theme CSS file.

Jens · September 1, 2009, 5:21am

Dmitri is completely right. All the instructions for building up the theme for the tabsheet is found inside the jar at VAADIN/themes/runo/tabsheet/tabsheet.css and the pictures are in the subfolder img. You can copy these files next to your own styles.css and just import it with “@import url(tabsheet.css);” in the start of styles.css. Alternatively, you can copy all the rows directly into styles.css.

Then you just go ahead and change the pictures and and modify the css rows accordingly.

Jason · September 1, 2009, 1:08pm

Thank you!!

cheney · February 14, 2011, 6:21am

If I want to dynamic set background,what should i do?

Henri2 · February 14, 2011, 11:11am

I’m not sure if I understand correctly what you mean, but if you want to change e.g. the selected tab color at runtime, you could define several alternative styles for the tab that depend on the style names of the tabsheet, and then set the style name for the whole tabsheet at runtime.

IE6 might be problematic in the case of such CSS rules, though, if the tabsheet style names are not copied to the tabs (I don’t think they are, but you can check e.g. with Firebug).