Themes and Skins

IBM WebSphere Portal allows the portal site’s look and feel to be changed based on themes and skins.   The theme controls the sites over all look and feel, while the skin determines how components, such as row or column containers and portlets, are rendered.

The following graphic shows the River Bend Tea and Coffee Company’s welcome page.   The graphic has been annotated with red and blue arrows to differentiate items that are part of the theme , verses items that are part of the skin .   These are only some of the items that are configured by themes and skins.

 

 

ThemesSkins

 

 

In the graphic, the red arrows point to items that are configured by the theme . Items such as background image, the corporate logo, the current page menu item background, menu fonts and colors, etc, are all items that that can be configured in the theme.   In order to modify any of these items a theme style would need to be created or modified, or a custom theme created and applied to the page.

The three blue arrows point to portlets that are displayed on the Welcome page.   Portlets are displayed in containers, boxes.   Skins are used to modify how those containers are displayed.   For example, the Wlinks portlet at the bottom of the page has the portlet navigation drop down arrow shown, pointed to by the blue arrow.   By modifying the skin, a different graphic could be used.

It’s important to note that themes and skins do not have a one to one relationship.   This means that a given theme can use more than one skin.   Conversely, a given skin can be used by more than one theme.   So, for example, a theme can be applied to a set of pages and each page code use a different skin to modify how the page looks.   This provides for greater re-use of themes and skins among or within a site.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: