Create a new skin

 

+

Search Tips   |   Advanced Search

 

Defining your own skins involves creating a subdirectory using the skin name in the following directory:

  • Windows/UNIX:

    was_profile_root/installedApps/cellname/wps.ear/wps.war/skins/markup_type/

  • iSeries:

    app_server_root/installedApps/cellname/wps.ear/wps.war/skins/markup_type

You must also create the supporting resources within that directory. The following steps describe one way to create your own HTML-based skin using an existing skin.

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

    • Windows/UNIX:

      was_profile_root/installedApps/cellname/wps.ear/wps.war/skins/markup_type/MySkin

    • iSeries:

      app_server_root/installedApps/cellname/wps.ear/wps.war/skins/markup_type/MySkin

    Avoid using DBCS characters in the directory name.

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

    If you are using the portlet context menus then the portletContextMenu.jsp file from /themes/html/IBM should also be copied into the themes/html/your_theme directory for any themes you wish the skin to work with.

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

    JSPs

    Edit Control.jsp to create the title bar and border around individual portlets. The other JSPs, such as UnlayeredContainer-H.jsp and UnlayeredContainer-V.jsp, are used by the portal customization to arrange portlets within the page.

    images

    These are images that are used to create the portlet title bar or background images. We can modify these images or create your own and add them to the JSPs.

  4. To add the skin, use the Themes and Skins portlet under Administration, Portal User Interface. The skin name that you add must be the same as the subdirectory name that you used for the skins. See Themes and Skins help for more information.

  5. Use the Appearance portlet to test and make changes to the new skins as you are working on them.

  6. When you are ready to provide the skin for general use, create a preview that users and administrators can see from the page properties.

    1. Create a screen capture of the skin.

    2. Reduce the screen capture image to fit in the preview box. The recommended size is 307 x 159 pixels.

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

    4. Copy the image to:

      • Windows/UNIX:

        was_profile_root/installedApps/cellname/wps.ear/wps.war/skins/html/skin_name

      • iSeries:

        app_server_root/installedApps/cellname/wps.ear/wps.war/skins/html/skin_name

      In this example, the file and location are:

      • Windows/UNIX:

        was_profile_root/installedApps/cellname/wps.ear/wps.war/skins/html/MySkin/preview.gif

      • iSeries:

        app_server_root/installedApps/cellname/wps.ear/wps.war/skins/html/MySkin/preview.gif

  7. After the skin is fully developed and tested, update and redeploy the WebSphere Portal EAR file with the new skin. 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\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.

 

Improving the performance of skins

WebSphere Portal includes a lightweight skin 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.

 

Related concepts

Customize the portal
Support new markup languages
Portal style classes
Work with portal navigation
Use JSTL tags in the portal JSPs

 

Related tasks

Create your own theme
Support new clients
Change text information

 

Related reference:

Performance guidelines for themes and skins

 

Related information

Skins
Tags used by the portal JSPs
Change the portal page help