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

[Jochinnabathini]

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 🙂