Create our own custom skin

We can create skins to customize the portal theme as required. A successful approach to creating custom skins is copying the standard portal skin, ibm.portal.80Standard, then adding images, JavaScript files, and other custom resources. Copying the standard portal skin is the best way to ensure the custom skin contains all the required elements.

Do not modify the standard HCL WebSphere Portal skin directly, because future fix packs and service changes can overwrite the changes.

1. Create a new skin.

   1. Mount the /skinlist WEBDAV entry point with the WebDAV client here: /wps/mycontenthandler/dav/skinlist/ .
      Replace wps with the WpsContextRoot value, if we have changed it.

   2. Copy and rename the folder of the HCL WebSphere Portal skin to use as the base for the custom skin.

      Some WebDAV clients do not let you copy directly within the /skinlist folder. As an alternative, do the following:

      1. Copy the appropriate folder to the local file system.

      2. Give the skin a new title by editing the appropriate localized_locale.properties file under the metadata folder. If we do not change the title, the portal will show multiple skins with the same title in selection lists.

      3. Copy the new folder to the WEBDAV /skinlist folder.

   If we have trouble using the /skinlist/ entry point, try /skinlist/all, as some WebDAV clients have issues listening without the all appended. Your new skin is now defined in the portal database. To customize the skin, edit the skin files in WEBDAV. We can then assign the skin to portlets. To perform administrative customization to the title, description, or metadata of the skin, continue to use the /skinlist/ entry point. To customize the templates and static resources, use the /fs-type1/ entry point.

2. Add static resources to the skin.

   1. Mount the /fs-type1/ WEBDAV entry point with the WebDAV client here: /wps/mycontenthandler/dav/fs-type1/
      Replace wps with the WpsContextRoot value, if we have changed it.

   2. Add images or other static resources to the skin as follows:

      1. Copy the required static resources, such as images or JavaScript files, into the root directory of the skin in WEBDAV.

      2. Organize the files in subdirectories as necessary.

      3. Use server relative or absolute URLs to reference the resources in the skin.html file. For example, if you create a folder named /images containing a file named logo.png, use the following references:

         • Server relative URL:
           <img src="/wps/mycontenthandler/dav/skinlist/myskin/images/logo.png"/>

         • Absolute URL:
           <img src="http://server_name:port/wps/mycontenthandler/dav/skinlist/myskin/images/logo.png"/>

      When creating a file for the skin on the /fs-type1/ entry point, there is a link that exposes this file also through the /skinlist/ entry point. This link makes it possible to use the path defined to the image as skinlist instead of fs-type1 . We can still use an absolute path to the /fs-type1/ entry point if required, for example <img src="http://server_name:port/wps/mycontenthandler/dav/fs-type1/skins/myskin/images/logo.png"/>

Parent Manage themes and skins