How to customize struts tabbedpanel style

Having problem to change the tabs created by using struts 2 tabbedpanel tag?
If you want to change the color and style of s:tabbedpanel in your accord,just override the CSS by creating your own CSS file and including it in your page.

Suppose we have a page which looks something like:










If you view the generated source using the Firefox plugin or IE developer tool you will see something like this html:








The class attributes are the parts of interest.

If you look at the embedded CSS you'll see these:

.dojoTab { 
position : relative; 
float : left; 
padding-left : 9px; 
border-bottom : 1px solid #6290d2; 
background : 
url(/struts2-showcase/struts/dojo/src/widget/templates/images/tab_left.gif) 
no-repeat left top; 
cursor: pointer; 
white-space: nowrap; 
z-index: 3; 
} 
.dojoTab div { 
display : block; 
padding : 4px 15px 4px 6px; 
background : 
url(/struts2-showcase/struts/dojo/src/widget/templates/images/tab_top_right.gif) 
no-repeat right top; 
color : #333; 
font-size : 90%; 
} 

If you include those in your own CSS file you can override the style.

You can define your own CSS something like this to override the background image of tabs:

.dojoTab { 
position : relative; 
float : left; 
padding-left : 9px; 
border-bottom : 1px solid #6290d2; 
background :url("../images/tab_left_blue.gif") no-repeat left top; 
cursor: pointer; 
white-space: nowrap; 
z-index: 3; 
} 
.dojoTab div { 
display : block; 
padding : 4px 15px 4px 6px; 
background :url("../images/tab_top_right_blue.gif") no-repeat right top; 
color : #333; 
font-size : 90%; 
}