Create a custom theme

 

+
Search Tips   |   Advanced Search

 

Overview

Defining a custom theme involves creating a subdirectory using the theme name in...

was_root/installedApps/hostname/wps.ear/wps.war/themes/markup/

...and creating the supporting resources within that directory. HTML is the only markup language that is provided by WebSphere Portal that supports more than one theme.

 

Procedure

  1. Create a new directory using the new theme name, for example,

    was_root/installedApps/hostname/wps.ear/wps.war/themes/html/MyTheme

    Avoid using DBCS characters in the directory name.

  2. Copy all of the files and subdirectories from another theme directory into the new directory. For example, you could copy the files from the /Science theme.

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

    JSPs

    Default.jsp and its included JSPs are used to provide the appearance and layout and determine where the screen elements go. For example, the ToolBarInclude.jsp file contains code for the menu tool bars, which you can comment out or modify.

    Note that if you change a JSP file that is referenced by Default.jsp, you have to touch Default.jsp before the change will be picked up by Portal.

    images

    banner.jpg is the background image that is used by the portal banner. Other images are used for icons and tools within the theme pages. You can modify these images or create your own and add them to the JSPs.

    Style sheets

    Styles.css is the default style sheet that is used by the portal and portlets. HelpStyles.css is used for portlet helps. You can change the style definitions. However, verify you do not delete any style sheets or remove any style classes.

    The themes directory includes a copy of each of the two style sheets for each theme + locale + client combination. This allows aggregation to choose the correct style sheet for each portal user. However, it is difficult to support each combination by trying to manually update these style sheets. To better manage these different style sheets, use the resources in the /themes/BuildCSS directory. There is a sampleBuildCssScript.xml file that demonstrates how to build the different style sheets from a master CSS file and corresponding properties files containing substitution tokens. The files are created by running the script against the Apache Ant tool.

    You can use the ColorPic program to help you choose colors.

  4. To add the theme, use the Themes and Skins portlet.

  5. 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. See Recovering from a faulty theme if recover from an error.

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

      was_root/installedApps/hostname/wps.ear/wps.war/themes/html/theme_name

      In this example, the file and location are:

      was_root/installedApps/hostname/wps.ear/wps.war/themes/html/MyTheme/preview.gif

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

 

Improving the performance of themes

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

 

See also

  1. Themes
  2. Troubleshooting portal design
  3. Tags used by the portal JSPs
  4. Customizing the portal
  5. Create a custom skin
  6. Lightweight themes and skins
  7. Enable automatic JSP reloading
  8. Supporting new clients
  9. Supporting new markup languages
  10. Portal style classes
  11. Change company information
  12. Change the portal page help
  13. Working with portal navigation
  14. Using JSTL tags in the portal JSPs

 

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.