|< Day Day Up >|| |
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.
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.
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.
Copy the contents of the wave skin directory into the newly created Itso directory.
There is a Control.jsp with a reference to wave.jpg. Modify that to read itso.jpg. Save the file.
In the directory, you will find two files - wave.jpg and wavepreview.gif. Rename them to itso.jpg and itsopreview.gif.
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.
Use these steps to add the skin to WebSphere Portal.
Make sure you are logged in as the portal administrator. Under Portal Administration, navigate to Portal Settings->Themes and Skins.
Click to Add new skin. See Figure 4-7 on page 131.
Figure 4-7: Themes and Skins window
Enter Itso for the Skin name.
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
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
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 >|| |