Skip to Content
Technical Articles
Author's profile photo Alexandre Sabatier

Fiorize your Blue Crystal Skin in SAP CRM EhP3

In this blog, I will show you how to immediately improve your legacy SAP CRM UX with a few CSS tricks and make it look more alike with the latest Fiori themes, such as SAP Belize. This is ideal for customers who want to harmonize their applications before upgrading their SAP CRM or transitioning to S/4HANA.

If you are already on EhP4, congratulations! Make sure to read SAP Note 2628638 and switch to the actual SAP Belize theme, because it comes not only with an improved design but also new capabilities (notably the integration with the Fiori Launchpad).

For all others, here is an example of what you can do by changing only a few things in your system. Note that I am showing a SAP Solution Manager system but this whole blog also applies to any SAP CRM application:

Demo of the new belize-flavor theme.

For reference here is a screenshot from an actual SAP S/4HANA system with the Belize Theme. You can see two main differences: 1) the top header is replaced with the Launchpad shell for easy navigation between screens; 2) the L-Shape menu on the left, which is difficult to reproduce without custom development because it is a “structural” change. You can find the SAP CRM Belize Visual Theme guidelines here.

You have several options in order to make design changes to SAP themes:

  • Use SAP Theme Designer: I gave it a try but was not able to get a satisfying result for CRM apps, although it is working pretty well for other technologies – note that you can import the CSS code I give you later in this blog directly in Theme Designer if needed;
  • Import the official SAP Belize theme from CRM EhP4 and work your way from there: I also tried that, but there are too many structural changes that were made in order to accommodate specific Fiori features and I ended up giving up;
  • Create a custom CSS file: This is the easiest way, even if you are not familiar with code or CSS. It takes a bit of patience but all you really have to do in the end is inspecting the different pages with any browser Developer tool and keep digging.

For this blog I will only cover the Business Role selection page because the process is straightforward. Below is a before/after comparison of the two screens (original Blue Crystal vs. modified Blue Crystal):

If you are lazy and/or just want to see the result in your system (probably lazy though!), you can find my own version of the Business Role Selection CSS here: https://github.com/sabatale/sapcrm_bluecrystal_fiori_theme_css and skip to Step 2.

Step 1 – Browser Developer Tools are your friend. I’m not kidding, those tools can be used for anything: performance tracing, debugging, design adjustments, etc. If you are not familiar with Developer Tools, simply open your browser and press F12 (the dark section from the screenshot below).

Then use CTRL+SHIFT+C and select any element on the screen: you will now see which piece of code the element corresponds to, as well as different properties such as its styles. The “styles” represent the pieces of code that are used to stylize an element (e.g. button).

You can change the styles properties on-the-fly directly from your browser! Of course these changes will not be saved on the server but it gives you a good idea on where changes are needed. For example, let me change the document title color to “bordeaux” red by clicking the color attribute on the right side, under “.th-l-title”. As soon as I change the color value, the title turns red:

The simplest way to proceed is to identify which pages are to be changed. Then make and list your changes in a local file. Once you are happy with the result, save this file as a CSS file (format = .css). If you are keen on performance, I recommend you first paste your result into an optimizer such as https://css.github.io/csso/csso.html (for beautifying and optimizing).

Step 2 – First you have to understand that most CSS proeprties are included in a file in the following location: /BC/BSP/SAP/thtmlb_styles/styles.css. This is your starting point for any design changes. There are exceptions for Internet Explorer 11 but you will have to troubleshoot this particular browser in a second time anyway.

What we do next has no impact on the original theme, we only tell the CRM to look at our custom file first: if an element has been modified, it will apply the change; otherwise it will continue with the default styles.

Logon to the target CRM system and navigate to transaction SE80. Select type “BSP Application” and enter “thtmlb_styles”. This BSP handles the different styles and themes. Now navigate to MIMEs/sap_skins/blue_crystal/ and upload your .CSS file (e.g. loadingpage.css).

Step 3 – Navigate to transaction SPRO and find the step “Define Path for CSS Files”.

There, add a new entry as follow: Skin = BLUE CRYSTAL; Browser = Non Browser-specific; File URL = {name of the file you uploaded in Step 2}. Save your changes in a transport.

Step 4 – That’s it, you are done. Easy, eh? You can now start working on the other pages. Again the styles.css file covers pretty much everything so you really have only one file to work with.

You may have noticed I’ve been using Belize as a reference. However feel free to play around with Quartz design guidelines instead and it will give you something like this!

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Sanjay Sahita
      Sanjay Sahita

      Hello Alexander,

       

      Thank you for writing this amazing blog!

      We are running Solman 7.2 SPS11 on HANA.

      With this latest Solman SPS, I could only find BBPCRM 713.

      BBPCRM 713 0019 SAPKU71319 BBPCRM.

       

      May I ask how did you get Solman 7.2 ITSM that awesome fiori belize theme ?

      Did you really upgrade BBPCRM to 714 from 713 which is offered de-facto in SPStack ? And is that supported ? I read the sap note you mentioned but seems targeting S/4 or BBPCRM 714.

      Appreciate your help in advance.

      BR,

      Sanjay S

      Author's profile photo Alexandre Sabatier
      Alexandre Sabatier
      Blog Post Author

      Hello,

      The blog does explain how to get this result. It's done through CSS customization.

      One way to do it is to adapt "/BC/BSP/SAP/thtmlb_styles/styles.css".

      You cannot upgrade to BBPCRM 714 unless it gets included in a future SP by SAP (not planned).

      Author's profile photo Andreas Graeven
      Andreas Graeven

      Hello Alexandre,

      i change my theme from nova to belize.

      In your screenshot are the arrows for back and forward navigation near by sap logo. in my view are the arrows not visible. have you any ideas for me ?

      thanks for answer and any help.

      greetz

      Andreas