X

Oracle JDeveloper and Oracle ADF Blog

  • July 14, 2011

How to Skin the Navigation Pane component

I was recently asked if the navigationPane component could be styled to look like the below example.  The answer is, obviously, yes.  In this article, I will show how to skin a navigationPane of type Bar to meet a desired look and feel.  


Default navigationPane with hints=bar



Styled navigationPane with hints=bar

First, determine if you want to set any background for your navigationPane and style the af|navigationPane-bar::body selector accordingly. 
af|navigationPane-bar::body {background-color:aqua;}

Then determine the style of the commandNavigationItem links inside of the navigationPane and set the af|navigationPane-bar::link selector accordingly.  Set properties such as font-size, font-weight, color, padding.

af|navigationPane-bar::link
{
  color:#333333;
  font-size: 16px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 18px;
  padding-right: 15px;
}

Consider whether you want to skin the commanNavigationItem links for :hover or :selected.  For instance, if you want a background image with an arrow to show the currently selected.  (Note, in the below code snippet we are reusing an image that is delivered as a part of our ADF skins for simplicity of this code sample.)

af|navigationPane-bar::link:selected
{
  font-weight: bold;
  background-image: url("/afr/fusion/splittervc.png");
  background-repeat: no-repeat;
  background-position: bottom;
}

Lastly, either replace the existing separator icon whose dimensions are 2px by 17px with a new image and set the height and width to your new image using the af|navigationPane-bar::separator-icon-style selector. Or, choose not to have a separator icon as the example shows below.

af|navigationPane-bar::separator-icon-style
{
  background-image: none;
  width: 0px;
}
af|navigationPane-bar::separator-icon
{
  content: inhibit;
}

There are other changes that you can make to this component such as the style of the access key, the overflow indicators, and more states such as disabled.  Check out the new ADF Skin Editor and discover the available selectors for all of ADF Faces components.  

Join the discussion

Comments ( 1 )
  • VJ Wednesday, November 9, 2011

    af|navigationPane-bar::separator-icon-style

    how to set height in this style class wen i set height:40px; its not reflecting..


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.Captcha