+

Search Tips   |   Advanced Search

Skin templates

The static skin template skin.html is located in the root directory of the skin folder of the WebDAV file store. The skin.html file provides the full markup for decoration around a portlet or iWidget. As with theme templates, use dynamic content spots to add dynamic elements to the skin template at run time. The portal provides a base skin template and localized skin templates.

The skin.html file is located in the root directory of the skin on WebDAV...

    \fs-type1\skins\skin-name\

...and there are localized skin.html files located within the nls directory under the skin...

    \fs-type1\skins\skin-name\nls\

Modify the skin template files using the WebDAV entry point fs-type1. When we use this entry point, the changes to the skin template are immediately reflected with a browser refresh.


Root skin template

In a default WebSphere Portal installation, the portal does not render the template file skin.html located in the root directory of the theme. Instead, this file links to the localized templates, and the portal renders the appropriate localized template. The links to the localized templates are at the beginning of the root template. They have the following form: 

    <a rel="alternate"     
   href="nls/skin_locale_code.html"     
   hreflang="locale_code"     
   class="wpthemeDisplayNone">
</a>

An example of a link to the English template file is as follows: 

    <a rel="alternate"     
   href="nls/skin_en.html"     
   hreflang="en"     
   class="wpthemeDisplayNone">
</a>

We can place the wpthemeDisplayNone class on these links so the browser does not expose the anchor element in the user interface. This class makes sure that accessible technologies, such as screen readers, do not encounter these links in the tab order.

If we do not want to use localized skin templates, we can remove these links from the beginning section of the skin.html template in the root directory. If we remove the links, the portal renders the root template.

The root skin template also includes Apache Ant scripting in the following form:

    ${bundle_name:bundle_key:character_encoding}

The character_encoding replaces special characters with the escape sequence determined by the specified encoding. The available types of encoding are XML or JSON. We can chain multiple instances of encoding by or as follows:

    ${bundle:key:json:xml} or ${bundle:key:xml:json}

Use the Apache Ant build framework to generate localized templates based on this root template. This framework can be useful to update one template during development and then generate the templates. To use only the root template, replace the Ant scripting with the preferred text to be rendered. We can learn more about the Ant build tool at the Apache Ant Welcome page.


Localized skin templates

In a default portal installation, the theme renders content using the localized skin templates. These templates are located in the nls subdirectory under the skin directory on WebDAV. These files have the locale code appended to the end of the template name, for example skin_en.html for English. These templates have translated static text inline within the template.

When we use the localized skin templates and want to view the changes, update the template the portal renders in the browser. For example, if the preferred language is English, update the fileskin_en.html file.


Server-side dynamic content spots

    <a rel="dynamic-content" href="lm:title">
    This inserts the portlet title into the skin.

    <a rel="dynamic-content" href="lm:control">
    This renders the content of the portlet.


Client-side dynamic content spots

Client-side content spots are replaced at page load time or at run time through JavaScript by RuntimeSkinModel and the live text service.

    class='lm-dynamic-icon'

    By default, the skins do not contain the lm-dynamic-icon spot. If we want support for a dynamic icon, add an image tag to the titlebar markup in the skin HTML template.

    For Example:

      <img class="lm-dynamic-icon" src=""/>

    This provides a client-side way for changing the icon for the portlet or iWidget in the skin dynamically. For example, we can add the following code sample to set the icon dynamically. The second parameter sent into the setDynamicContent function is a URL that is the src of the icon <img> element.

      var skinNode = com.ibm.mashups.enabler.runtime.skin.Factory.getRuntimeSkinModel().find("somePortletID"); skinNode.setDynamicContent(com.ibm.mashups.enabler.runtime.skin.Constants.DYNAMIC_CONTENT_ICON, "http://www.mysite.com/icon.gif");

    The somePortletID function fetched from the runtime skin model is a string ID of the layout node for which the title or icon is changed. The profile used on the page must include Enabler in view mode as it is required to fetch the skin node and set the dynamic content.

    Enabler has been deprecated.

    class='lm-dynamic-title'

    This content spot changes the title of the skin dynamically at run time. For example, to set the title, the second parameter is a string inserted as the new title.

      skinNode.setDynamicContent(skinConstants.DYNAMIC_CONTENT_TITLE, "My new title")

    Where:

    • var controlId: the string ID of the layout node for which the title or icon is changed.

    • var runtimeSkinModel: com.ibm.mashups.enabler.runtime.skin.Factory.getRuntimeSkinModel().

    • var skinNode: runtimeSkinModel.find(controlId).

    • var skinConstants: com.ibm.mashups.enabler.runtime.skin.Constants.


Parent Skins


Related information


Apache Ant Welcome page