Creating and Setting a Default Theme for Cognos Analytics 11.0.4+

June 28, 2018

Wow, branding on my Cognos Portal!

Business Case: 

When using Cognos Analytics V11, there is a default theme which is quite nice, but not very brand friendly. The goal of this article is to show you how to go from this generic IBM theme ….

 

To the customized portal screen below…

As you can see, we have changed the tab name to show our brand icon, the IBM name has been replaced with our company name, “QueBIT”, and our color schema has been changed to our branded colors.  This process is very easy to do, if you follow the steps below.

Procedure:

  1. Create a folder to hold the theme files. We recommend the folder be named the same as the theme name you plan to upload.  In this example, we named the folder “QueBITTheme”.  Create a subdirectory in this folder and call it images.  This is where the images will be stored.  And finally, create a text file and name it spec.json.  The file will hold JSON code.  JSON is a very common data format used for asynchronous browser–server communication. It is a language-independent data format and was derived from JavaScript.  However, as of 2017 many programming languages include code to generate and parse JSON-format data.

 

  1. Under the images folder, store the images you plan to use as part of your updated theme.  In this example, we saved the images as png files.

 

  1. Update your spec.json file with the following JSON code:

 

  1. Below shows the corresponding line item to our code from step #3.

 

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
 7 favicon Icon to display in web browser tab.

 

  1. Once the JSON code is completed, zip the image folder and spec.json file and name the file the same as the theme name, “QueBITTheme”.

 

  1. Go into Cognos Analytics; choose Manage>Customization>Theme and press the upload icon to upload the new theme zip file.

  1. Choose the zip file just created and press open.

 

  1. Press the button icon to the left of the file name and choose apply.

  1. The following message will appear showing you have successfully uploaded the theme.

 

  1. Taking this a step further, you can now customize roles with this theme. In this example, we are customizing the consumer role.  Under Manage>Accounts, find the Consumer Role.  Choose the properties> customize and apply the QueBITTheme.  Now all members of the consumer role will see this theme when they log on.

QueBIT’s Analytics Online Instructor-led Training Courses

  • IBM Planning Analytics Developer
  • IBM Planning Analytics Advanced Reporting
  • IBM Planning Analytics Advanced Developer

Visit learn.quebit.com

QueBIT’s Analytics Online Instructor-led Training

  • IBM Cognos Analytics Authoring Reports Fundamentals
  • IBM Cognos Analytics Authoring Reports with Multidimensional Data
  • IBM Cognos Analytics Authoring Reports Fundamentals

Visit learn.quebit.com

Subscribe to QueBIT Notifications

Can’t find what you’re looking for? →

    Contact Help Desk

    This form collects your contact information so that we can correspond with you. For more information on how we are committed to protecting and respecting your privacy, please review our Privacy Policy.

    I consent to QueBIT collecting my contact information.