ADF Skinning: Increase width, Change color of a tab in af:panelTabbed

Sharing is Caring

We can change the appearance of ADF Application by applying CSS and changing style properties of ADF Faces Component. Here I am writing a simple CSS to increase tab width of af:panelTabbed component

I hope you all know how to create a skin for ADF Application , If don’t know then look at this post
ADF Basics: Using CSS to change appearance of application (Skins and Styles in ADF Faces) 


af:panelTabbed looks like this (Using Alta UI Skin)

Now to changes tab width , background color or font style we can use CSSlike this –

//To Change text style of Tab
af|panelTabbed::tab af|panelTabbed::tab-text-link {
    color: white;
    font-weight: bold;
}

//To Change tab style
af|panelTabbed::tab {
background-color: Highlight;
width: 200px;
}

//To increase size of tab content to match with tab width
af|panelTabbed::tab af|panelTabbed::tab-content {
width: 200px;
}

After applying Skin tab looks like this –

af:panelTabbed

Cheers 🙂 Happy Learning

Related Posts

An Oracle ACE, Blogger, Reviewer, Technical Lead working on Oracle ADF

0 thoughts on “ADF Skinning: Increase width, Change color of a tab in af:panelTabbed”

Leave a Reply

Your email address will not be published. Required fields are marked *