+

Search Tips   |   Advanced Search

Configure themes


  1. Change theme metadata

    1. Connect the WebDAV client to...

        http://localhost:10039/wps/mycontenthandler/dav/themelist/

    2. From the folder for the theme, copy the metadata.properties file to local drive.

    3. Edit the local copy of the file and modify the property values as needed according to the following table.

    4. Copy the local copy of the metadata.properties file back into the folder for the theme in themelist.

    Property Default Description
    com.ibm.portal.layout.template.href dav/:fs-type1/themes/Portal8.0/layout-templates/2ColumnEqual/ Set to layout template used by default on pages in the theme. After initially creating the theme by cloning the IBM WebSphere Portal 8.0 theme, replace Portal8.0 in the path with the name of the folder for the theme.
    resourceaggregation.profile profiles/profile_deferred.json Path to .json file containing list of modules. Path is relative to the folder for the theme in fs-type1.
    com.ibm.portal.theme.template.ref dav/:fs-type1/themes/Portal8.0/ Folder where the custom theme's templates are located. Replace Portal8.0 with the name of the custom theme folder.
    com.ibm.portal.theme.aggregationmodes ssa Comma separated list of the page modes the theme supports. The Portal8.0 theme supports SSA only. The other possible mode, CSA, supported by Page Builder themes migrated from WebSphere Portal 7.0

    See also: Drag-and-drop configuration


  2. Change resource environment provider custom properties

    The second order of theme configuration is through resource environment provider (REP) custom properties in the WP GlobalThemeConfig REP. Changes to the REP custom properties apply across all themes, and the values, therefore, cannot vary from theme to theme.

    The REP custom properties are located in the WAS admin console.

    1. Access the WAS admin console and go to...

    2. To view and edit the custom properties for this resource environment provider, click the Custom properties link.

    3. Modify the property values as needed according to the following table. For each property to modify:

      1. Click the property name link.
      2. Modify the value in the Value field.
      3. Click OK.

    4. Save and persist the changes to the master configuration.

    5. Restart the portal server.

    The following are the resource environment provider properties and values.

      behaviors.addcontent.contentRenderers

      Modify existing entries or add new entries to say which portlets are used to render various content types. Default value:

        {feed:'pm:oid:wps.p.Feedspace',wcm:'pm:oid:ibm.portal.Web.Content.Viewer.Jsr286'}

      behaviors.layout.defaultLayout

      Which layout template is used by default on pages. Default...

        dav:fs-type1/layout-templates/2ColumnEqual/

    user.displaynameattribute

    Set if the identity manager user hierarchy uses a different attribute for the user's full display name. Default value: cn

    resources.theme.loadingImage

    Path to the loading image relative to the theme base URI. Default value:

      css/images/loading.gif


  3. Add resource environment provider properties

    Resource environment provider (REP) custom properties are global in scope, but we can use a consistent naming convention for a theme or module that applies across multiple themes.

    For properties used only by a single theme, prefix with myTheme. For those properties used only by a single module, prefix with MyModule. Modules do not belong to any particular theme and can be used by any theme. It is a good practice to put the modules in one web app and each theme in its own separate web app.

    Replace occurrences in italics with the actual names of the items.

    1. Access the WAS admin console and go to...

        Resources | Resource Environment | Resource Environment Providers | Node=MyNode, Server=WebSphere_Portal | New

    2. Enter YourPrefix ThemesConfig in the Name field.

    3. Click OK.

    4. Find the REP in the table and click YourPrefix ThemesConfig.

    5. Click Custom properties.

    6. Create a global and a theme property.

      1. Click New.

      2. Enter modules.contextRoot in the Name field.

        Because it is global in scope, it does not use any particular prefix.

      3. Enter the context root of the web application containing the modules in the Value field, such as...

          /myprefix/modules

      4. Click...

          OK | New

      5. Enter myTheme.contextRoot in the Name field. Because it is scoped to the theme, it uses the myTheme. prefix.

      6. Enter the context root of the web application containing the theme in the Value field, such as /myprefix/yourtheme.

      7. Click OK.

    7. Optional: Create example properties that add REP properties for the theme or module:

      1. Click New.

      2. Enter myTheme.myRepProperty in the Name field. Because it is scoped to the theme, use the myTheme. prefix.

      3. Enter yourvalue in the Value field.

      4. Click...

          OK | New

      5. Enter MyModule.myRepProperty in the Name field.

        Because it is scoped to the module, use the MyModule. prefix.

      6. Enter yourvalue in the Value field.

      7. Click OK.

    8. Save and persist the changes to the master configuration.

    9. Restart the portal server.


  4. Use the configuration properties

    Create a JavaScript object for the theme on the client side. Theme metadata properties must be loaded dynamically. If we must load a property tatically use a resource environment provider custom property instead.

    Configuration properties can be loaded either statically...

      type="config_static"

    ...or dynamically...

      type="config_dynamic"

    We can use one or the other or both depending on the needs. Static is intended for property values that do not commonly change after they are loaded initially, and is better for performance because the values are cached. Dynamic is intended for property values that change more frequently.

    In this way, all configuration properties that the module must reference on the client side, be they theme metadata properties or resource environment provider custom properties, get merged together into a single convenient global config object. We can then easily reference any property within the mycoCfg.themesConfig object, such as...

      mycoCfg.themesConfig.myTheme_myRepProperty

    The theme and the modules provided with WebSphere Portal merge their configuration properties into the ibmCfg global variable. We can execute this variable in a browser console and inspect what the property names and values are. Because changes to values in the WP GlobalThemeConfig REP are global to all themes, we can override certain values on the client side if we need the values to be different in only the themes that include the module. We can do so with syntax such as the following in one of the config*.jsp files for the module:

    i$.merge({<%--
      --%>ibmCfg: {<%--
      --%>themeConfig: {<%--
      --%>loadingImage: "css/images/yourloading.gif"<%--
      --%>}}});
    

    If the module requires the wp_portal module then the portal configuration loads before the configuration for your module, ensuring that the override is merged in last.

    Replace occurrences of your* in italics with the actual names of the items.

    1. Create an extension point (module definition) in the plugin.xml file for the theme with subcontributions for the configuration of the module.
      <extension point="com.ibm.portal.resourceaggregator.module" id="myprefix_mymodule_config">
       <module id="myprefix_mymodule">
        <prereq id="wp_portal"/>
      
        <contribution type="config">
      
         <sub-contribution type="config_static">
          <uri value="res:{rep=YourPrefix ThemesConfig;key=modules.contextRoot}/mymodule/markup/config_global.jsp" /> 
         </sub-contribution>
      
         <sub-contribution type="config_dynamic">
          <uri value="res:{rep=YourPrefix ThemesConfig;key=modules.contextRoot}/mymodule/markup/config.jsp" /> 
         </sub-contribution>
      
        </contribution>
      
       </module> 
      </extension>
      

    2. Add the moduleID to the profile file for the theme so that the module loads.

      1. Connect the WebDAV client to...

          http://localhost:10039/wps/mycontenthandler/dav/fs-type1/

      2. From the profiles folder within the folder for your theme, copy the profile_full.json file to a local drive.

      3. Modify the local copy of the file and add the moduleID at the end of the list:

          , "myprefix_mymodule"

      4. Copy the local copy of the profile_full.json file into the profiles folder in the folder for the theme in fs-type1.

    3. Create the config_global.jsp file, config.jsp file, or both in the modules web application in the folder...

        \mymodule\markup

      The following example of config.jsp file loads dynamically.

      <%@ page session="false" contentType="text/javascript;charset=ISO-8859-1" buffer="none" %>
      
      <%@ page trimDirectiveWhitespaces="true" %>
      
      <%@ taglib uri="http://www.ibm.com/xmlns/prod/websphere/portal/v8.0/portal-fmt" prefix="portal-fmt" %>
      i$.merge({<%--
          --%>mycoCfg: {<%--
           --%>themesConfig: {<%--
            --%>modules_contextRoot: "<portal-fmt:out escape="json">${wp.rep["REP.YourPrefix ThemesConfig"]["modules.contextRoot"]}</portal-fmt:out>",<%--
            --%>myTheme_contextRoot: "<portal-fmt:out escape="json">${wp.rep["REP.YourPrefix ThemesConfig"]["myTheme.contextRoot"]}</portal-fmt:out>",<%--
            --%>myTheme_myRepProperty: "<portal-fmt:out escape="json">${wp.rep["REP.YourPrefix ThemesConfig"]["myTheme.myRepProperty"]}</portal-fmt:out>",<%--
            --%>myTheme_myMetadataProperty: "<portal-fmt:out escape="json">${wp.themeConfig["myTheme.myMetadataProperty"]}</portal-fmt:out>"<%--
            --%>MyModule_myRepProperty: "<portal-fmt:out escape="json">${wp.rep["REP.YourPrefix ThemesConfig"]["MyModule.myRepProperty"]}</portal-fmt:out>",<%--
      --%>}}});
      
      A config_global.jsp file (static) would look similar, only without any theme metadata properties in it.

      If the mycoCfg global variable and themesConfig child property do not exist, the merge automatically creates them. We can also mix in your properties with any other properties that might already be present if the mycoCfg object exists.

    4. If we have JSP reloading turned on in the web applications, then restart the web application for the modules and the web application for the theme. Otherwise, restart the portal server.