Skins

Skins represent the border rendering around components, such as row containers, column containers, or portlets. The skin is loaded in the portal page by the <wps:pageRender/> tag. Skins are installed independently from themes. However, a skin can be associated with a theme.

Skins define more than the look and feel of portlets; they define the look and feel of components. These components include the navigation, containers, and controls. This hierarchical structure is depicted in the following diagram.

Underlying layout of the Home screen

 Page

 Row Container

 Column Container

 Control

Portlet

 Control

Portlet

 Column Container

 Control

Portlet

 Control

Portlet

The components of the skin are called in the following order.

  1. The <wps:pageRender/> tag in the Home screen (Home.jsp) displays the components for the selected node. The components are implemented as row containers, column containers, and controls depending upon the portal layout that is defined in portal page customization. Controls are displayed using Control.jsp. The figure in Underlying layout of the home screen depicts one row container that has two column containers, each containing two portlets.

     

  2. The row and column containers display their nested components using either Java code or the <wps:componentLoop/> and <wps:componentRender/> elements.

     

  3. Each portlet is rendered by the <wps:portletRender/> tag within the Control.jsp. file. The control also builds the border and title bar around the portlet output.

    Note: Some of the icons in the portlet title bar have an impact on performance. See Using lightweight themes and skins for more information.

 

Default skins

The following skins are provided by WebSphere Portal for rendering portlets.

Album:

Album skin

Clear:

Clear skin

Diamonds:

Diamonds skin

Corner:

Wave skin

Echo:

Echo skin

Fade:

Fade skin

Hint:

Hint skin

Noborder:

Noborder skin

Noskin:

Noskin skin

Outline:

Outline skin

Pinstripe:

Pinstripe skin

Shadow:

Shadow skin

Wave:

Wave skin

IFrame:

IFrame skin

 

iFrame skin

The IFrame skin that is provided has a more practical purpose than the other skins. It renders the portlet content in an HTML iframe on the page. Iframes are treated as separate browser windows. The IFrame skin is especially useful for portlets that are slow to render, allowing the rest of the portal page to render without waiting on the content from the portlet within the iframe.

The width of this skin is set to 100% and height is set to 250 pixels. To change this setting, follow these steps:

  1. Locate the /IFrame subdirectory in the ../skins/html directory.

  2. Edit the file Control.jsp.

  3. Locate the markup for the iframe: 
    <iframe src='<%wpsURL.write(out);%>' SCROLLING="auto" FRAMEBORDER="0" Width="100%" >

  4. Change the width and height attributes of this tag.

  5. Save and close the file.

 

See also

 

WebSphere is a trademark of the IBM Corporation in the United States, other countries, or both.

 

IBM is a trademark of the IBM Corporation in the United States, other countries, or both.