Theme templates (theme.html)
You can use static HTML to write portal themes. The static theme template is named theme.html.
- The folder nls contains a file that is named theme.html without a locale that is associated with it. This file is not used. You can ignore it.
- Remember to modify the theme template files by using the WebDAV entry point fs-type1. When you use this entry point, your changes to the theme template are immediately reflected upon a browser refresh.
Root theme template
<link rel="alternate" href="nls/theme_locale_code.html" hreflang="locale_code">
An
example of a link to the English template file is as follows:
<link rel="alternate" href="nls/theme_en.html" hreflang="en">
If you do not want to use theme templates, you can remove these links from the theme.html template in the root directory. If you do this, the portal renders this root template.
${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. You can chain multiple
instances of encoding as follows:
${bundle:key:json:xml} or ${bundle:key:xml:json}
You
can use the Apache Ant build framework to generate templates that are based on this root template.
This can be useful if you want to update one template during development and then generate the
templates by using the Ant build process. If you want to use only the root template, replace the Ant
scripting with the preferred text that you want to be rendered. You can learn more about the Ant
build tool at Apache
Ant.Theme templates
In a default WebSphere Portal installation, the theme architecture renders content by 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 you use the theme templates and want to view your changes, update the template that the portal renders in the browser. For example, if your preferred language is English, update the file theme_en.html.
Adding static content to the theme.html
- Adding content directly:
- You can add static content, such as HTML markup and images directly to the file theme.html.
- Adding content from WebDAV:
- You can add content that is in WebDAV relative to the theme.html file with a relative URL reference.
- Adding content by relative URLs:
- You can use relative URLs to reference static content in the /common-resources/ folder 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.
Adding server-side dynamic content to the theme.html
Dynamic content changes per user, or per page, or per some other server state. Therefore, you cannot define it statically in the theme file. Instead, you insert it into the response at run time. To do this, you edit the 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.
<a rel="dynamic-content" href="{path to dynamiccontent}"></a>
- rel="dynamic-content"
- The theme template parser recognizes the element rel="dynamic-content". It resolves the href attribute and inserts its output into the response.
- href
- The href can point to any URI that is resolved by the resource addressability framework.
- The following example is a special content spot that renders the referenced layout template and
content of the current
page:
<a rel="dynamic-content" href="lm:template"></a>
- The following example includes a dynamic content spot from the mapping that is 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>
- The following example includes the output of a theme JSP with a resolver POC URL:
<a rel="dynamic-content" href="res:/customContext/themes/html/customTheme/customSpot.jsp"></a>
Changing the theme template location
<parameter name="com.ibm.portal.theme.template.ref" type="string" update="set">
<![CDATA[dav:fs-type1/themes/theme_folder/]]>
</parameter>