We can change 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 -
After applying Skin tab looks like this -
![]()
Cheers :) Happy Learning
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 -
//ToChangetextstyleofTab
af|panelTabbed::tabaf|panelTabbed::tab-text-link {
color:white;
font-weight:bold;
}
//ToChangetabstyle
af|panelTabbed::tab {
background-color: Highlight;
width:200px;
}
//Toincreasesizeoftabcontenttomatchwithtabwidth
af|panelTabbed::tabaf|panelTabbed::tab-content {
width:200px;
}
After applying Skin tab looks like this -
