Skip to Content
Product Information

How to get Fiori 3 Quartz theme without upgrading to S/4HANA 1909

In this blog, I would like to explain about applying Quartz theme without upgrading to S/4HANA. This is for the users who don’t want to upgrade 1909 but wanted to have Fiori 3 Quartz theme with mostly grey and neutral with more focussing on user experience with better look and feel. Applications really look nice bright colors.

3 Simple Steps: It’s simple change by modifiying properties in theme designer and adding custom css to it.

  1. Create a custom theme based on template Belize.

2. Change the Brand Color (#32363a), Base Color(#eff4f9), Highlight Color(#32363a) ,Background color (#eaedee), Background Image(#eaedee), Header Color(#354a5f), Text Color (#1a1c1f)& Custom CSS if required

.sapUshellAnchorNavigationBar {
background: #ffffff;
}
.sapMGTHdrTxt>.sapMText {
color: #32363a;
font-weight: normal;
font-family: “72”,”72full”,Arial,Helvetica,sans-serif;
font-size: 1rem;
}
.sapUshellShellHeadItm > span {
font-weight: normal;
font-size: 1.125rem;
color: #d1e8ff;
text-shadow: rgb(255, 255, 255) 0px 0px 0.125rem;
border-radius: 50%;
}
.sapUshellHeadTitle {
color: #ffffff;
}

 

 

3. Save & Build the theme. Now switch to newly built Quartz look and feel.

Have fun with new Fiori 3 Quartz theme in Fiori 2.0 🙂

2 Comments
You must be Logged on to comment or reply to a post.
  • Hi Joseph, Nice summary.

    Just remember that this will ONLY change the colours. It doesn’t change any of the behaviours to new Fiori 3 design behaviours.

    And if you use this you still need to check all your apps are ok with the new colour scheme – especially if you have custom apps with CSS overrides

    Thanks

    Jocelyn