Styles for Themes and Skins

This preview pane shows styles that are used with themes and skins. The pane to the right contains the code that generates these styles. Editing this code will not only change the appearance of the styles in the preview pane, but also the corresponding theme and skin style as it appears within your application.

To see how styles are used with Portlets, select the <portlet.html> file from the drop-down menu above.


Theme Styles


Styles used in Theme - Tool Bar

Banner Background Tool Bar Show toolsIcon Show toolsIcon On




Styles used in Theme - Link Bar




Styles used in Theme - Label Bar

Selected Label Unselected Label


Show toolsSelected Label Icon Show tools




Styles used in Theme - Page Bar

Selected Page Unselected Page


Show toolsSelected Page Icon Show tools




Styles used in Skin

Portlet Tiltle Show tools Show tools Help Edit Minimize Maximize
Navigation node Top Level Node
Navigation node Selected Branch
Navigation node Selected Node
Navigation node Unselected Node
Navigation node Unselectable Node