Create themes

 

+
Search Tips   |   Advanced Search

 

To create a new theme...

  1. Enable automatic JSP reloading (Optional)

  2. Create the following directory...

      was_profile_root/installedApps/cellname/wps.ear/wps.war/themes/html/mynewtheme

    Avoid using DBCS characters in the directory name.

  3. Copy all of the files and subdirectories from another theme directory into the new directory...

    cd was_profile_root/installedApps/cellname/wps.ear/wps.war/themes/html/IBM
    cp -r * ../mynewtheme

  4. Make updates to the following files according to the requirements of the portal site.

    JSPs

    Default.jsp and included JSPs provide the appearance and layout and determine where the screen element goes.

    images

    Used for icons and tools within the theme pages.

    Style sheets

    Style sheets are JSPs. The tag...

    <portal-theme:cacheProxyUrl/>

    ...is used to make sure the output of CSS JSPs is cacheable.

    For security reasons, the cache proxy servlet will only serve URLs pointing to resources located in the themes, skins, and screens directories. This makes all resources underneath these directories public.

    URLs containing the ".." characters will not be served.

    Style sheets reside in...

    was_profile_root/installedApps/cellname/wps.ear/wps.war/themes/html/mynewtheme/css

    The main style sheet is styles.jsp which contains only statically included JSP fragments (JSPFs).

    The easiest way to add your own styles is to create your own JSP fragment file and add it to styles.jsp

    We can change the style definitions. However, do not delete any style sheets or remove any style classes.

  5. Go to...

    Administration | Portal User Interface | Themes and Skins

  6. Edit the properties of a test page and set the page to use the new theme that you created.

    Be sure to use a test page for the new theme to work out any problems before setting the default page to the new theme. Setting the portal default to use a theme with errors can cause problems accessing the portal site.

  7. When you are ready to offer the theme for general use, create a preview that users and administrators can see from the page properties.

    1. Create a screen capture of the theme.

    2. Reduce the screen capture to fit in the preview box. Recommended size is 300 x 225 pixels.

    3. Name the image preview.gif. GIF files are limited to 256 colors.

    4. Copy the image to:

      • Windows and UNIX:

        was_profile_root/installedApps/cellname/wps.ear/wps.war/themes/html/theme_name

      • iSeries:

        app_server_root/installedApps/cellname/wps.ear/wps.war/themes/html/theme_name

      In this example, the file and location are:

  8. After the theme is fully developed and tested, update and redeploy the WebSphere Portal EAR file with the new theme.

If the IBM theme directory is either deleted or renamed, the portal resource loader uses the themes/html/Default.jsp. In this case, you should also use the fallback skin. To do this, rename the skins directory. For example, the skins\html\IBM directory should be renamed skins\html\IBM 1. If you have a broken theme, we can rename the theme and skin directories which are causing the problem to get to a working minimal theme.

 

Enabling Organize Favorites functionality in custom themes

The "My Favorites" feature in WebSphere Portal lets you bookmark a page in the portal so that we can return to it at a later time. The page is then added to the "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. In a default installation of WebSphere Portal V6.0, we cannot directly access Organize Favorites functionality. The following tasks, however, can be done to access Organize Favorites functionality in the newly created theme by doing the following:

  1. Use the <portal-navigation:navigation> tag with the scopeUniqueName attribute as wps.p.Favorites to create the links to the Favorites in the theme. This replaces the <portal:favoritesLoop/> tag for enabling Organize Favorites functionality.

  2. Create a URL to Organize Favorites in the theme using the <portal-navigation:urlGeneration tag to wps.OrganizeFavorites.

  3. Create a My Favorite label to store the favorites by doing the following:

  4. Add <portal-logic:if/> tags with the pageBookmarkable attribute set to "true" to pages that you want to be "bookmarkable."

 

Improve the performance of themes

WebSphere Portal includes a lightweight theme that demonstrates some of the design features that you could omit for better performance.

 

Related information

  1. Themes
  2. Troubleshooting portal design
  3. Tags used by the portal JSPs
  4. Customizing the portal
  5. Creating a new skin
  6. Performance guidelines for themes and skins
  7. Supporting new clients
  8. Supporting new markup languages
  9. Portal style classes
  10. Change text information
  11. Change the portal page help
  12. Working with portal navigation
  13. Using JSTL tags in the portal JSPs