+

Search Tips   |   Advanced Search

Theme templates (theme.html)


Overview

The static theme template is named theme.html, and is in the root directory of the theme on WebDAV...

    \fs-type1\themes\theme-name\

Other theme.html files can be found in...

    \fs-type1\themes\theme-name\nls\

We do not need to modify the theme.html file in the themes\<yourTheme> folder. It is only used to redirect to the appropriate locale file in the nls folder, for example, theme_en.html. Modify it only when we add or remove locales. The folder nls contains a theme.html file without an associated locale. This file is not used. We can ignore it.

Alternatively, when static resources are deployed together with dynamic resources, the theme.html file is not in WebDAV. Rather, it is packaged as part of the theme EAR file.

The theme.html includes the full HTML structure of the page including sections...

  • <html>
  • <head>
  • <body>

theme.html can include both static and dynamic content.

Modify the theme template files using the WebDAV entry point fs-type1 to have changes immediately reflected upon a browser refresh.


Root theme template

In a default WebSphere Portal installation, the portal does not render the template file theme.html in the root directory of the theme. Instead, the theme.html file links to the templates, and the portal renders the appropriate template. The links to the templates are in the <head> section of the root template...

    <link rel="alternate" href="nls/theme_locale_code.html" hreflang="locale_code">

An example of a link to the English template file...

    <link rel="alternate" href="nls/theme_en.html" hreflang="en">

To use different theme templates, remove these links from theme.html in the root directory. If we do this, the portal renders this root template.

This theme template also includes Apache Ant scripting...

      ${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 using either..

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

Use the Apache Ant build framework to generate templates based on this root template. This can be useful for updating one template during development, and then generate the templates using the Ant build process. To use only the root template, replace the Ant scripting with the preferred text to be rendered.


Theme templates

In a default WebSphere Portal installation, the theme architecture renders content using the theme templates. These templates are in the nls subdirectory under the theme directory on WebDAV. These files have the locale code that is appended to the end of the template name, for example theme_en.html for English. These templates translate static text inline within the template.

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


Add static content to the theme.html

We can add static content to the theme.html in the following ways:

    Add content directly:

    Add static content, such as HTML markup and images directly to the file theme.html.

    Add content from WebDAV:

    Add content in WebDAV relative to the theme.html file with a relative URL reference.

    Add content by relative URLs:

    Reference static content in the folder...

      /common-resources/

    ...in the WebDAV file store. If the relative path does not successfully resolve to a file within the theme folder, the portal uses the folder /common-resources/ as a fallback location to locate the resource. This way the theme can reference common resources and still preserve the ability to override a file in that folder with a resource of the same name in the theme folder.


Add server-side dynamic content to the theme.html

Dynamic content changes per user, or per page, or per some other server state. Therefore, we cannot define it statically in the theme file. Instead, you insert it into the response at run time. To do this, we edit theme.html and identify these dynamic content spots. Then at run time, a server-side theme parser identifies and resolves dynamic content spots, and streams their output into the final response to the browser.

The format of a dynamic content spot...

    <a rel="dynamic-content" href="{path to dynamiccontent}"></a>

...where...

      rel="dynamic-content"

      Identies content type for theme template parser, which resolves the href attribute, and inserts its output into the response.

      href

      The href can point to any URI resolved by the resource addressability framework.

Examples:

  1. Render the referenced layout template and content of the current page:

      <a rel="dynamic-content" href="lm:template"></a>

  2. Include a dynamic content spot from the mapping specified through the module dyn-cs contribution type, in the WP_DynamicContentSpotMappings Resource Environment Provider or theme metadata.

      <a rel="dynamic-content" href="dyn-cs:customSpot"></a>

  3. Include the output of a theme JSP with a resolver POC URL:

      <a rel="dynamic-content" href="res:/customContext/themes/html/myTheme/customSpot.jsp"></a>


Change the theme template location

We can change the location of the theme template. For this purpose, the theme contains a metadata parameter that stores the location of the theme template theme.html. The parameter name is...

If required, we can point it to an external location. For example, we can specify a POC URI or the URL to an external server. We do not need to store the theme template on WebDAV. In a default portal installation, the metadata parameter for the theme is as follows:

    <parameter name="com.ibm.portal.theme.template.ref" type="string" update="set">     <![CDATA[dav:fs-type1/themes/theme_folder/]]> </parameter>


See


Parent Customize the theme