Add a custom style

1. Create an alternate set of Cascading Style Sheet (.css) files for the theme.

   For a guide, use the styles that the portal provides in WebDAV at...

   dav/fs-type1/themes/PageBuilder2/css/gold

2. Add a folder in...
   WebDAV at dav/fs-type1/themes/PageBuilder2/css/

3. Save the CSS and resources for the new style there.

4. Open the file in WebDAV at...
   dav/fs-type1/themes/PageBuilder2/system/styles.json

5. Register the style by adding an entry to the items array in the following format:

   {'label':'display_name_for_the_style',
        'id':'path_to_the_stylesheet_relative_to_theme_folder_in_webdav',
        'thumbnail':'path_to_the_thumbnail_for_the_style',
        'help':'short_description_for_the_style'} 
   

   Example:

   {'label':'change_style_gold','id':'gold.css','url':'css/gold/gold.css',
   'thumbnail':ibmCfg.themeConfig.themeRootURI+'/images/changeStyle/goldThumb.gif',
   'help':''}
   

   The display name shows in the Customize shelf. The name of the style sheet is used as its ID. The path should be relative to the folder in WebDAV. The json object in the file styles.json contains two attributes that are used for globalizing the style display strings localizationPackageName and localizationBundleName. These are used by dojo.i18n to provide localized strings by creating bundles with dojo.i18n.getLocalization("localizationPackageName", "localizationBundleName") . If you choose to globalize the display name of new style, add a new key to the bundle and replace the label value in the json with the key name. The customize shelf will automatically look up the display name in the bundle using the key.

   The steps above add the new style to the default All category under Change Style in the Customize shelf.

6. To add a new category, edit the file in WebDAV at dav/fs-type1/themes/PageBuilder2/system/changeStyle.json and add another item to the categories array in the json object.
   Example:

   {
   "label":"My new category",
   "searchStr":"Search my new category",
   "datastore":"com.ibm.data.JsonStore",
   "url":.path_to_your_styles_json_file"
   }
   

   where the attribute url is the path to a json file that contains the style entries for the new category. Model this json file after the one in WebDAV at dav/fs-type1/themes/PageBuilder2/system/styles.json .

   • Verify that custom style has been added to the Customize area.

Change page style

Previous

Deploy the theme

+

Search Tips   |   Advanced Search