Customize the Web 2.0 theme

 

+

Search Tips   |   Advanced Search

 

Modifying styles

The PortalWeb2 theme is based on the Portal theme and generates very similar HTML, therefore the process for modifying styles is identical.

Specifically, modifying the CSS, color palettes, background images, etc., is the same for the PortalWeb2 theme.

The Portal theme was designed to exploit the features of the Theme Customizer portlet. Therefore you can use that portlet to customize the PortalWeb2 theme as well, however with the following limitation: As the PortalWeb2 theme does not currently support multiple theme policies, it always renders subject to the theme policy assigned to the first page with which the theme is rendered.

 

Modifying the generated markup

The PortalWeb2 theme generates markup in two different ways:

• The default page structure.

  This is generated by the theme JSPs and can be modified just like a traditional Portal theme, with the qualification that the theme must contain the empty placeholder division tags (<div>) that the CSA aggregator uses to populate the theme navigation and page content.

• The markup rendered for the theme navigation elements and page layout:

  The CSA aggregator uses XSLT to render the navigation elements and page layout. In many cases you can achieve a desired customization by using only CSS style sheets, but for the cases where changes to the markup itself are truly required, below is the list of XSLT files that render each theme element:

  Theme element	XSLT file
  main menu	xsl/mainMenu.xsl
  top navigation tabs	xsl/topNavRender.xsl
  side navigation tree	xsl/sideNavRender.xsl
  page layout (rows and columns)	xsl/mainContentRenderLayout.xsl
  IBM skin	xsl/IBM.xsl
  noSkin skin	xsl/NoSkin.xsl

 

Adding new elements to the theme

To add a new navigation element to the theme...

• Add an empty division with a unique ID to the theme JSPs by using the <div> tag.

• Write a Javascript controller object that extends the base object...

  com.ibm.portal.aggregation.theme.NavigationElement

• Register your new navigation Element with the CSA aggregator...

  1. Edit the file head_csa.jspf in the theme.

  2. In the definition of the bootstrap() function, find the lines shown below and add a new, similar line for your navigation element:

     portalAggregator.navigation.addNavigationElement(new com.ibm.portal.aggregation.theme.TopNavigation() );

     portalAggregator.navigation.addNavigationElement(new com.ibm.portal.aggregation.theme.SideNavigation() );

     portalAggregator.navigation.addNavigationElement(new com.ibm.portal.aggregation.theme.CrumbTrail() );

 

Adding Web 2.0 skins

In conventional portal skins, a Control.jsp implements the code to render the decoration around a portlet. With the portal Web 2.0 theme, the portal renders the pages on the client. Therefore, rather than invoke a JSP to render the skin, it executes an XSLT transformation. To achieve this, the portlet registers the following at bootstrap time in head_csa.jspf:

• The skin name and xslt file path in a mapping for use by the CSA aggregator

• Object ID, that is its internal identifier that it retrieves from the portal model.

At runtime, the page layout model stores the object ID of the assigned skin. The CSA aggregator retrieves the XSLT path of the skin, then loads and applys it to render the skin. If the XSLT path is empty or null, the default skin XSLT would be used.

To add a new skin...

1. Implement an XSLT to render the desired markup.

2. Store the XSLT file in the /xslt directory of the theme, with the same name as the skin. For example, for the IBM skin this is xslt/IBM.xsl .

3. Register the new skin with the CSA aggregator as follows:

   1. Edit the file head_csa.jspf in the theme.

   2. In the definition of the bootstrap() function, find the lines shown below and add a new, similar line for your skin:

      portalAggregator.page.addSkin(new com.ibm.portal.aggregation.IbmSkin("IBM",skinResourceRoot2Id["IBM"],""),true);

      portalAggregator.page.addSkin(new com.ibm.portal.aggregation.Skin("NoSkin",skinResourceRoot2Id["NoSkin"],""),false);

 

Parent topic

Web 2.0 theme

 

Related tasks

Use the portal Web 2.0 theme

 

Related reference

Differential page rendering

 

Related information

Javadoc for WebSphere Portal V6.0, V6.01 and V6.1