Create your own theme

 

+
Search Tips   |   Advanced Search

Overview

Defining your own theme involves creating a subdirectory using the theme name in...

/qibm/UserData/WebAS5/Base/WAS5Portal/installedApps/AM400_WAS5Portal/wps.ear/wps.war/themes/html

...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. The following steps provide one way of creating your own HTML-based theme using an existing theme.

  1. Create a new directory using the new theme 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.

    cd MyTheme
    cp -r ../Science/* .

    JSPs

    Default.jsp is the main JSP file, from which all other JSP files are called.

    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. HelpStyles.css is used for portlet helps. You can change the style definitions. 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...

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

  3. Verify that files and directories in the cloned theme have the same permissions as the files in the source theme.

    ls -l SrcTheme
    ls -l MyTheme

    If not, set ownership of all files and directories in the cloned theme. For example...

    cd MyTheme
    pwd
    find . -name \* -exec chown QEJBSVR {} \;

  4. To add the theme, use the Themes and Skins portlet under Administration, Portal User Interface. The theme name that you add must be the same as the subdirectory name that you used for the theme.

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

    Be sure to create a test page with test pages for the new theme. Setting the default page to a theme with errors can cause problems accessing the portal site. See Recovering from a faulty theme if you need to recover from an error.

  6. If you have problems deploying the theme, try cycling the server off, to troubleshoot, try removing files under...

    /qibm/UserData/WebAS5/Base/WAS5Portal/temp/Server/WAS5Portal/wps/wps.war/themes/html/MyTheme

    ...and then cycling the Portal back on again.

  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

      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

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

 

Troubleshooting theme errors

 

Recovering from a faulty theme

If the portal is configured to use a theme that contains errors, the affected portal pages might not display or might display incorrectly. To avoid this problem, be sure to test and debug a theme before it is used on the portal. If a faulty theme is installed, perform the following procedure to remove it from the system:

  1. Stop WebSphere Portal.

  2. Delete the subdirectory for the faulty theme. The root directory for themes is was_root/installedApps/ hostname/wps.ear/wps.war/themes/. The themes folder contains a subdirectory for each markup type. The faulty theme would be in a folder below one of the markup-type subdirectories.

  3. Start WebSphere Portal.

  4. Log in to the portal as administrator.

  5. Click Administration.

  6. Click Portal User Interface.

  7. Click Themes and Skins.

  8. Delete the faulty theme.

 

Administrative portlets fail on pages that use customized themes

Problem:
When one of the administrative portlets is placed on a page with a customized theme, or a customized theme has been applied to the portal administrative pages, the portlet could fail with a null pointer exception written to the log file. This problem can also occur if the portlet is launched in a new window that uses the customized theme.

Cause:
The administrative portlet requires certain request parameters for processing. These parameters are made available to the portlet using the <wps:adminNavHelper/> tag.

Solution:

  1. Add the <wps:adminNavHelper/> tag in the Default.jsp and the Plain.jsp for the customized theme. This tag should be placed towards the top, just after the taglib directive for the portal tag library (engine.tld). For an example of this tag, examine the Default.jsp for the Admin theme.

  2. Create a file in the directory for the new theme with the name AdminTheme.flag. You can leave the contents empty. This file indicates to the portal that this theme is an administration theme and can be used only on administration pages.

See also