Create your own skin

Defining your own skins involves creating a subdirectory using the skin name in the was_root/installedApps/ hostname/wps.ear/wps.war/skins/markup/ directory and creating 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, was_root/installedApps/ hostname/wps.ear/wps.war/skins/markup/MySkin.

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

    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. See Skins for more detailed information about the JSPs that are used.

    images

    These are images that are used to create the portlet title bar or background images. For example, title_help.gif is used to render the icon that opens the portlet help mode. You can modify these images or create your own and add them to the JSPs.

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

  4. Use the Appearance portlet to test and make changes to the new skins as you are working on them. See Manage pages, layout, and content for more information.

  5. 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 was_root/installedApps/ hostname/wps.ear/wps.war/skins/html/skin_name. In this example, the file and location are: was_root/installedApps/hostname/wps.ear/wps.war/skins/html/MySkin/preview.gif .

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

Note: Some skins can be configured to compile faster than other skins, including any customized skins. See Use fast skins for more information.

When you have finished developing and testing the custom theme, it is ready to be deployed to a production portal server. See Deploying customized themes and skins for more information.

See also