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%; 
}

Comments

amar said…
Hi, i tried it but not get much. In my module i have to show provide color for individual tabs.
Means each tab in my module have different color.
I tried alot plz as earliest
October 28, 2011 at 6:45 PM
BoharaG said…
Sorry for the late response as I did not get notification about this comment. Your requirement seems really interesting. Were you able to make this as desired? If yes, could you please add here as comment. If no, we will together search for the solution.
June 20, 2013 at 10:22 PM
Post a Comment

Popular posts from this blog

Eclipse Setup for Hadoop Development

Image
Objectives We will learn the following things with this tutorial Setup Eclipse plugin for Hadoop   Setup Hadoop Location in Eclipse   Create and run Hadoop project   Prerequisites The following are the prerequisites for setting up Eclipse for developing Hadoop programs running MapReduce and further extensions . You should have the stable build of Hadoop You should have eclipse installed on your machine Setup Eclipse plugin for Hadoop   Go to the Hadoop eclipse plugin folder where the file hadoop -x . x . x-eclipse-plugin . jar resides.       The plugin usually resides under   folder     / hadoop -x . x . x/contrib/ eclipse-plugin for example: hadoop -0.20.0/ contrib . /eclipse-plugin.       But it seems they removed the plugin from / hadoop -x . x . x/contrib/ (in my case, x . x . x=1 . 0.4) . There's a eclipse-plugin folder in / hadoop -x . x . x/src/contrib/ but I could not...
Read more

Dependency Injection using Spring Framework

What is dependency injection? Dependency injection (DI) is the method to create needed dependencies or look them up somehow without doing it in the dependent code. You do not create your objects but describe how they should be created. Then, it is the job of the container (like Spring container) to actually inject those dependencies when it creates the bean. This is fundamentally the inverse of the bean itself being in control of instantiating or locating its dependencies on its own using direct construction of classes. Hence DI is also referred to as Inversion of Control (IoC). Spring supports two types of dependency injection: Setter Dependency Injection: Dependency is provided through setter methods as per Java Bean style. Constructor Dependency Injection: The dependency is injected via constructor arguments. What is a bean? Bean is a typical java bean with a unique id. A bean is simply an object that is instantiated, assembled and otherwise managed by a Spring IoC conta...
Read more

Old Questions for Big Data Technologies at Institute of Engineering(IOE), Tribhuvan University, Nepal

Here are the Old Questions of the subject( Elective II )  Big Data Technologies (Subject Code: CT 765 07) for  BE Computer and Electronics & Communication Engineering  at  Institute of Engineering(IOE), Tribhuvan University, Nepal. These questions were asked in Borad Exam in 2073, 2072, 2071 and 2070 BS. 2072 1. What are the technical challenges and characteristics of  big data? Who are the data scientists, list out their roles and skills. [6+6] 2. With diagram, explain genelal archiiecture of Google File System. OR a)   Why do we have single master in a GFS and millions of chunk servers? b)   A cluster contains 1500 machines, each having 500 GB disc capacity. Calculate approximate the number of the chunk servers, the blocks and the total available size ...
Read more