Developing Themes for WebSphere Portal

The Portal theme allows the developer to quickly and easily configure the combination of capabilities they want in theme without having to dig into the code. It has never been easier to deliver a responsive look and feel for your Portal.

The WebSphere Portal Technical community will continue publishing articles to assist in customizing the Portal user interface.

Wiki Quick Reference

Theme Optimization
Theme optimization allows a developer to configure the capabilities of a theme using a profile without having to dig into the code.
Theme Customization
Theme customization allows a developer to customize the capabilities of a theme without impacting other themes and with the flexibility of modules.
IBM Dojo Toolkit
An open source JavaScript library included within WebSphere Portal to ease the rapid development of cross-platform, Ajax-based applications.
The icon identifies the article as part of the information center.

Theme Customization Quick Start

This quick start guide provides the first steps for re-branding the Portal for your business. Understanding these concepts will enable you to quickly build a new theme using best practices.

  • File structureThe theme architecture separates the static and dynamic resources. It is important to understand that the static files are located on a WebDAV based filestore and the dynamic content is located with a webapp (EAR).
  • Connecting to the Portal WebDAVThe static files of the theme are located on a WebDAV based filestore. You can quickly connect and update these files for a new look and feel.
  • Create a new theme and skinA skin is the wrapper about your portlet object. A skin allows you to display the title and portlet actions among other features.
  • Create a custom layoutCreate a layout template that can be selected by using inline customization.
  • Create a custom styleA theme can have multiple styles that can be selected using inline customization.
  • Change the logoQuickly change the logo in the CSS to represent your organization or company.
  • Dynamic Content SpotsYou can utilize a JSP within your theme by using dynamic content spots.
  • The Module FrameworkFeatures, or modules, of a theme can be enabled and disabled by using a profile to configure them.

New! Mobile

The theme as of now has Responsive Web Design built-in to easily have your pages look optimal on smartphones and tablets in addition to on the desktop. All within the same single theme - a separate mobile theme is no longer required.



The theme displays navigation elements with links to access the pages in the Portal site.



Styles provide the ability to customize the visual aspects of a Portal theme using CSS. You can package styles for selection on the customization shelf.



A layout template is used to structure the presentation of the page content. Layout templates are assigned per page using the customization shelf.



Deployment discusses processes for optimizing theme source code and making your custom theme available on the Portal server.


Portal provides a menu framework to define and customize drop-down menu controls, such as page and portlet actions menus.

Show results per page