Customize the Web 2.0 theme

You can customize the Web 2.0 portal by modifying the styles or the generated markup, or by adding new elements or Web 2.0 skins.

For details about creating CSA skins refer to the WebSphere Portal family wiki.

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

Add 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.

  To do this...

  1. Edit the file head_extras.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() );
     

Add 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_extras.jspf: The skin name and xslt file path in a mapping for use by the CSA aggregator, along with its object ID, that is its internal identifier that it retrieves from the portal model.

At run time the page layout model stores the object ID of the assigned skin. The CSA aggregator retrieves the XSLT path of the skin, loads it, and applies 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_extras.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 concepts

Use the portal Web 2.0 theme

Related reference

Differential page rendering

Related information

WebSphere Portal family wiki - http://www-10.lotus.com/ldd/portalwiki.nsf/dx/introducing-client-side-aggregation-and-the-portalweb2-skin

---