+

Search Tips   |   Advanced Search


Add a custom style

  1. Create an alternate Cascading Style Sheet (.css) file for the theme. For a guide:

    profile_root/installedApps/cell_name/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/css

  2. Add a folder to...

    profile_root/installedApps/cell_name/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/css

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

  4. Open the file...

    profile_root/installedApps/cell_name/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/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',
        'thumbnail':'path_to_the_thumbnail_for_the_style',
        'help':'short_description_for_the_style'
    } 
    

    The display name will show in the Customize shelf.

    The path to the stylesheet is used as its ID. The path should be relative to the folder css and exclude the .css file extension. For example, the ID for the orange theme provided out of the box is orange/orange, as its stylesheet is located at...

    profile_root/installedApps/cell_name/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/css/orange/orange.css

    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 your 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.

    This adds the new style to the default All category under Change Style in the Customize shelf.

  6. To add a new category, edit...

    profile_root/installedApps/cell_name/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/changeStyle.json

    ...and add another item to the categories array in the json object. Example:

    "My new section":
    {
        "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...

    profile_root/installedApps/cell_name/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/styles.json

  7. Restart the Dojo WAR file in the administrative console to pick up any new files.

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


Parent topic:

Changing page style


Related tasks


Deploy the theme