Creating themes

You can override the standard IBM® Cognos® Analytics theme for the Cognos Analytics user interface to reflect your corporate branding.

The sample customization, SampleTheme.zip, shows how to create a theme. The .zip archive contains a file, spec.json, that defines the theme and a folder, images, that contains the graphic images that are associated with this theme. Image file names cannot contain spaces.

Attention:

When you are using a sample theme, you cannot reset your password after it expires.

Your specific theme may consist of a folder such as myTheme that contains a .json file and images folder (containing your graphics). When creating the zip file, do not include the folder (e.g., myTheme) in the zip file; Cognos Analytics will not be able to process it. Instead, select the .json file and images folder, then use an archiving program to create the .zip file. Do not use the Windows Explorer send to compressed folder feature to create the .zip file; the result would be an incompatible file.

The spec.json file is shown here.

{
  "name": "Sample_Theme",
  "schemaVersion": "2.0",
  "brandText": "the Sample Outdoors Company",
  "brandTextSmall": "Sample Outdoors Company",
  "images": {
    "brandIcon": "images/logo_large.png",
    "brandIconSmall": "images/logo_small.png",
    "favicon": "images/logo_fav.png"
  },
  "colors": {
    "appbarBackground": "#eeeeee",
    "appbarForeground": "black",
    "appbarSelectLine": "#033f38",
    "appbarPushButtonBackground": "#c8d2d1",
    "navbarBackground": "#1c96d4",
    "navbarForeground": "white",
    "navbarSelectLine": "#033f38",
    "navbarPushButtonBackground": "#007670"
  }
}

The current samples do not include the brandTextSmall and favicon elements. They are included here for documentation purposes.

The objects in this file map to the Cognos Analytics user interface elements as shown here. If any theme items are omitted from the theme, then the Cognos Analytics default theme item is used.

Interface with callouts showing element references

This table relates the user interface elements to the JSON objects.

Table 1. Theme objects
User interface reference JSON description Definition
1 brandText Brand text. Enter an empty string to leave this entry blank.
2 brandTextSmall Small brand text. if omitted, brandText is used. Enter an empty string to leave this entry blank.
3 brandIcon Brand icon
4 brandIconSmall Small brand icon
5 appbarBackground Application bar background color
5 appbarForeground Application bar foreground color
5 appbarSelectLine Application bar selection line color
5 appbarPushButtonBackground Application bar push-button background color
6 navbarBackground Navigation bar background color
6 navbarForeground Navigation bar foreground color
6 navbarSelectLine Navigation bar selection line color
6 navbarPushButtonBackground Navigation bar push-button background color
  favicon Icon to display in web browser tab.