IBM Cognos Analytics is setup by default to use a beautiful IBM Carbon X theme.  But what if you want to have the UI match your own corporate branding?  Not just branding, but logos and colours as well.

Let's drill into Cognos custom themes to see how all this is possible.

Custom Themes in Cognos 12.1.1

Cognos has supported custom themes since the 11.x releases.  Mostly they allowed you to control branding, such as what the product title would appear as, and graphics on the home page.  They had limited support to customize colours well, but most of the UI could not be changed.  Themes are defined using a simple JSON file that you upload into the Manage / Customization panel.

Now in Cognos 12.1.1, there are new Theme properties that give you much greater control of the UI.  The best way to explain what they can do is with some examples.  Check out these 2 screenshots and notice how in colours have been applied across the UI in these 2 examples.  You can control now just the colours of the branding, but of all the UI controls in the product.  You can also specify a logo to appear on the home page and choose how the product is branded in the top banner.

Creating Your Own Theme

Themes are just JSON files.  You then zip them up with any images that go along with them and upload them into the Cognos Manage UI.  You can read all about them in the Themes documentation.  Here is a snippet of what the JSON could look like:

{
   "name": "HappyBean_Theme",
   "schemaVersion": "1.0",
   "brandText": "Happy Bean Cofee",
   "brandTextSmall": "Happy Bean",
   "uiShellTheme": "light",
   "welcomeBannerDescription": "Welcome to The Happy Bean analytics portal",
   "images": {
      "brandIcon": "images/happybean-logo.png",
      "brandIconSmall": "images/happybean-logo-small.png",
      "favicon": "images/happybean-logo.png",
      "welcomeBannerBgImage": "images/happybean-logo.jpg"
   },
   "colors": {
      "uiPrimary": "#F5C245",
      "uiSecondary": "#412007",
      "uiTertiary": "#C92A1F",
      "uiInteractiveText": "white",
      "uiLinks": "#C92A1F",
      "uiVisitedLink": "red",
      "uiHighlight": "#C92A1F",
      "appbarBackground": "white",
      "appbarForeground": "black",
      "appbarSelectLine": "#C92A1F",
      "appbarPushButtonBackground": "#C92A1F",
      "navbarBackground": "#F5DB9A",
      "navbarForeground": "#C92A1F",
      "navbarSelectLine": "#412007",
      "navbarPushButtonBackground": "#F5C245"
   }
}

Watch the Video and Show Us Your Themes!

Check out this video to see the new themes in action!

And please share screenshots of the themes you've created in our forum, we'd love to see how you're using them.