What are Themes and Skins in WebSphere Portal ?


Theme determines the global appearance of a page. The purpose of this is to ensure visual consistency. Themes affect the navigational structure, the banner, the colors and fonts, the available portlet skins, and other visual elements of a page.

A Skin determines the frame that is displayed around a portlet.

Create your own theme:

To create your own theme go to the path as mentioned below you would be able to find a folder called IBM, which is the default theme folder for web sphere portal v6, comprises all the jsp’s, jspf’s, image and property files of portal theme.
Open a new folder with a name test1 under html and copy all the files under IBM theme folder and paste it under the test1 folder.

To make the new theme available in WebSphere Portal:

Use the Themes and Skins portlet under Administration > Portal User Interface where you can add your themes and set it as default theme.

• Edit the properties of a test page and set the page to use the new theme that you have created. Once you opened the page properties portlet you will see both drop down boxes as well as text fields.
• Choose the theme that you have created and then click ok to complete the theme setting to a page.
• Page properties portlet is shown below in that test1 is the theme that we have created.

Page Properties
Page Properties

How to apply colors to various elements of themes:

To change the color of theme elements, go to the path as mentioned below:

\IBM\WebSphere\profiles\wp_profile\installedApps\cell01\wps.ear\wps.war\themes\html\test\colors under colors folder you would find three files out of which open noGradients property file inside that you would find a lot of parameter’s each representing a resources in a portal page, assign desired color for various elements of a portal page in hexadecimal format. Once the modification is done in no Gradients.properties file it has to be assigned to pages of portal UI, where u wants your customized colors to be reflected, to assign this property file to a particular page we use a parameter called color Palette.

By default, pages do not have a colorPalette metadata value. To assign one, use the following procedure:

Click the Page properties of the page that you wish to use a specific color palette.
Expand advanced options.

Page properties
Page properties

Click on ‘I want to set parameter’.

• Enter colorPalette as new parameter.
• Enter the name of the color palette property file as the new value. For example, enter noGradients to assign noGradients.properties

Page properties
Page properties


laavanya.t said...

how to implement themes and skins......

Arun said...

Hi laavanya,

This post talks about the themes implementation itself. Are you facing any specific issues with respect to themes and skins ?

Post a Comment

Recent Posts

Popular Posts

© 2011-2019 Web Portal Club