Creating themes

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

A theme is a .zip archive that contains a spec.json file and an images folder. The spec.json file contains the branding instructions for each theme. The images folder contains the graphic images that are associated with the theme. You can give the .zip file a name of your choosing, as long as it does not include underscores ( _ ). Image file names cannot contain spaces. The sample customization, SampleTheme_11_2.zip is an example of a theme. You can modify its contents to create your own custom theme.

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 that is used with SampleTheme_11_2.zip contains the following text:

{
	"type": "object",
	"definitions": {
		"anyString": {
			"type": "string"
		},
		"noEmptyString": {
			"type": "string",
			"minLength": 1
		}
	},
	"properties": {
		"schemaVersion":{
			"type": "string",
			"enum": ["1.0", "2.0", "3.0"]
		},
		"name": {
			"type": "string",
			"pattern": "[a-zA-Z0-9\\p{L}_ ]+$"
		},
		"brandText" : {
			"$ref": "#/definitions/noEmptyString"
		},
		"brandTextSmall" : {
			"$ref": "#/definitions/anyString"
		},
		"welcomeBannerTitle" : {
			"$ref": "#/definitions/noEmptyString"
		},
		"welcomeBannerDescription" : {
			"$ref": "#/definitions/noEmptyString"
		},
		"images": {
			"type": "object",
			"properties": {
				"altText": {
					"$ref": "#/definitions/noEmptyString"
				},
				"brandIcon": {
					"$ref": "#/definitions/noEmptyString"
				},
				"brandIconSmall": {
					"$ref": "#/definitions/noEmptyString"
				},
				"favicon": {
					"$ref": "#/definitions/noEmptyString"
				},
				"welcomeBannerBgImage": {
					"$ref": "#/definitions/noEmptyString"
				}
			}
		},
		"uiShellTheme" : {
			"$ref": "#/definitions/noEmptyString"
		},
		"colors": {
			"type": "object",
			"properties": {
				"appbarBackground": {
					"$ref": "#/definitions/noEmptyString"
				},
				"appbarForeground": {
					"$ref": "#/definitions/noEmptyString"
				},
				"appbarSelectLine": {
					"$ref": "#/definitions/noEmptyString"
				},
				"navbarBackground": {
					"$ref": "#/definitions/noEmptyString"
				},
				"navbarForeground": {
					"$ref": "#/definitions/noEmptyString"
				},
				"navbarSelectLine": {
					"$ref": "#/definitions/noEmptyString"
				},
				"appbarPushButtonBackground": {
					"$ref": "#/definitions/noEmptyString"
				},
				"navbarPushButtonBackground": {
					"$ref": "#/definitions/noEmptyString"
				},
				"personalMenuBackground": {
					"$ref": "#/definitions/noEmptyString"
				}
			}
		}
	},
	"additionalProperties": false,
	"required": [
		"name"
	]
}

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

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

Table 1. Theme objects
JSON description Definition
brandText Brand text. Enter an empty string to leave this entry blank.
brandTextSmall Small brand text. if omitted, brandText is used. Enter an empty string to leave this entry blank.
welcomeBannerTitle Main title of the Cognos Analytics Home page.
welcomeBannerDescription Summary text below the main title.
brandIcon Brand icon
favicon Icon to display in web browser tab.
welcomeBannerBgImage Background image to the right of the welcomeBannerTitle and welcomeBannerDescription text.
uiShellTheme Allows you to switch between carbon 10 (light) and 100 (dark/default) background
appbarBackground Application bar background color
appbarForeground Application bar foreground color
appbarSelectLine Application bar selection line color
navbarBackground Navigation bar background color
navbarForeground Navigation bar foreground color
navbarSelectLine Navigation bar selection line color
appbarPushButtonBackground Application bar push-button background color
navbarPushButtonBackground Navigation bar push-button background color
personalMenuBackground

Specifies the background color of the Personal menu icon Personal menu icon