Introduction to Websphere Portal Themes

Introduction
Visual aspects of a portal have a significant impact on the quality of user experience and, thus, indirectly on the success of the portal. The look and feel of the portal should be appealing and unique. Most of the times look and feel provided by the portal server does not serve the purpose. Hence, most of the portal servers provide mechanism to customize the look and feel of the portal. In Websphere portal, themes and skins provide the mechanism to customize the look and feel of the portal for an enhanced user experience.
A Websphere Portal theme is an abstraction that captures the look and feel of the website. The theme is used to determine the global visual appearance of a page. The choice of theme affects the navigational structure, logos, banners, fonts, and colors. It governs the navigation structure of the entire portal. A skin, on the other hand, controls the look and feel of borders around components. A skin may or may not be associated with a theme.
Default themes and skins
Themes and skins are stored in separate folders in Websphere Portal. The default folders for themes and skins are
/wp_profile/installedApps/nodename/wps.ear/wps.war/themes/html/ for themes, and,
/wp_profile/installedApps/nodename/wps.ear/wps.war/skins/html/ for skins.
The above mentioned folders also contain folders with customized theme. For creating new theme, one can copy and paste one of the existing theme folder and change the name of the folder. Later, using portal administration, this newly created theme can be installed by specifying the path of the newly created folder.
Anatomy of a theme
A portal theme is basically a assembly of jsp pages and jsp page fragments which are arranged in the following way.

Apart from the jsp components in the above figure, the websphere portal theme contains components for controlling horizontal and vertical layout, changing the stylesheets, rendering the flyouts, etc.
In addition to jsp components, Websphere portal also contains tags for controlling the navigational structure of the portal, formatting tags, logic tags, etc.
Theme Policy
Theme policies are introduced with the version 6.0 of the WebSphere Portal. Theme policies control how various parts of theme are displayed on the page. Using various theme policies, you can have one theme but several looks to your portal. In essence, theme policies are achieving the same thing which can be achieved by creating separate theme but are less verbose and avoid duplication of resources. But then, which one of two to choose?
A theme basically defines the look and feel of for the entire portal. But, if you want to customize the theme for a particular page in the portal, then a theme policy, a list of policy attributes stored in an xml file, provides a better alternative. For example, according to your portal theme, there will be a left navigation menu for every page. But, suppose, on a particular page, you might not want the left navigation menu. So, instead of creating a new theme without left navigation menu, which involves the procedure described above for creating a new theme, one can create a theme policy and disable the left navigation menu on it.
Apart from the standard attributes, you can create custom attributes in theme policy for fine grained control over the look and feel of the portal.
Theme extensions
Like the Eclipse framework, theme extensions provide extension points to create and extend plug-ins. This extension allows for a highly customizable theme with little or no coding changes. For example, theme extensions let you add content to the rendered page without updating JSP files. WebSphere Portal provides several extensions that are ready to use, as is. Some of the default extensions include functionality to add flyouts or context menu items. Websphere portal exposes the API for theme extensions.
Conclusion
In this blog, we discussed about the capabilities of the WebSphere Portal themes. Themes provide the functionality to customize the look and feel of the portal. With the advent of theme policies in Websphere 6.0, it has become relatively easy in Websphere Portal to override the behavior of themes on specific pages. An important thing to undestand is when WebSphere Portal finishes with its aggregation (skins, themes, and portlets), all that is returned is HTML, CSS, and Javascript. So, if one wants to debug or troubleshoot any theme related issue, he/she can use standard tools like Firebug.