4.3 Adding a new portlet skin

 < Day Day Up > 

4.3 Adding a new portlet skin

You can create a new skin with the existing installed skins. What we discuss here is creating a new skin, and then using that skin as the default skin in a new theme that we will also create. Because it is easier to copy an existing theme with its skin and modify it, rather than creating a new skin and theme from scratch, this is what we performed and is the recommended practice.

Skins and themes exist for the three markup languages that WebSphere Portal supports - HTML, cHTML, and WML. The examples here only talk about creating a new skin and theme for HTML.


If you plan to use other markup languages in the portal, remember to add the new theme/skin under sub-directories /WML and /cHTML also.

4.3.1 Create the new skin directory

All skins are found in sub-directories under <WAS_HOME>/apps/WSPORT/WPS Enterprise Application/wps.war/skins directory. Because we want to create a new skin for HTML, go the HTML sub-directory.

  1. The skin will be called Itso. So we first create a directory named Itso under:

     <WAS_HOME>/apps/WSPORT/WPS Enterprise Application/wps.war/skins/HTML 

    The directory name is case-sensitive.

  2. Copy the contents of the wave skin directory into the newly created Itso directory.

  3. There is a Control.jsp with a reference to wave.jpg. Modify that to read itso.jpg. Save the file.

  4. In the directory, you will find two files - wave.jpg and wavepreview.gif. Rename them to itso.jpg and itsopreview.gif.

  5. Use a graphics editor to modify itso.jpg the way you want the new skin to look. Do the same with itsopreview.gif. Save the files.


After creating the new skins directory, and copying files, ensure that the HFS owner, group, and file permissions are updated to be the same as the existing skins directory and files.

4.3.2 Add the skin to WebSphere Portal

Use these steps to add the skin to WebSphere Portal.

  1. Make sure you are logged in as the portal administrator. Under Portal Administration, navigate to Portal Settings->Themes and Skins.

  2. Click to Add new skin. See Figure 4-7 on page 131.

    click to expand
    Figure 4-7: Themes and Skins window

  3. Enter Itso for the Skin name.

  4. Enter Itso for the Skin directory name. This name should match the directory name exactly as it was created in the earlier step. See Figure 4-8 on page 132.

    click to expand
    Figure 4-8: Window to Add a new skin

  5. When you click OK, the new skin will be registered in WebSphere Portal and will show up at the bottom of the Skins list as seen in Figure 4-9 on page 133.

    click to expand
    Figure 4-9: Window showing the addition of the new Itso skin

  6. You can now use this new skin within existing themes by adding this skin to the list of skins that the theme already uses.

 < Day Day Up > 

Websphere Portal on Z. OS
Websphere Portal on Z/OS
ISBN: 0738499382
EAN: 2147483647
Year: 2003
Pages: 90

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net