+

Search Tips   |   Advanced Search


Create a new skin

Skins are a set of JSPs, images, and style sheets packaged as a WAR file. As deployable units, they have to follow a certain file layout which is determined by the appserver and the portal server. Learn about creating your own HTML-based skins using existing skins.

If you have created themes or skins for an earlier release of WebSphere Portal, you will be able to easily migrate most of that work because the file layout and the lookup mechanisms to locate resources are still the same. However, the lookup only works within the same deployable unit, so resources can only be shared between skins that reside in the same WAR file.

Defining your own skins involves creating the directory structure for the artifacts of the skins. Typically, these reside in a subdirectory using the theme name, although that is not necessary as long as the WAR file will only contain only one skin.

The following steps describe one way to create your own HTML-based skin using an existing skin.

  1. Create a new directory path using the predefined root skins, the name of the markup, and the name of the new skin,, for example:skins/html/MySkin To avoid problems with the directory name, do not use DBCS characters.

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

    For the portlet context menus then the portletContextMenu.jsp file from /themes/html/Portal should also be copied into the themes/html/your_theme directory for any themes you wish your skin to work with.

  3. Make updates to the following files according to the requirements of the portal site.

    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. You can modify these images or create your own and add them to the JSPs.

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

  5. Next to the skins directory, create a WEB-INF directory.

  6. In this directory, create the file web.xml with the following content: 

       <?xml version="1.0" encoding="UTF-8"?>
   <web-app xmlns="http://java.sun.com/xml/ns/j2ee" 
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  id="MySkin" 
            version="2.4" 
            xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
                                http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
      <display-name>MySkin</display-name>
   </web-app>

  7. Create the subdirectory WEB-INF/tld.

  8. Copy all tld files to WEB-INF/tld.

  9. Wrap your new skin as MySkin.war using any ZIP compression tool.

  10. To install this new skin in WAS:

    1. Open the appserver admin console.

    2. Under Applications > Install New Application select Install and proceed through the wizard to deploy the WAR file that you just created. Note the context root that the WAR file is deployed under because it will be required later.

    3. Make sure the newly deployed web application is started.

  11. To make the new skin available in WebSphere Portal:

    1. Use the Themes and Skins portlet under Administration > Portal User Interface.

      It is only possible to make the context root of a skin known through the XML configuration interface. There is a new context-root attribute on the skin element that is used for this purpose.

  12. Use the Appearance portlet to test and make changes to the new skins as you are working on them.

  13. 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 skins/markup_type/skin_name In this example, the file and location is: skins/html/MySkin/preview.gif.

If the Portal theme directory is either deleted or renamed, the portal resource loader uses the themes/html/Default.jsp.

In this case, you should also use the fallback skin. To do this, rename the skins directory. For example, the skins/html/IBM directory should be renamed skins/html/IBM1. If you have a broken theme, you can rename the theme and skin directories which are causing the problem to get to a working minimal theme.

Improving the performance of skins

WebSphere Portal includes a lightweight skin that demonstrates some of the design features that you could omit for better performance. For information about these features, see the Performance guidelines for themes and skins topic.


Parent topic:

Customize the portal


Related concepts


Portal style classes
Work with portal navigation
Use JSTL tags in the portal JSPs
User and group management


Related tasks


Creating a new theme
Import a theme
Deploy the theme
Enable automatic JSP reloading
Supporting new clients
Supporting new markup languages
Changing banner text


Related reference


Use the color palette in themes
Performance guidelines for themes and skins


Related information


Changing the page help