Skip to end of metadata
Go to start of metadata


SAP Blue Crystal is the new visual design theme, introduced by SAP Fiori, which succeeds the older Corbu design. It is based on the same interaction design and UI controls as Corbu, but uses different colors. This new visual design offers a modern and fresh look.


SAP Blue Crystal can also be used to integrate existing user interfaces into SAP Fiori scenarios. It thus aims to reduce visual disruption between the different technologies. it harmonizes the coloring and design of different controls, but does not resemble Fiori's user interaction, navigation and the like.

Characteristics of the "SAP Blue Crystal" design for Unified Rendering:

  • very light design
  • less use of grey colors
  • harmonized coloring with "SAP Blue Crystal" for SAPUI5
  • based on the metrics of "SAP Corbu"
  • uses CSS3 technology


To have access to these new features you must install SAP Note 2227135 - New visual design Blue Crystal for the Web Client User Interface, or the relevant service pack:

WEBUI 731 SP17

WEBUI 747 SP11

WEBUI 748 SP01 

Along with SAP Note 2227135, you should implement following SAP Notes as well:

2277747 Blue Crystal Maintenance (3)
2243170 Blue Crystal Maintenance (2)
2234418 Blue Crystal fine adjustments

Reason for Development

The skins available for the CRM WEBUI do not match the Blue Crystal FIORI look and feel. Switching between the products is not as seamless as it could be. Users would like to have a new skin available based on the Fiori Blue Crystal skin for a seamless look and feel between products.

Most Common Issues and SAP Notes which are available to resolve these issues:

  • Issue: Using Chrome with Blue Crystal skin, you notice that the toolbar of the assignment blocks are not aligned to the right.
    Resolution: Implement SAP Note 2361143 - Blue Crystal: Wrong alignment in assignment blocks' toolbars to resolve this issue.


  • Issue: Table header row or upper rows of a tree are not aligned correctly or mis-aligned with respect to the other rows in the table in Google Chrome.
    Resolution: Implement SAP Note 2357187 - Table header is misaligned in Google Chrome and Blue Crystal to resolve this issue.


  • Issue: There are no margins in 'Personalize Layout' and 'Personalize My Data' popups under Personalization page. The texts and buttons are partially hidden on the left edge.
    Resolution: Implement SAP Note 2318569 - Missing margins on Personalization popups in Blue Crystal skin to resolve this issue.


  • Issue: In CRM WebUI with Blue Crystal Skin, when you open a F4 Help popup which has 13, 14 or 15 entries, you observe that only 12 rows are visible and there is no scrollbar, thus you are unable to see the last entries. 
    Resolution: Implement SAP Note 2317093 - In Blue Crystal skin, sometimes the bottom rows in the F4 Help popup are not visible, but there is no scrollbar.


  • Issue: Scroll Area Margin Issues in Blue Crystal Skin
    Resolution: Implement SAP Note 2311211 - Scroll area margin issues in Blue Crystal.

  • Issue: In any IC role, for Blue Crystal skin, the buttons of the IC toolbar are not totally visible, they miss the bottom part which is covered by the Central Search bar.
    Resolution: Implement SAP Note 2302329 - IC Toolbar buttons are partially hidden in Blue Crystal skin.

  • Issue: For Blue Crystal Skin, the Cloud Image is not displayed above the Navigation menu bar of the Web UI screen.
    Resolution: Refer to SAP KBA 2301508 - SAP CRM WebUI: Image missing in Blue Crystal Skin.


  • Issue: In Blue Crystal Skin, for browsers IE8, IE9, IE10, IE11 and Firefox, the Toolbar right margin is bigger than the left margin. The same issue happens on the detail area of an Overview Page.
    Resolution: Implement SAP Note 2298265 - Blue Crystal Toolbar and OVP Alignment Issue.


  • Issue: Blue Crystal Issues in RTL Mode.
    Resolution: Implement SAP Note 2297986 Blue Crystal Maintenance for RTL mode.

  • Issue: The buttons of the header area are missing the bottom edge in IC Role
    Resolution: Implement SAP Note 2290227 IC tool bar button's bottom edges are cut-off in Blue Crystal skin.

  • Issue: The message area button hover is grey instead of Blue.
    Resolution: Implement SAP Note 2285808 Wrong hover color in the message area button.


  • Issue: Your getting occasional dumps in the back end due to "cb_hv.gif" missing file.
    Resolution: Implement SAP Note 2285179 Back end dump for a missing gif in Blue Crystal skin.

  • Issue: After a roundtrip you notice that the work area moving up and down.
    Resolution: Implement SAP Note 2284591 Work Area flickering in Corbu and Blue Crystal skin.


  • Issue: You are using CRM WebClient UI with Blue Crystal Skin and the HEADER_SYS_INFO parameter has been added with NAME_ONLY value. Then you can observe that the 'Welcome' message is misaligned in the header area.
    Resolution: Implement SAP Note 2273866 Header System information improvement for Blue Crystal Skin.

  • Issue: Toolbar icons on the right are misaligned vertically, if no buttons are visible or present on the left of the same toolbar in Blue Crystal skin.
    Resolution: Implement SAP Note 2254819 Buttons in WebGUI UI toolbar vertically misaligned in Blue Crystal.


  • Issue: In tile layout mode, with the menu button of "Display Tabs" is active, you click on a tab to activate it, then you observe one of the hidden tabs appear.
    Resolution: Implement SAP Note 2253267 Flickering tabs on OVPs in tile layout (Corbu and Blue Crystal).


  • Issue: While using the Blue Crystal skin, when trying to move the mouse over the Second Level Navigation bar it sometimes disappears. Sometimes it works, sometimes it doesn't.
    Resolution: Implement SAP Note 2244941 Second Level Navigation disappears while moving the mouse over it.


Related SAP Notes/KBAs


2324173 NavBar AutoHide improvement for Blue Crystal
2322277 NavBar submenu does not show scrollbars when using Blue Crystal skin on Chrome
2317970 NavBar AutoHide improvement  



  • No labels