WebSphere

 

Portal Express, Version 6.0
Operating systems: i5/OS, Linux, Windows

 

Migrate themes

 

+

Search Tips   |   Advanced Search

 

Themes developed on WebSphere Portal Express Version 5.x are compatible with WebSphere Portal Express Version 6.0 and are able to compile and render without code changes. In order for WebSphere Portal Express Version 5.x themes to function properly in WebSphere Portal Express Version 6.0, they should be applied to the same pages they were designed for in WebSphere Portal Express Version 5.x, using the same skins designed for use with that theme.

Migrated WebSphere Portal Express Version 5.x themes should be applied to the same pages they were designed for in WebSphere Portal Express Version 5.x.

WebSphere Portal Express Version 5.x themes were identified as either "administration" or "non-administration" themes. The Page Properties portlet allowed you to only assign administration themes to administration pages and non-administration themes to non-administration pages. In WebSphere Portal Express Version 6.0, themes are designed to work on all pages, so this restriction has been lifted. Themes migrated from WebSphere Portal Express Version 5.x were not coded with this in mind, so you need to either manually enforce assigning these themes to the appropriate pages, or update your theme to support navigation across top level pages.

Themes should be used with the same skins used with the theme in WebSphere Portal Express Version 5.x. Some WebSphere Portal Express Version 6.0 skins take advantage of new theme functions, such as context menus, that were not available in WebSphere Portal Express Version 5.x themes. See the "WebSphere Portal Express Version 6.0 function in migrated themes" section below for more information. The following sections provide additional information on migrating themes and skins:

 

Add support for top level page navigation

In WebSphere Portal Express Version 5.x, themes typically began rendering navigation at level 2 of the navigation model tree. Level one nodes (Home and Administration) were accessed by a URL in the themes banner that pointed explicitly to that page.

With migrated themes, this method creates problems if in Version 6.0, you assign the WebSphere Portal Express Version 5.x theme to a page it was not assigned to in the WebSphere Portal Express Version 5.x portal environment. Say, for example, you assigned the WebSphere Portal Express Version 5.x Administration theme to the 'Home' page in WebSphere Portal Express Version 6.0. Since the WebSphere Portal Express Version 5.x Administration theme contained only a link to 'Home' in the toolbar, this theme would provide no way to navigate to Administration. Use the following guidelines to avoid this problem:

For more details on this code example, refer to mainMenu.jsp in the IBM theme.

 

Enable Organize Favorites functionality in themes

The "My Favorites" feature in WebSphere Portal Express lets you bookmark a page in the portal so that you can return to it at a later time. The page is then added to your "My Favorites" list which is maintained by means of the Organize Favorites feature. Organize Favorites, a page containing the Organize Favorites portlet, lets you create, edit, activate, order, and delete labels and URLs. in the My Favorites list.

When you migrate pre-Version 6.0 themes, the label necessary for Organize Favorites functionality is migrated over.

In Version 6.0, you can access Organize Favorites functionality via customized code by creating a custom theme. Refer to the Creating your own theme topic for more information on how to do this.

To enable Organize Favorites functionality in this Version 6.0 theme through the Administration interface, do the following:

Organize Favorites is considered a node under the Content Root node. Nodes are located in a level of the navigation hierarchy relative to the parent node in which they are created. The topmost node in the tree is the Content Root.

By default, users without administrative privileges can only access nodes under the Home node, which is also under the Content Root node. Users with administrative privileges can use links in the toolbar to toggle between Administration and Home. If other nodes are created directly under the Content Root, links to these nodes are not referred to unless they are specifically added to one of the theme JSPs.

 

Enable drag-and-drop functionality in migrated skins

The drag-and-drop feature lets you quickly change the placement of individual portlets using your skins. The drag-and-drop feature lets you move a custom portlet from its current position by dropping it to another position on a page. This lets you quickly change the arrangement of your custom portlets on a page.

As this is a new feature to WebSphere Portal Express Version 6.0, you cannot directly access drag-and-drop functionality when using migrated skins. Use the following steps to enable drag-and-drop functionality in your migrated skin(s):

  1. Add the following code near the top of Control.jsp. 

    <%@ taglib uri="/WEB-INF/tld/dnd.tld" prefix="dnd" %>
<dnd:DNDPortletHelper/>

<%!
private static com.ibm.portal.identification.Identification identification;
public void jspInit(){
    try{
        /* Perform this JNDI lookup once as it hinders performance */
        javax.naming.Context ctx = new javax.naming.InitialContext();
        identification = (com.ibm.portal.identification.Identification) 
					ctx.lookup( "portal:service/Identification" );
	}
    catch ( javax.naming.NamingException ne ){
    // nothing is logged here because if Portal ever enters 		// this catch statement then severe problems have 
		// occurred and will have already been logged by 
		// errors reported by the lookup.
 
  }
}
%>

  2. In Control.jsp, enclose the table containing the container of your portlet's "skin" with a "drag" tag. Also place a "dragHandle" tag around your portlet title bar (but not on the buttons in the title bar). The following code provides an example: 

    <%-- Modification for Drag and Drop - need to pass the portlet control ID - Cannot use the 
		tag because it is an attribute --%>
<% 
    String currentLayoutNodeStr = "";
    if (pageContext.getAttribute("currentLayoutNode", pageContext.REQUEST_SCOPE) != null) { 
        LayoutNode currLayoutNode = (LayoutNode)pageContext.getAttribute("currentLayoutNode", 
					pageContext.REQUEST_SCOPE);
        currentLayoutNodeStr = identification.serialize(currLayoutNode.getObjectID());
    } 
    else {
		LayoutNode currLayoutNode=(LayoutNode)pageContext.getRequest().getAttribute 			("com.ibm.wps.composition.element");
		currentLayoutNodeStr=identification.serialize(currLayoutNode.getObjectID());
	}
                                    	
%>
<dnd:drag namespace="wp" type="portlet_windowID" value="<%=currentLayoutNodeStr%>" 
includeDragHandle="false" validator="com.ibm.wps.dnd.impl.DNDDragPortletValidator">

	.......   BEGIN SKIN MARKUP .......
	.......   BEGIN TITLE BAR .......

	<dnd:dragHandle>TITLE BAR CONTENT</dnd:dragHandle>TITLEBAR BUTTONS

	.......   END TITLE BAR   .......
	.......   PORTLET RENDER .......
	.......   END SKIN MARKUP .......
</dnd:drag>

  3. Copy UnlayeredContainer-H.jsp and UnlayeredContainer-V.jsp from the WebSphere Portal Express Version 6.0 default skin into your skin's directory. If you have customized either of these files, you will want to merge the code/markup from custom versions of these files into the default skin version of these files.

 

Correcting the Search Scope drop-down list display in migrated themes

WebSphere Portal Express Version 6.0 adds a new icon to the left of the Search box in portal themes. By clicking on this icon, you are provided with a drop-down list of options for searching, including different scopes for the search, search preferences, and search help.

When migrating pre-Version 6.0 themes to your WebSphere Portal Express Version 6.0 installation, you may notice that this new drop-down list has a transparent background and is difficult to read.

To correct this problem in migrated themes, add the following code to one of your theme's CSS files after migrating the theme. This code can be added to any CSS that is displayed with the theme. 

.main-menu-item, .main-menu-item-selected {
 background-color: #FFFFFF;
}

By adding this code, your theme will have a plain white background and be easier to read. You can also customize the code to suit the color scheme of your theme.

 

WebSphere Portal Version 6.0 functionality in migrated themes

WebSphere Portal Express Version 6.0 adds new functionality in its theme, including portlet and people palettes and context menus. These functions are not available in a migrated WebSphere Portal Express Version 5.x theme unless the corresponding code is copied from the WebSphere Portal Express Version 6.0 theme. This requires you to develop a theme that identifies, copies, and tests the function you want to add to the WebSphere Portal Express Version 5.x theme.

You must update the themes from the previous version to the current version. See Designing for information about customizing the pages to conform to the appearance and requirements of your organization Web site, including adding, removing, or changing text, colors, images, links, borders, and even the layout of the page. Also, see Changes to portal JSPs for a detailed list of engine tags required for migration.

 

Known theme migration issues

 

Default theme

WebSphere Portal Express Version 6.0 pages that are shipped with the product are assigned to use the default theme. This is done to make it easy to rebrand the WebSphere Portal Express by assigning a new theme to be the default theme. The exceptions are the Administration pages which are explicitly assigned the default "IBM" theme. This is done to keep the Administration pages from not working correctly if a non-functional theme is inadvertently applied to be the default theme.

This issue also occurs in migrating themes to WebSphere Portal Express Version 6.0. During migration, the default theme assignment is carried forward to the WebSphere Portal Express Version 6.0 installation. This applies the default theme from the prior WebSphere Portal Express release to the WebSphere Portal Express Version 6.0 pages that are shipped with the product.

If you experience problems with the pages that are shipped with the new product after migrating, assign the IBM theme to the page. If the page functions correctly with the IBM theme and not the migrated theme, there may be functional incompatibilities between the markup in the migrated theme and the content of the portlets.

It may also be that the portlets on these pages may be dependent on new functionality in WebSphere Portal Express Version 6.0 that did not exist in the prior version. If this is the case, files from the IBM theme may need to be copied into the migrated theme. Refer to the portal logs for any files that may be missing.

 

Themes with a left navigation menu in previous versions

In previous versions of WebSphere Portal if you created themes with a left navigation menu (like the leftNav Administrative theme in Version 5.1.x), these themes will not work in the current version. You must change the value of navigation.expansion.defaultstate to true in order for the theme to function correctly.

Themes developed in this way do not have the '+' signs next to the page to expand the node. If you do not set navigation.expansion.defaultstate to true, you will not be able to see the children nodes of that page.

 

Parent topic:

Migrating

 

Previous topic

Migrating additional components

 

Next topic

Verifying the migration tasks