IBM BPM, V8.0.1, All platforms > Customize and rebranding interfaces > Customize Process Portal > Customize Process Portal spaces > Create and customizing styles > Create styles
Customize styles for Process Portal spaces
After you create a copy of an existing style, you can customize the copy by specifying details such as name, location, and preview image.
You must have a local, renamed copy of an existing style folder and a copy of the corresponding JavaScript file.
The example in this procedure assumes that you copied a WebDAV styles folder named banking and its corresponding JavaScript file locally, and that you renamed your local copy of both the styles folder and the JavaScript file to custom.
Procedure
- Open your local, renamed copy of the JavaScript file that you copied and renamed.
For example, if you copied a style folder called banking, then the corresponding JavaScript file banking.js might look like the following example script.
{ "cp1": "Licensed Materials - Property of IBM", "cp2": "5724-M22, 5724-M23, 5724-M24, 5724-L01, 5724-R31", "id": "banking", "name": "Banking", "preview": "banking/Banking_thumb_202x152.png", "className": "bankingStyle", "css": "banking/bankingStyle.css"}Important: Lines cp1 through cp5 are for copyright information and must not be changed.
- In your local JavaScript file, change the value of the id field to a unique name, such as custom.
- Change the value of the name field to the name that you want users to see in the Create Space and Edit Space dialogs. In this example, the value of the name is custom.
- Change the value of the preview field to the path of the preview image that you want users to see in the Space style selector control. The dimensions of the preview image must be 202 X 152 pixels to match the other preview images. Because the JavaScript file is at the same level in the hierarchy as the folder that you copied and renamed, you must modify the path to reference the correct folder, for example, custom/Custom_thumb_202x152.png.
- Put your preview image in your local custom folder. You can then remove the existing preview image.
- Change the value of the className field. The CSS class name modifies the style of certain interface elements within this style only, and leaves unmodified any spaces that are assigned a different style. By convention, the CSS class name that is associated with a style is the name of the style followed by the word "Style". This example uses customStyle.
- Change the value of the css field to the CSS file name that is to be used to control the appearance for this style. Because the path is relative to the location of the JavaScript file, rename the path to point to your custom folder. Also, the name of the CSS file must match the className variable.
For example, set css to custom/customStyle.css. Your modified JavaScript file should look similar to the following script.
{ "cp1": "Licensed Materials - Property of IBM", "cp2": "5724-M22, 5724-M23, 5724-M24, 5724-L01, 5724-R31", "id": "custom", "name": "Custom", "preview": "custom/Custom_thumb_202x152.png", "className": "customStyle", "css": "custom/customStyle.css"}- Rename the .css file.
For example, in the custom folder, rename bankingStyle.css to match the name that is specified in the JavaScript file, customStyle.css.
- Use your text editor to search for all instances of bankingStyle and replace them with customStyle. This change ensures that all the existing rules apply only to the new custom style.
The renamed customStyle.css file still contains the className of the original style, in this example bankingStyle. Use your text editor to search for all instances of bankingStyle in the CSS file and replace them with customStyle. This change ensures that all the existing rules apply only to the new custom style.
- Optional: Provide translations for the name of your style.
The webDAV_folder\public\themes\bspaceTheme\spaceStyles\nls folder contains the translated resources files that are provided with Process Portal spaces. The resources file at the root of this directory, styleResources.js, is used for English locales. Translated versions of this resources file are contained in separate directories that correspond to each supported locale.
- Create your own file for your style resources, for example, customStyleResources.js. This file contains an entry for each style; the format of the entries is: " style ID": " display name". The following example shows an entry for a style named "custom" and a display name "Custom":
{ "custom" ; "Custom" }- Copy your style resources file into the webDAV_folder\public\themes\bspaceTheme\spaceStyles\nls folder. This file is used for the English locale, which is also the default locale.
- For each language that you want to support, open the corresponding locale folder and add an entry for your style.
For example, if you want to display the style name in German for users in a German locale, open the de folder and add an entry as follows:
"custom": " German_string"where German_string is the translated style name.- Repeat the previous step for any additional languages that you want to support. If no translations are provided for a locale, it defaults to the English name.
- When the translated resources are in place, modify the JavaScript file for your custom style, for example, customStyle.js, to refer to the new style resources file:
{ "id": "custom", "name": "Custom", "preview": "custom/Custom_thumb_202x152.png", "className": "customStyle", "css": "custom/customStyle.css", "resourceFile": "customStyleResources"}You can use the same resources file for multiple space styles by including an entry for each space style, separated by commas. For an example of a resources file that includes resources for multiple space styles, see the styleResources.js file.
- Test to make sure that your translated resources are displaying properly by clearing your browser cache and editing your space properties. When you view your space properties under different locale settings, the appropriate translated style label should be displayed.