Skip to Content
Author's profile photo Daniel Sanchez

How to Create the SAP Belize Theme in SAP UI Theme Designer

Intro

In SAP Fiori 2.0, the SAP Belize theme is introduced and supplants the SAP Blue Crystal theme as the default theme in the SAP Fiori launchpad and for SAP Fiori apps. However, the SAP Belize theme is not released for SAP Fiori 1.0. Thus, I have created this guide to show you can create the SAP Belize theme for SAP Fiori 1.0 by using the SAP UI Theme Designer.

The end result of this how-to guide is this:

Before We Start

There are two versions of the SAP Belize theme; one is “light” and the other is “dark”. And when it comes to creating the theme, the procedure is the same, except that the color values are different. This guide will show how to create the “light” version of the theme.

Also, please note that custom CSS code is used to create the theme and although custom CSS code in the SAP UI Theme Designer is a feature and may work on the theme, it is not officially supported by SAP.

Procedure

  1. Go to SAP UI Theme Designer by launching tcode /n/ui5/theme_designer from the SAP GUI or open your favorite browser (Google Chrome is used in this guide) and launch <server>:<port>/sap/bc/theming/theme-designer/index.html?sap-client=XYZ. Log in if necessary.
  2. Select the SAP Blue Crystal theme and then click the Open button.
  3. On the right-hand menu, Expert mode.
  4. Change the values of the following theme parameters as below:
    • THEME PARAMETER VALUE
      sapBackgroundImage linear-gradient(to bottom,#b5cee4,#e7ecf0)
      sapBrandColor #b5cee4
      sapUshellAnchorItemTextColor rgb(52, 97, 135)
      sapUshellGroupHeaderTitleColor rgb(52, 97, 135)
      sapUshellShellHeaderTitleColor rgb(52, 97, 135)
  5. Switch to CSS mode.
  6. Enter the following code:
// Change the background color of the header
.sapUshellShellHeader {background: #b5cee4;}
// Change the background color of the header (search icon, avatar and user name)
.sapUshellShellHeadEnd {background: #b5cee4 !important;}
// Change text color and text shadow of search icon
.sapUshellShellHeadItm span {
    color: rgb(52, 97, 135) !important;
    text-shadow: 0px 1px 0rem rgba(255,255,255, 0.3) !important;
}
// Change text color and text shadow of avatar and user name
.sapUshellShellHeadAction {
    color: rgb(52, 97, 135) !important;
    text-shadow: 0px 1px 0rem rgba(255,255,255, 0.3) !important;
}
// Change text color and text shadow of home button
#homeBtn {
    color: rgb(52, 97, 135) !important;
    text-shadow: 0px 1px 0rem rgba(255,255,255, 0.3) !important;
}
// Offset (hide) line below search icon, avatar and user name
.sapUshellShellHeadEnd {box-shadow: inset 0 0 red !important;}
// Change text shadow and line height of groups text buttons 
.sapUshellAnchorItemInner {
    text-shadow: 0px 1px 0rem rgba(255,255,255, 0.3) !important;
    line-height: 2.95rem !important;
}
// Change color of tile icons 1
.sapMImageContentImageIcon.sapUiIcon {
    color: rgb(147, 183, 214) !important;
}
// Change group titles
.sapUshellContainerTitle {
    text-shadow: 0px 1px 0rem rgba(255,255,255, 0.3) !important;
}
// Change color of stripe that is below the group text buttons
.sapUshellAnchorNavigationBar {
    border-bottom: 0.125rem solid rgba(52,97,135,0.4);
}
// Change color group buttons menu icon
.sapUshellAnchorItemOverFlow .sapUiIcon {
    color: rgb(52, 97, 135) !important;
    text-shadow: 0px 1px 0rem rgba(255,255,255, 0.3) !important;
}
// Change color of left arrow nav icon of group buttons menu
.sapUshellAnchorLeftOverFlowButton .sapUiIcon {
    color: rgb(52, 97, 135) !important;
    text-shadow: 0px 1px 0rem rgba(255,255,255, 0.3) !important;
}
// Change color of right arrow nav icon of group buttons menu
.sapUshellAnchorRightOverFlowButton .sapUiIcon {
    color: rgb(52, 97, 135) !important;
    text-shadow: 0px 1px 0rem rgba(255,255,255, 0.3) !important;
}
// Offset (hide) divider between search icon and avatar
.sapUshellShellHeadSeparator:before, .sapUshellShellHeadEnd .sapUshellShellHeadItm.sapUshellShellHeadItmSep:before, .sapUshellShellHeadBegin .sapUshellShellHeadItm.sapUshellShellHeadItmSep:after {
    height: 0rem;
}
// Change color of tile icons 2
.sapMNCIconImage {
    color: rgb(147, 183, 214) !important;
}
// Change color of text of neutral-status KPI value
.Neutral .sapMNCValueScr {
    color: rgb(94, 105, 110);
}
// Offest (hide) border of and add box shadow to tile
.sapMGT {
    border: 0px solid transparent !important;
    box-shadow: 0 0 0.125rem 0 rgba(0,0,0,0.3) !important;
}

Conclusion

As you can see, creating the SAP Belize theme in SAP UI Theme Designer is pretty straight forward once you know what to do. However, what took the most amount of time during the initial development of the theme was figuring out which CSS classes and styles to target, which was accomplished by using Google Chrome’s developer tools on the SAP Fiori launchpad and making changes to the DOM on-the-fly in order to see whether I had modified the correct class.

Furthermore, the result almost indistinguishable from the SAP Belize theme in SAP Fiori 2.0. One major difference is that SAP Fiori 2.0 has additional functionality. Another difference is the layout of the header area: SAP Fiori 1.0 has the user avatar on the far right; SAP Fiori 1.0 has the user’s name; SAP Fiori 1.0 has the home button; SAP Fiori 2.0 has the notifications button; and SAP Fiori 2.0 has the title “Home”. (However, it is not recommended to change the layout of these screen elements.)

Assigned Tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Jeremy Good
      Jeremy Good

      Thank you for the community contribution David!  Since first hearing/seeing the Belize theme I was wondering when this idea might be shared, since I didn't hear any mention about backporting.  Since it is the CSS look and feel that you've emulated, should we consider this Fiori 1.5? 😉 

      Author's profile photo Former Member
      Former Member

      Thanks for your post!

      We quickly implemented Belize in our Launchpad as the first step towards adopting the new Fiori 2.0 layout. I wanted to mention you can easily default a theme using transaction: /UI2/NWBC_CFG_CUST. In addition, if you want to force all of your users to use the defaulted theme you can clear the Launchpad user personalization using the personalization object key: ‘/UI2/USER_PROFILE’. I’ve developed a utility program to reset the personalization for all users at once. If anyone is interested in the code let me know…

      Author's profile photo Luciano Lopez
      Luciano Lopez

      Definitely would be interested in the code to reset the personalization.

      Author's profile photo Former Member
      Former Member

      I just noticed someone posted another blog on the same topic:

       

      Author's profile photo Syambabu Allu
      Syambabu Allu

      Good info with new SAP Fiori theme in 1.0 version.

      Thanks,
      Syam

      Author's profile photo Former Member
      Former Member

      Hello Daniel Sanchez,

      Very nice post. I was seeing your theme and i notice i the upper right corner the foto of the employee. Can you give me a hand how to accomplish without JAM.

      Regards

      Nuno Vilar

      Author's profile photo Mohammed Kaleem
      Mohammed Kaleem

      Hi Daniel ,

      Thanks for the info.

      Can you Please help me for the Belize Dark Theme

      Also , I am not able to find the below parameters in the theme designer.

      sapUshellAnchorItemTextColor
      sapUshellGroupHeaderTitleColor
      sapUshellShellHeaderTitleColor

      Rgds

      Author's profile photo Vineet Safaya
      Vineet Safaya

      You can add these 3 parameters in your css file. Have a look at the below code:

      .sapUshellAnchorItemTextColor{
          color: rgb(52, 97, 135)
      }
      
      .sapUshellGroupHeaderTitleColor{
          color: rgb(52, 97, 135)
      }
      
      .sapUshellShellHeaderTitleColor{
          color: rgb(52, 97, 135)
      }
      Author's profile photo Former Member
      Former Member

      Awesome work !!

      Author's profile photo Francis S.K. LUK
      Francis S.K. LUK

      Hi,

      I wonder how can I change the color of the text just above the various tile. For example the text 'Employee (HCM) just above the tile 'My Leave Requests'.

      Thanks.