Theme your CPI & API-Management tenants

Within the experienced SAP GUI users, it is known to set for different SAP systems different system colors. That enables us to visually differentiate between non-prod and prod environments. A guide on how to achieve that can be found here: https://blogs.sap.com/2013/07/22/changing-you-sap-gui-colours/.
Sadly it is not possible to configure the same for SAP CPI, the API Portal nor the standard development portal.
As I think that it is very unsatisfying to differentiate by URL (e.g. l100001, l100004) the different tenants. I have developed a workaround:

I am ingesting custom CSS to the page based on the specific URLs of the tenants. As we use mostly Chrome we are using this Plugin Stylebot. The result is:

SAP CPI

API Portal

Developer Portal

In all of the tenants, the plugin ingests CSS to change the color of the header as well as to insert the type [development/test/production] and system abbreviation. The applied styles are only shown in case the plugin is installed and activated.

How to use this for your own CPI and API-Management tenants?

You can either use the selector and editor by the plugin or import the following code per system:

SAP CPI

{"[BASE URL]":{"_enabled":true,"_rules":{"comment0":{"comment":"/* [SYSTEM TYPE] */"},"div#shell--toolHeader":{"color":"#[COLOR]","background-color":"#[COLOR]"},"span#__title0-inner:after":{"color":"#FFF","content":"\" - [SYSTEM TYPE] [[SYSTEM ABBREVIATION]]\"","font-weight":"bold"}}}}

** Version with company logo can be found in this comment by Raffael Herrmann: Click here **

API Portal

{"[BASE URL]":{"_enabled":true,"_rules":{"comment0":{"comment":"/* [SYSTEM TYPE] */"},"div#shell--toolHeader":{"color":"#[COLOR]","background-color":"#[COLOR]"},"span#__title0-inner:after":{"color":"#FFF","content":"\" - [SYSTEM TYPE] [[SYSTEM ABBREVIATION]]\"","font-weight":"bold"}}}}

Developer Portal

{"[BASE URL]":{"_enabled":true,"_rules":{"comment0":{"comment":"/* [SYSTEM TYPE] */"},"div.appHeader":{"background-color":"#[COLOR]","color":"#[COLOR]"},"a#navigationLink, a.haasLoginItems, .headerBackgroundWhiteForHaas>.navbar .logout":{"color":"#ffffff"},"div.navbar-header:first-of-type:after":{"content":"\"[SYSTEM TYPE] [[SYSTEM ABBREVIATION]]\"","color":"#ffffff","font-weight":"bold","position":"fixed","top":"10px","left":"10px"}}}}

To apply these configurations to your tenants you need to:

1. Open the options of the Stylebot from your chrome head bar
   
2. Open the import dialog by navigation to the “Backup” section and click on Import backup
   
3. Copy one of the above CSS code snippets into the dialog and edit the overwrite the following values:
   • [BASE URL] –> Base URL of your tenant (e.g. lxxxxxx-tmn.hci.eu1.hana.ondemand.com)
   • [COLOR] –> Color of that system type (e.g. green: #38f038 | yellow: #f0f038 | red: #f03838)
   • [SYSTEM TYPE] –> Type of your system (e.g. development, test, prod)
   • [SYSTEM ABBREVIATION] –> Abbreviation of the system, if applicable (e.g. CID, CIC, CIP)
4. Redo step 3 for all of you CPI, API Portal and Development Portal tenants.

One general remark on this: As soon as SAP changes the HTML/CSS structure of CPI, API Portal or the Developer Portal, then this CSS code needs to be adjusted.

I hope that this might help you, that you enjoyed reading and appreciate your feedback, thoughts, and comments.