The portal page is composed of JSPs for screens, themes, and skins that are typically created by the Web designer of the portal.

  • Themes :It provide the navigation, appearance, and layout of the portal, including colors, fonts, and images outside of the portlet content area.
  • Screens:The area of the portal that typically displays portlets, but can also display other content in its place, for example, a login form or error message. Screens are selected from navigation icons in the theme.
  • Skins:It represent the border rendering around components, such as row containers, column containers, or portlets. Skins are installed independently from themes. However, the administrator can set a default skin for a theme.

It is best practice to copy the IBM directory, give it your own name, and then use that for your sample. Also, it is best to assign it to a page only, and not the whole portal, while developing it. The portal page is rendered starting with Default.jsp in the /themes directory.

The starting place for building the portal page is Default.jsp in the /themes directory. The screen and skin are called by the corresponding and tags from the engine tag library.


JSP in theme:

    • Head.jspf: Head.jsp provides the necessary header information to correctly render the portal page. This file is used to link the style sheets and set the page title and the text direction.


    • Banner.jspf. This fragment is the first visible JSP fragment to be included in the portal. It represents the top layer of the page and it holds the launch button, the breadcrumb trail, the search control, and the toolbar JSPF files.


    • TopNav.jspf. This fragment controls the look and feel of the top navigational bar. This bar can be one or two layers, depending on the theme policy selected. Edit this JSP file if you want to create a drop-down navigational structure. The file also holds logic to render the context menus for the page. Appendixes A and B show additional variations on the navigation of the WebSphere Portal site.


    • SideNav.jspf. This fragment controls the side navigation and only has visible content if needed. This page also has logic to expand and contract the child pages and build the context menus for the pages.


  • Footer.jspf. The final fragment is the footer, which holds the normal footer information for page navigation and quick links to other pages for the users.


Skins represent the border rendering around components, such as row containers, column containers, or portlets. The skin is loaded in the portal page by the tag. Skins are installed independently from themes. However, a skin can be associated with a theme.
Skins define more than the look and feel of portlets; they define the look and feel of components. These components include the navigation, containers, and controls. This hierarchical structure is depicted in the following diagram.

The components of the skin are called in the following order.

  1. The tag in the default.jsp, displays the components for the selected node. The components are implemented as row containers, column containers, and controls depending upon the portal layout that is defined in portal page customization. Controls are displayed using Control.jsp. The figure in Underlying layout of the home screen depicts one row container that has two column containers, each containing two portlets.
  2. The row and column containers display their nested components using either Java code or the and elements.
  3. Each portlet is rendered by the tag within the Control.jsp. file. The control also builds the border and title bar around the portlet output.

JSPs of Skin

  • Control.jsp. This file controls the look and feel of the portlet itself. It renders the menu items, the title bar, and the table that holds the portlet content. It also provides drag-and-drop handles for moving the portlet around on the portlet page.
  • UnlayeredContainer-V.jsp. This file controls the vertical columns for the portlets and how they are arranged within that column. The tags in the JSP file help control the drag-and-drop feature.
  • UnlayeredContainer-H.jsp. This file controls the horizontal appearance of the portlets and can contain the UnlayeredContainer-V.jsp.

Deploying the Theme and skin
Copy the above created theme and skin in the below mentioned path

  • Themes : /software/WebSphere60/AppServer/profiles/wp_profile/installedApps/Cell /wps.ear/wps.war/themes/html
  • Skins:/software/WebSphere60/AppServer/profiles/wp_profile/installedApps/Cell/wps.ear/wps.war/skins/html

Themes and skins can be deployed using the Administration console or using XMLaccess scripts

Through Admin Console:

  • Login the portal
  • Got to the Portal admin Console To add the theme, use the Themes and Skins portlet under Administration > Portal User Interface > Themes and Skins
  • Click on add new theme. Enter the following field (s) :
    · Theme name and default locale title
    · Theme directory name
  • Click on Ok Button.
  • Theme is deployed.
  • Same steps need to be follow to deploy the skin.

Through XML Access : See the XMLAccess script article

Leave a Reply