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 🙂

[Jocelyn_Dart]

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

[Jochinnabathini]

Absolutely Jocelyn, this is just to give look and feel of Fiori 3, rest everything remains same.

[Bala13]

Can you get the Quartz Theme and Fiori Elements by upgrading the SAP UI5 version to 1.65 and still remain on S/4 HANA 1809, Fiori 2.0??

[sabatale]

Nope.