WebSphere

 

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

 

Create a theme

 

+

Search Tips   |   Advanced Search

 

Defining a theme involves creating a subdirectory using the theme name in the following directory:

You must also create the supporting resources within that directory. HTML is the only markup language that is provided by WebSphere Portal Express that supports more than one theme. The following steps provide one way of creating a HTML-based theme using an existing theme.

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

    • Windows and Linux:

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

    • i5/OS:

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

    To avoid problems with the directory name, do not use DBCS characters. See Troubleshooting portal design for more information.

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

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

    JSPs

    Default.jsp and its included JSPs are used to provide the appearance and layout and determine where the screen element goes. See Themes for more detailed information about the JSPs (and JSPFs) that are used.

    images

    Images are used for icons and tools within the theme pages. You can modify these images or create a and add them to the JSPs.

    Style sheets

    In order to handle the different locales and browsers supported by a theme, the style sheets are actually JSPs. The <portal-theme:cacheProxyUrl/> tag and servlet, which is used to make sure the output of CSS JSPs is cacheable, makes sure that the JSP is aware of the current browser and locale.

    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. Also, any URLs containing the ".." characters will not be served. All style sheets reside in the css directory underneath the /IBM directory. The main style sheet is styles.jsp. Styles.jsp contains only statically included JSP fragments (JSPFs - .jspf file extension). The easiest way to add a styles is to create your own JSP fragment file and add it to styles.jsp You can change the style definitions. However, make sure that you do not delete any style sheets or remove any style classes. See Portal style classes and Tags used by the portal JSPs for more information.

  4. To add the theme, use the Themes and Skins portlet under Administration > Portal User Interface. See Themes and Skins help for more information.

  5. Edit the properties of a test page and set the page to use the new theme that you created. See Managing pages, layout, and content for more information.

    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 Troubleshooting portal design if you need to 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:

      • Windows and Linux:

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

      • i5/OS:

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

      In this example, the file and location are:

      • Windows and Linux:

        was_profile_root/installedApps/cellname/wps.ear/wps.war/themes/html/MyTheme/preview.gif

      • i5/OS:

        app_server_root/installedApps/cellname/wps.ear/wps.war/themes/html/MyTheme/preview.gif

  7. After the theme is fully developed and tested, update and redeploy the WebSphere Portal Express EAR file with the new theme. For more information, see Deploying customized themes and skins.

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/IBM1. If you have a broken theme, you 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 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.

In a default installation of WebSphere Portal Express Version 6.0, you cannot directly access Organize Favorites functionality. The following tasks, however, can be done to access Organize Favorites functionality in your newly created theme by doing the following:

Improving the performance of themes

WebSphere Portal Express includes a lightweight theme that demonstrates some of the design features that you could omit for better performance. For information about these features, see Performance guidelines for themes and skins.

 

Parent topic:

Customizing the portal