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.)