Change the tab color

Question

Hi,
i'm unable to change the tab color of panelTabbed item, i've tried the following in a css sheet:
af|panelTabbed::tab:selected {
font-style:italic;
background-image: url("../Images/section_label_body.jpg");
border-bottom-color: red;
border-color: Fuchsia ;
border-top-color: Green;
outline-color: Yellow;
color: Aqua;
font style and background image seems to work (which tells me that i have the right skin selector) but non of the rest is changing the color of the tab.
does anyone knows how to do that???????
Note that when i say tab i mean the tabs header, where you click on it and it opens the tab body.
Thanks,
Alain.

Answer 1

Hi,
best tip I can give is:
Disable content compression for the generated HTML output of the ADF Faces page. This will change the style class names from being obfuscated, which we use to reduce the download size of pages. Astyle class that shows as .x3s at runtime might show as af_inputText_content after this. The af_inputText_content then is waht you need to discover and translate into a valid skin selector.
<context-param>
<param-name>org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name>
<param-value>true</param-value>
</context-param>
Run the ADF Faces application you want to discover the skin selector for in FF with Firebug and the WebDeveloper plugin installed.
Select the tab and look at the skin selectors displayed as the style class properties. If you find someting like af_panelTabbed_tab then this translates to af|panelTabbed::tab. If you see something like .p_selected then this means its a pseudo class that needs to be appended to the selector like af|panelTabbed::tab:selected.
Use Firebug in inspect mode and select the tab. This shows you all the selectors as style classes in the generated HTML output. Open the Web Developer plugin to edit CSS on the page. Then add the style class selector you found, e.g. .af_panelTabbed_tab (note the leading dot ".") or with a curly brace
.af_panelTabbed_tab{ ... }
Within the cury braces, type the CSS you want to set and see how it behaves. You may have to play a bit to exactly find the style class and css you want, but assuming that the follwing works
.af_panelTabbed_tab .p_selected{background-color:red}
then this translates to teh following skin selection to be copied to the CSS skin file
af|panelTabbed::tab:selected{background-color:red}
Note that this backward translation from style class to skin selector needs some patience. However, experience proves to be the best when cooking and so it does for skinning.
Hope this helps
Frank