How to create new custom theme in Fiori?

[sonalgupta7]

In this blog, you will learn, how to create new custom theme in Fiori and then, how to make it a default theme for all users.

This functionality is very useful when there is a requirement like add the company logo or change the appearance of the Fiori Launchpad as per client's requirements. I have tried these steps recently in S/4HANA 2021 version - they works well.

How to create custom theme in Fiori and make it a default theme for all users?

Step 1: Open Fiori Theme Designer

Login in SAP GUI and go to theme designer using t-code  /n/ui5/theme_designer or

Try URL: <https://<host>.<domain>:<port>/sap/bc/theming/theme-designer?sap-client=<client>

 

Step 2: Choose ‘Create a New Theme’ option

Fiori Theme Designer will be launched in your choice (defaulted) browser. You may need to re-login again with your credential. You will get ‘login page for Theme Designer’

Next, click on ‘Create a New Theme’ - highlighted in red box in image below.

Note: If you have a saved theme which you like to use, you have an option to import it.

Step 3: Choose from reference themes

Once you chose - 'create a new theme' option, you will get many options to choose from existing theme and modify it as per requirement.

Instead of creating custom theme from scratch, copy the existing theme and modify, that is easier, efficient and recommended.

I am using SAP Quartz Light as reference and I will show to how to customize it. This can be done by clicking ‘Create Theme’ button highlighted in red box.

Note: If you like to use legacy themes like SAP Blue Crystal, Chrome, Coribu, Gold reflection, SAP Streamline as reference, click on 'Legacy theme option' on the same pop-up window and you can select from those.

 

Step 4: Link to Application

After selecting ‘Create Theme’, you will come to 'create your own custom Quartz light theme' page. Here you will be required to link your application and choose a name of your application.

Link to Application:

https://<host>.<domain>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchpad.html?sap-client=...;

Name of Application: Custom_theme (you can choose the name you prefer)

Click on ‘Add’ button to go to theme customization page

 

Step 5: Customize the theme

Highlighted in red box, you will get different options to customize your theme.

 

Step 6: Add Logo

Upload the logo you like to use to replace current SAP logo. After uploading it, see the change in logo (highlighted in red box)

 

Step 7: More changes in custom theme – like color, text, icons

Here, you can change the look and feel of shell header, navigation, tiles, application background and many more. Few more examples are change color of the header, text on the tile, group text, attribute. If you are good in CSS, you have an option to use it and customize the theme.

For example: change header color from #354a5f to color of your choice by clicking on box (highlighted in red).

 

Step 8: Check the preview

You have an option to view the launchpad in different mode - desktop, mobile and tablet mode, full screen, horizontal, vertical, original theme, new changed screen in preview. Options are highlighted in red box.

 

Step 9: Save and build the new theme

Choose the option to save and build the theme.

 

Step 10: Theme available in Fiori LaunchPad

Once theme is built and save, you can see the available custom themes in Fiori Launchpad. Go to user profile --> setting --> appearance --> custom theme.

 

Step 11: Set new custom theme a default theme

• Log in GUI, check the theme parameter value by going to t-code /n/UI2/NWBC_CFG_SAP.

 

• Now go to t-code /n/UI2/NWBC_CFG_CUST and create an entry new entry for SAP_FLP. Save it in transport.

 

•  Now go to t-code /n/UI2/FLP_SYS_CONF to display system-wide parameter for Fiori launchpad and update with new theme name.

old value - sap_fiori_3

new value - custom_theme

 

Once done, new custom theme will be defaulted for all the existing user and the new users. When they login, they will get new theme.

Tips and tricks: If theme is not getting updated after following these steps, clear all the caches and logout and log back in again in Fiori

I hope this step-by-step guide will help you to create new theme in Fiori.

Check SAP community for Q& A.

Thank you everyone who has read this content! Please let me know your comments. I will be pleased to answer your questions!

See you next blog!