Technical Articles
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:
- Open the options of the Stylebot from your chrome head bar
- Open the import dialog by navigation to the “Backup” section and click on Import backup
- 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)
- 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.
Hi Malte,
thanks for the great blog! I enhanced your CPI script a little bit, so that you can also replace the SAP logo with your companies one.
To add your logo just upload it to a converter site like https://base64.guru/converter/encode/image/png and then replace the [BASE64] tag in the above configuration with the base64 data your got from the converter site. Depending on the formfactor of your logo, you should then re-align the “padding-left” value. That’s it.
Demo:

Raffael Herrmann very cool addition! I just added it to my personal code and added a reference to this comment to the blog.
Thanks for this and very useful, however I am not able to make it work.
Will this script not work for SAP free CPI tenant. I tried to implement as per the steps given for SAP free CPI tenant and nothing is happening.