IBM BPM, V8.0.1, All platforms > Customize and rebranding interfaces > Customize Process Portal > Customize Process Portal spaces > Customize themes

Create themes in a Process Portal space

For most of your space customization needs, you do not need to create a new theme. Instead, you can customize your spaces using custom color, images, banners, and so on without having to deal with the complexity of themes. If you do need to create a custom theme, you can customize the default theme to achieve the behavior and appearance that you want.

Before you customize the theme, be aware of the following considerations:

To create a theme...


Procedure

  1. Connect to the WebDAV folder, then navigate to webDAV_folder/public/themes/bspaceTheme
  2. Make a local copy of the bspaceTheme folder and rename it. (These instructions use the folder name customCompanyTheme in the steps and examples.)
  3. Edit the theme.html file to make the necessary modifications.

    1. From the local copy of customCompanyTheme, open the theme.html file in a text editor.
    2. Modify the bspaceTheme division markup to allow your CSS rules to be scoped with the .customCompanyTheme rule. Any existing rules scoped to .bspaceTheme are kept in place.

      The following example shows the original value. 

      <body class="lotusui tundra mashups bspace">
<div class="themeContent">
<div class=bspaceTheme">
      Change the original value, as follows. If you used a name other than customCompanyTheme for the folder, use your folder name instead. 
      <body class="lotusui tundra mashups bspace">
<div class="themeContent">
<div class=customCompanyTheme">
    3. Modify the path of the loading curtain image so that it is relative to your new theme folder.

      In the theme.html file, modify the following markup to point to your custom folder instead of the default bspaceTheme folder: 

      "/mum/mycontenthandler/mm/dav/filestore//public/themes/customCompanyTheme/images/loading32.gif"
    4. Make any other edits that you need (for example, adding markup for new widgets or deleting widgets). For more information on system widgets, including which ones are safe to replace or remove, see the documentation for theme elements.

      For information on how to make allow banner customization within your theme, see Enabling banner customization in a custom theme for Process Portal spaces.

    5. Save and close the theme.html file.
  4. Modify the metadata.properties files to specify the theme name and set the developer mode.

    1. From the local copy of customCompanyTheme, open the metadata.properties file in a text editor.
    2. Modify the following entries in the file:

      • unique-name: Replace the default value with a unique theme name. This name is used by the database to identify the theme for spaces and pages.
      • com.ibm.bspace.theme.uniqueId: Replace the default value with a unique ID.
      • developer-mode: If this entry does not exist, add it. Set the value to true.

    3. Save and close the metadata.properties file.
  5. Modify the localized_en.properties file to specify the theme name that will appear in the Create Space dialog box.

    1. From the local copy of customCompanyTheme/metaData, open the localized_en.properties file in a text editor.
    2. Update the title entry to use the theme name that you want to see when selecting a theme in the Create Space window. In the following example, the name My Company Theme is used. 
      title=My Company Theme
    3. Save and close the localized_en.properties file.
  6. Upload your custom theme folder to the following WebDAV folder:

    http:// hostName: Bspace_Port/mum/mycontenthandler/mm/dav/filestore/public/themes

  7. Restart the server.
  8. Clear the browser cache and then log in to the Process Portal space.

    The custom theme created is now available in the Create Space window.


Results

Although you now have a custom theme to use for your space, the steps in this task did not change the appearance of the theme.

To make significant customizations to the new theme, you will need a firm understanding of HTML, CSS, JavaScript, the iWidget specification, and the Dojo widget library.

Remember that you must upload any additional modifications, and that you need to clear the cache before you log in to the Process Portal space to use the customized artifacts.

Customize themes in a Process Portal space


Related concepts:
Support and compatibility information for Process Portal spaces


Related reference:
Elements in the theme for Process Portal spaces