Websphere Portal on Z/OS

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

Tip 

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.

Tip 

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.

    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.

    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.

    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 > 

Related

Категории