PDA

View Full Version : Different tab themes/css on same page



Parag
6 Oct 2007, 1:33 AM
Hi,
I have a html page on which I want to show TabPanel with 3 main tabs and first tab will have 4 inner tabs. Can I change the css only for inner tabs? Please suggest how can I achieve this?
Thanks,
Parag

para
8 Oct 2007, 5:05 AM
One option would be to use IFRAMEs for your content. I don't really like this idea, but it would work.

To make a class only affect a certain type, list the hierarchy required in front of the classname.



DIV.x-layout-nested-layout DIV.x-layout-panel-center DIV.x-layout-panel-body DIV.my-inner-div {
color:#0f0f0f;
}
this will only affect the class in this hierarchy. You just need to use Firebug to inspect the element you wish to affect. You can then trace it back up and figure out how far out you have to specify your hierarchy.

Another option to this hierarchy is to make a container DIV for each panel with a different Id or class. Then you could simply say:


.my-inner-tab-one .my-inner-class {
color:0f0f0f;
}
.my-inner-tab-two .my-inner-class {
color:ffffff;
}


Hope this helps.

Parag
8 Oct 2007, 8:04 PM
Thanks Para,
I just did same thing as you have suggested in second option, I have applied different style sheets for inner tab divs (used firebug to inspect elements).
Thanks,
Parag