TabSet: How do I change the styles of a TabSet?

Users often ask if it is possible to change the look of the tabset container? For example, the background color, or the small black line on the far left and on the far right of the tabset.

The answer is yes. You can add the following selectors to resources/stylesheet.css to change the style of tabset and tab component:

.Tab1Div{
}

.Tab1Div div.Tab1SelTxtNew {
}

.Tab1Div td {
}

TabSet: How do i change the styles of a TabSet and Tab in NetBeans 6.1 IDE with Woodstock 4.3

With the new Woodstock components in 4.3 the classes have been changend for the TabSet. This is how it looks for Woodstock 4.3:

/* class for a div Tag that is the parent Tag for the table Tag of the TabSet  */
/* SAME ON EVERY REQUEST */
div.Tab1Div_sun4 {} 


/* Only visibile, if the component was unable to render at client */
/* class for the table Tag of the TabSet */
/* SAME ON EVERY REQUEST */
table.Tab1TblNew_sun4 {} 

/* Only visibile, if the component was unable to render at client */
/* class for the td Tag of a the selected Tab */
/* SAME ON EVERY REQUEST */
td.Tab1TblSelTd_sun4 {} 


/* ONLY FOR UNSELETED TABS */

/* class for the a Tag of an inactive Tab */
/* IF YOU CHANGED THE TAB (MAYBE TEXT) THEN THIS IS THE CLASS */
a.Tab1Lnk_sun4 {}
/* class for the a Tag of an inactive Tab */
/* IF YOU NOT CHANGED THE TAB, THEN THIS IS THE CLASS */
a.Tab1Lnk_sun4.TabPad_sun4 {}



/* ONLY FOR SELECTED TABS */

/* class for the div Tag of an active Tab */
 /* ONLY ON INITIAL LOAD FOR THE SELECTED TAB SET */
div.Tab1SelTxtNew_sun4.TabPad_sun4 {}
/* class for the div Tag of an active Tab */
/* IF U CHANGED THE TAB (MAYBE TEXT) THEN THIS IS THE CLASS */
div.Tab1Lnk_sun4.Tab1SelTxtNew_sun4 {} 
/* class for the div Tag of the selected Tab */
/* IF YOU NOT CHANGED THE TAB, THEN THIS IS THE CLASS */
div.Tab1Lnk_sun4.Tab1SelTxtNew_sun4.TabPad_sun4 {} 

Example

The following changes the background color from the TabSet and all Tabs (selected or not). Simply paste it to the stylesheet.css file in the folder Web Pages -> resources -> stylesheet.css.

.Tab1Div_sun4 {
    background-color:black;    
}

a.Tab1Lnk_sun4 {
    background-color:yellow;
}

a.Tab1Lnk_sun4.TabPad_sun4 {
   background-color:yellow;
}

div.Tab1SelTxtNew_sun4.TabPad_sun4 {
   background-color:red;
}
div.Tab1Lnk_sun4.Tab1SelTxtNew_sun4 {
   background-color:red;
} 
div.Tab1Lnk_sun4.Tab1SelTxtNew_sun4.TabPad_sun4 {
   background-color:red;
} 

TabSet: How do i change the styles of a TabSet and Tab with a custom styleClass

To make a new Style Class do the following:

1. Open the file stylesheet.css in your Web/resources directory
2. Create a new class for each, the Tabs and the TabSet like the example below
3. After that save the file and restart the IDE
4. Now select the TabSet, in the property window click behind the StyleClass entry on the ... button
5. Select out of the list your class, in the example below, select tabset-look

For the Tab it would be the same procedure.

Example

.tab-selected-look { background-color: black; }
.tab-unselected-look { background-color: blue; }
.tabset-look { background-color: yellow; }