Add a custom style

You can also add own custom style.

To do this, proceed as follows:

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

      Use the styles that the portal provides in WebDAV at dav/fs-type1/themes/PageBuilder2/css/gold as a guide.

  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 .

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


Parent

Change page style


Related tasks


Deploy the theme

  reword step one to describe multiple css files instead of one Submitted by Jon Thomas on Jan 26, 2011 8:46:58 PM

Re: Add a custom style: wp7

Modify the styles.json file seems to break the ability to choose a style. Now no styles display, even after removing the line to declare my new style. Is there any way to get the default styles to show up again? Submitted by Darren P Cacy on Sep 26, 2010 11:09:18 PM

Add a custom style: wp7

FYI: The description of the style entry in styles.json doesn't match the example. The example has a "url" pair, but the description doesn't.


+

Search Tips   |   Advanced Search