IBM Portal Portlet v6.1 Themes

Please go through the following articles to understand the process of creating and customizing themes and skins in Portal.

Developing themes and skins in IBM® WebSphere® Portal 6.0.X

REDBOOK:IBM WebSphere Portal Express - Customizing Portal Express for Small to Medium Business:
Within this Redpaper, we focus on how your organization can customize Portal Express to more effectively meet the needs of your organization.

WebSphere Portal zone

JSP files for themes

Default.jsp. This file is the JSP that renders the portal page after the portal servlet has completed its initial preprocessing. This JSP includes numerous other JSPs, JSPFs, and tag lib definitions. The file also calls the js.jsp and the styles.jsp files, so that they are compiled, and so the styles and JavaScripts can include JSP logic to change the behavior of the portal dynamically.

Head.jspf. This fragment is called to set up the header area of the page. Theme extensions implementing the MetaTagDataItems are included at this time. Several JNDI lookup operations are performed in this JSPF file. The file also sets up links to the JavaScript and styles JSP files. Additionally it sets up some of the resources needed for the flyouts and gets other variables ready for the main menu (Launch button).

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.