ShowTable of Contents
One of the most common requirements in Portal projects is to have a customized theme. This article illustrates "in detailed steps" how to customize the WebSphere Portal 7.0 "PageBuilder2" Theme. To be able to create your custom theme, you should prepare your custom theme WAR, then customize the theme WAR items, and finally deploy the theme WAR.
Create your Custom Theme WAR
To be able to create your Custom Theme WAR file, you should perform the following steps.
Copy the content of the PageBuilder2 Theme
Copy the content of the PageBuilder2 Theme. You can find the content of the PageBuilder2 theme in
[Your Portal Server Path]\theme\wp.mashup.cc.theme\installedApps\wp.mashup.cc.theme.ear\PageBuilder2.war
Remove the Redundant Items
Remove the Redundant Items as follows.
Remove the "skins" folder
Remove the "skins" folder which you can find directly under the root folder.
Remove the plugin.xml which can be found under the WEB-INF folder.
Change the theme folder name
Change the name of the "PageBuilder2" folder under the "themes/html". For this example, I changed it to "HazemTheme123".
Change the web.xml display name
Change the theme display name in the web.xml to "HazemTheme123".
Match the names in the extension files with the new display name
Change the webApp href in the "ibm-web-bnd.xmi" and "ibm-web-ext.xmi" to "WEB-INF/web.xml#HazemTheme123".
Add the static content to the theme WAR
To be able to add the static content to the theme, you should use a WebDAV tool to be able to get the static content of the PageBuilder2 theme, and finally adding them to the war. Iam using the "AnyClient" tool, you can download it from here: http://www.jscape.com/products/file-transfer-clients/anyclient/. To be able to get the static content of the PageBuilder2 theme, follow the following steps.
Locate the static resources
Locate the the static resources of the "PageBuilder2" Theme by using the
Copy the static resources
Copy the the static resources of the "PageBuilder2" Theme and place them under "themes/html/HazemTheme123".
Change dynamic-content spots
Change all the dynamic-content spots in theme.html (and
theme_[locale].html), except for the layout one, to point to the
dynamic resources in the new WAR file.
For example, the following
<link rel="dynamic-content" href="dyn-cs:id:tabNav@tl:oid:csa2.theme">
Should be changed to:
<link rel="dynamic-content" href="res:/HazemTheme123/themes/html/HazemTheme123/tabNav.jsp">
Customize the Theme WAR
After preparing the theme WAR, You can now start working on developing your own theme. To be able to customize the current theme, you should first understand the functionality of the important "PageBuilder2" JSP files. The important files are as follows:
Which is responsible for including the theme files through the "theme.html"
Which is responsible for including the common styles and scripts, such as (Portal Theme and Skin Styles, Dojo Theme Styles, Widgets Styles, Dojo Script include).
Which is responsible for the navigation banner menu such as (Home, Administration, ...).
Which is responsible for the search form in the banner.
Which is responsible for the navigation banner common actions such as (Login, Logout and Help).
Which is responsible for displaying the navigation tabs under the banner navigation.
Which is responsible for generating "active sight analytics"
In my customized theme, I mainly played with the main theme CSS "themes/html/HazemTheme123/CSS/master.css" to change the look and feel of the theme. I also played with the bannerNav.jsp to add my own banner item "[About this sample theme]". Finally, I changed the labels of the bannerCommonActions.jsp. The figure below shows my customized theme.
You can see all the customization I did in the WAR attached to the article.
Install the Theme WAR
Package the theme folder to be "HazemTheme123.war" file then perform the following steps.
Deploy the theme WAR on the Portal WAS Admin Console as follows .Go to the admin console of the Portal WAS using the following URL:
https://[HOST]:[PORT usually 10032]/admin then install the WAR. Do not forget to set the context root of the WAR "/HazemTheme123".
Export the current themes
Import the following XML using the XMLAccess in the Portal Administration to export all the current themes.
<?xml version="1.0" encoding="UTF-8"?>
<request xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="PortalConfig_7.0.0.xsd" type="export" create-oids="true">
<theme action="export" objectid="*" />
Perform the following modifications on the generated XML file as follows.
Remove the redundant theme tags
Remove all the theme elements except the one for the "PageBuilder2", the unique name is "csa2.theme".
Remove the objectId from the theme element, set the "default" attribute to "false".
Change the "context-root" attribute value to "/HazemTheme123",
"resourceroot" attribute value to "HazemTheme123" and "uniquename"
attribute value to "HazemTheme123" .
Change the title of the localedata tag value to "Welcome to My Custom Theme"
Modify the theme template reference
Change the "com.ibm.portal.theme.template.ref" parameter to point to the theme context root as follows.
<parameter name="com.ibm.portal.theme.template.ref" type="string" update="set"><![CDATA[res:HazemTheme123/themes/html/HazemTheme123/]]></parameter>
Import the modified generated XML
Import the modified generated XML using the Portal Administration XML Access.
This is all about. I attached below my simple customized here