TThheem
meess &
& SSkkiinnss iinn W
Weebbsspphheerree PPoorrttaall 88..00
Developing New Theme Skin modules in Websphere Portal 8.0
INTRODUCTION 
To develop new Themes/Skins in IBM Websphere Portal 8.0 following are the pre-requisites:
1. IBM WebSphere Portal ver 8.0 installed in the local machine.
2. IBM Rational Application Developer ver 8 or above / IBM Rational Software Architect.
3. WebDAV Client (not mandatory but good to have)
The steps mentioned below are required to be followed to develop a new Theme/Skin module in
IBM WebSphere Portal 8.0. All the steps have been discussed below in details with necessary screenshots.
CORE THEME RESOURCES 
To set up the custom theme in an EAR file we need to retrieve the source from the shipped theme.
We need two kind of resources for this:
1. Static (Cascaded Style Sheets, JavaScripts, etc) resources.
2. Dynamic resources (JavaServer Pages).
Dynamic resources  Need to be copied from the filesystem from the location /WebSphere/PortalServer/theme/wp.theme.themes/default80/installedApps/DefaultTheme80.ear/DefaultTheme80.war
into any folder in your local file system for e.g. Desktop.
Copy the following folders/files to your local folder (e.g. Desktop):
 skins
 themes
 WEB-INF/decorations.xml
 WEB-INF/tld/*
Static resources  To retrieve the static resources we need to retrieve the content through the browser,
using the following URLs:
Themes – http://kohibhat:10039/wps/mycontenthandler/dav/fs-type1/themes/?mime-type=application/zip
Skins – http://kohibhat:10039/wps/mycontenthandler/dav/skinlist/?mime-type=application/zip
Common Resources –
http://kohibhat:10039/wps/mycontenthandler/dav/fs-type1/common-resources/?mime-type=application/zip
Unpack the ZIP files and save them to a temporary folder.
When common-resources are unzipped, the folder is named only “ibm”. Move the folder “ibm” into a
newly created folder with the name “common-resources”.
Some sample screenshots are shown below :
Page 1 of 15
Author: Kohinoor Bhattacharya
TThheem
meess &
& SSkkiinnss iinn W
Weebbsspphheerree PPoorrttaall 88..00
Page 2 of 15
Author: Kohinoor Bhattacharya
TThheem
meess &
& SSkkiinnss iinn W
Weebbsspphheerree PPoorrttaall 88..00
SETTING UP DEVELOPMENT ENVIRONMENT IN RAD 
To work with the theme, we must create two Dynamic Web Projects that will contain the WAR files and
then be deployed as one EAR file to the Portal/Application Server.
Dynamic resources:
1. Open RAD and switch to the Java EE Perspective.
2. Select File --- New --- Project --- Dynamic Web Project
3. Define names as given below:
 Project name: CustomTheme8Dynamic
 Select 2.4 as the Dynamic Web module version
 EAR project name: CustomTheme8EAR
 Select “Websphere Application Server” as the Runtime Environment
4. Click Next, Next, and then Finish.
5. Now copy the resources retrieved from the shipped theme to the project (see screenshot below):




skins → WebContent/skins
themes → WebContent/themes
WEB-INF/decorations.xml → WebContent/WEB-INF/decorations.xml
WEB-INF/tld → WebContent/WEB-INF/tld
Page 3 of 15
Author: Kohinoor Bhattacharya
TThheem
meess &
& SSkkiinnss iinn W
Weebbsspphheerree PPoorrttaall 88..00
Fig: File structure of the dynamic resources
Static resources:
1. Select File --- New --- Project --- Dynamic Web Project.
2. Define names:
 Project name: CustomTheme8Static
 Select 2.4 as the Dynamic Web module version
 EAR project name: Select CustomTheme8EAR
 Select “Websphere Application Server” as the Runtime Environment
3. Click Next, Next, and then Finish.
4. Copy the resources previously retrieved to the following directories:

themes → WebContent/themes
Page 4 of 15
Author: Kohinoor Bhattacharya
TThheem
meess &
& SSkkiinnss iinn W
Weebbsspphheerree PPoorrttaall 88..00








common-resources → WebContent/common-resources
skinlist/ibm.portal.80Hidden → WebContent/skins/Hidden (before copying, delete these
files/folders):
skinlist/ibm.portal.80Hidden/metadata/*
skinlist/ibm.portal.80Hidden/metadata.properties
skinlist/ibm.portal.80NoSkin → WebContent/skins/NoSkin (before copying, delete these
files/folders):
skinlist/ibm.portal.80NoSkin/metadata/*
skinlist/ibm.portal.80NoSkin/metadata.properties
skinlist/ibm.portal.80Standard → WebContent/skins/Standard (before copying, delete these
files/folders given below):
skinlist/ibm.portal.80Standard/metadata/*
skinlist/ibm.portal.80Standard/metadata.properties
1. To allow access to the resources, add the code in section 1 to the WEB-INF/web.xml file :
Section 1: Code to add to WEB-INF/web.xml
<web-app ...>
[................]
<context-param>
<description>A regular expression that defines which of the resources in the WAR file can be
served by the portal war datasource. </description>
<param-name>com.ibm.portal.whitelist</param-name>
<param-value>.*</param-value>
</context-param>
<context-param>
<description>A regular expression that defines which of the resources in the WAR file cannot be
served by the portal war datasource.</description>
<param-name>com.ibm.portal.blacklist</param-name>
<param-value>WEB-INF/.*</param-value>
</context-param>
[................]
</web-app>
Page 5 of 15
Author: Kohinoor Bhattacharya
TThheem
meess &
& SSkkiinnss iinn W
Weebbsspphheerree PPoorrttaall 88..00
Fig: File structure of the static resources
2. Now Right-click the EAR project and select Java EE -- Prepare for deployment.
CREATING DYNAMIC CONTENT SPOTS 
1. Create a new Dynamic Content Spot as per the instructions given in the table below :
1.
Log on to the WebSphere® Integrated Solutions Console.
Page 6 of 15
Author: Kohinoor Bhattacharya
TThheem
meess &
& SSkkiinnss iinn W
Weebbsspphheerree PPoorrttaall 88..00
2.
Go to Resources -> Resource Environment -> -> Resource environment providers -> WP
DynamicContentSpotMappings.
3.
Select Custom Properties.
4.
Select New.
2. Add the “custom properties” listed below to the “Resource environment provider entry, “WP
DynamicContentSpotMappings”, where “CustomTheme8Dynamic” is the context root of the
Dynamic Resources WAR file :
Name: Custom80theme_footer
• Value: res:/CustomTheme8Dynamic/themes/html/dynamicSpots/footer.jsp
Name: Custom80theme_crumbTrail
• Value:
res:/CustomTheme8Dynamic/themes/html/dynamicSpots/crumbTrail.jsp?rootClass=wpthemeCrumb
Trail&startLevel=2
Name: Custom80theme_topNav
• Value:
res:/CustomTheme8Dynamic/themes/html/dynamicSpots/navigation.jsp?rootClass=wpthemeHeader
Nav&startLevel=0&primeRoot=true
Name: Custom80theme_primaryNav
• Value:
res:/CustomTheme8Dynamic/themes/html/dynamicSpots/navigation.jsp?rootClass=wpthemePrimary
Nav%20wpthemeLeft&startLevel=1
Name: Custom80theme_secondaryNav
• Value:
res:/CustomTheme8Dynamic/themes/html/dynamicSpots/navigation.jsp?rootClass=wpthemeSecond
aryNav&startLevel=2&levelsDisplayed=2
Name: Custom80theme_commonActions
• Value: res:/CustomTheme8Dynamic/themes/html/dynamicSpots/commonActions.jsp
Name: Custom80theme_pageModeToggle
• Value: res:/CustomTheme8Dynamic/themes/html/dynamicSpots/pageModeToggle.jsp,wp_toolbar
Name: Custom80theme_head
• Value: res:/CustomTheme8Dynamic/themes/html/dynamicSpots/head.jsp
Name: Custom80theme_status
• Value: res:/CustomTheme8Dynamic/themes/html/dynamicSpots/status.jsp, wp_status_bar
Page 7 of 15
Author: Kohinoor Bhattacharya
TThheem
meess &
& SSkkiinnss iinn W
Weebbsspphheerree PPoorrttaall 88..00
Fig: Resource Environment Provider Entries in WAS
Fig: Custom properties to be selected for Dynamic Content Spot Mappings
Page 8 of 15
Author: Kohinoor Bhattacharya
TThheem
meess &
& SSkkiinnss iinn W
Weebbsspphheerree PPoorrttaall 88..00
Fig: New Custom properties added for Dynamic Content Spot Mappings
3. Now, Restart WebSphere Portal.
4. Now the content spots in the theme_*.html must be adapted:
a) In RAD, open “CustomTheme8Static/WebContent/themes/Portal8.0/nls/theme_en.html“
Note: This must be done for all localized theme_*.html files that should be supported by the solution
b) Replace the following content spots with the new names:
80theme_footer → Custom80theme_footer
80theme_crumbTrail → Custom80theme_crumbTrail
80theme_topNav → Custom80theme_topNav
80theme_primaryNav → Custom80theme_primaryNav
80theme_secondaryNav → Custom80theme_secondaryNav
80theme_commonActions → Custom80theme_commonActions
80theme_pageModeToggle → Custom80theme_pageModeToggle
80theme_head → Custom80theme_head
80theme_status → Custom80theme_status
c) Also, change the following path in the bootstrap.jspf
(CustomTheme8Dynamic/WebContent/themes/html/bootstrap.jspf ) to the new WAR file:
URI davURI = pocSvc.createURI("dav","fs-type1/common-resources/ibm/css/portal/ibmPortlets.css");
Page 9 of 15
Author: Kohinoor Bhattacharya
TThheem
meess &
& SSkkiinnss iinn W
Weebbsspphheerree PPoorrttaall 88..00
to
URI davURI = pocSvc.createURI("war","CustomTheme8Static/commonresources/ibm/css/portal/ibmPortlets.css");
ENABLE JSP RELOADING 
1. To enable reload of the static resources, make the change shown in section 2 to the Default.jsp
(CustomTheme8Dynamic/WebContent/themes/html/Default.jsp):
Section 2: Change to enable reload of static resources
<r:dataSource uri='<%="spa:" + pageContext.getAttribute("currentNavNodeID",
PageContext.REQUEST_SCOPE)%>' escape="none"><%---%><r:param name="themeURI" value="${themeTemplateURI}"/><%---%><r:param name="mime-type" value="text/html"/><%---%><r:param name="max-age" value="2"/><%---%></r:dataSource>
2. Also, make sure that
CustomTheme8Dynamic/WebContent/WEB-INF/ibm-web-ext.xmi
and
CustomTheme8Static/WebContent/WEB-INF/ibm-web-ext.xmi
are set to the following:
reloadingEnabled="true"
THEME SKIN DEPLOYMENT USING DEPLOYMENT SCRIPTS 
XML access is needed to register the theme and skins with Portal. The attached sample script will
register one new theme:
• MyCustom Portal-8 Theme
and three skins:
• MyCustomPortal 8 – Standard
• MyCustomPortal 8 – NoSkin
Page 10 of 15
Author: Kohinoor Bhattacharya
TThheem
meess &
& SSkkiinnss iinn W
Weebbsspphheerree PPoorrttaall 88..00
• MyCustomPortal 8 – Hidden
1. Import the sample XML, “ThemeSkinRegistry.xml” using the XML Admin Portlet in the Import XML
page of the IBM Websphere Portal Server Admin console as shown in the fig. below
Fig: Importing the XML Access Script for registering the new Theme & Skins
C:\Users\
IBM_ADMIN\Desktop\ThemeCustomization\ThemeSkinRegistry.xml
2. Finally the EAR files must be deployed to the Websphere Application Server – this can be done
from the RAD as instructed in the table below:
1. Right-click the EAR project (CustomTheme8EAR) and select “Run as” --- “Run on server”
2. Select “Manually define a new server”and “WebSphere Portal v8.0 Server” from the drop-down list.
3. Enter the server’s hostname and define a server name as you like.
4. The Server runtime environment shows “Create a new runtime environment” if you are doing this for
Page 11 of 15
Author: Kohinoor Bhattacharya
TThheem
meess &
& SSkkiinnss iinn W
Weebbsspphheerree PPoorrttaall 88..00
the first time.
5. Enter the location for “WebSphere Portal” and the “AppServer” and enter the password for the admin
user; click Next
6. Enter the password for the Portal and WAS admin user to enable automatic login; click Next.
7. Check the settings and, if correct, click Next again.
8. The “CustomTheme8EAR” should now be preselected to be deployed; click Finish.
The theme and the skins should now be deployed to the server.
Finally, the theme needs to be assigned to a page - go to the IBM Websphere Portal Server Admin console
- Create a new page called MySaf - Edit Page properties and then select the "MyCustom Portal-8 Theme"
as the theme for the page as shown in the screenshots below.
Click OK and navigate to that page to view the theme.
Page 12 of 15
Author: Kohinoor Bhattacharya
TThheem
meess &
& SSkkiinnss iinn W
Weebbsspphheerree PPoorrttaall 88..00
Similarly click the Edit Page Layout button of the MySaf page and assign some sample portlets to that
page as shown in the screenshots below.
Now go to the "Appearance" tab and select 2 or more skins that we developed and deployed and click
Done. Navigate to the MySaf page to view the new skins developed and deployed.
Page 13 of 15
Author: Kohinoor Bhattacharya
TThheem
meess &
& SSkkiinnss iinn W
Weebbsspphheerree PPoorrttaall 88..00
Page 14 of 15
Author: Kohinoor Bhattacharya
TThheem
meess &
& SSkkiinnss iinn W
Weebbsspphheerree PPoorrttaall 88..00
After making some code changes/customization to the Custom Theme Skin modules using RAD, navigate
to the MySaf page which now has a custom look shown in the fig. below
Fig: MySaf page in custom theme and skins built on Websphere Portal Server 8.0
*****************************************
Page 15 of 15
Author: Kohinoor Bhattacharya