How to change the tabbar color in vaadin?

Question

Hi want to change the tab color when the tab get focus in vaadin?can any one help me how to customize tabsheet to achive this..

Answer 1

It's a good idea to use a tool like firebug to inspect the DOM structure of the components. For example, when inspecting the DOM structure of the TabSheet example in the Sample, you will see that all tab has the style class v-tabsheet-tabitem. If you select the first tab, it will get the following style class "v-tabsheet-tabitemcell", "v-tabsheet-tabitemcell-first" and "v-tabsheet-tabitemcell-selected-first". If you select the second tab, it will get the following style classes: "v-tabsheet-tabitemcell" and "v-tabsheet-tabitemcell-selected". As you will see, the styles you need to modify are a bit dependent on the tab's position in the tabsheet.

About changing the color of the tab, let's take a look at the selected tab's css.

.v-tabsheet-tabitemcell-selected {
   background-image:url(common/img/vertical-sprites.png);
   background-position:left -1444px;
}

As you can see, the actual css is not complicated. The technique used in the css is however a not so common, it uses a sort of optimization. All the background images are joined in one single png image and the background image's position is adjusted so that we get the image we want to show as the background. What you need to do, is to create your own theme and modify that image to suite your own needs. Check the Book of Vaadin for more details about creating custom themes.

Answer 2

Actually, you do not need to know the technique (CSS sprites) in order to change the background of the tabs. You will only need to use regular CSS, no magic involved.

So create a new background image (of a solid color is not enough) and set that to the background of the relevant element. Repeat for all relevant elements that are contained in the tab (they might also specify some background).

If you wish to modify the original images from the Vaadin Reindeer theme, they can be found from here: http://dev.vaadin.com/browser/versions/6.4/WebContent/VAADIN/themes/reindeer/tabsheet/img