Adding Custom LESS and CSS

If you want to make further adjustments to your theme that are not possible by changing the values of the theming parameters provided in the Quick or Expert tab, you can add custom LESS or CSS.

Prerequisites

You have selected a theme as the base of your theme and an application for the preview.

Note Select the preview application for the UI technology for which you want to add custom CSS or LESS.

Context

The following UI technologies support custom LESS and CSS:

SAPUI5
Unified Rendering technologies (Web Dynpro ABAP, FPM)
NWBC

Note

SAP does not take responsibility for changes you make using the CSS tab.

Note the following when you create custom CSS:

Do not use custom CSS for changes that can be made using the parameters available in the Quick or Expert tab.
CSS or HTML structures of applications and UI technologies might change after upgrades or patches. If you use custom CSS for your theme, you should be prepared to make manual adjustments after an upgrade or patch.

Procedure

In the side panel on the right, choose to open the CSS tab.
Choose Add Custom CSS.
Enter your LESS or CSS code in the editor.
You want to define that the color of the whole page of an SAPUI5 application is the same as the brand color but with an opacity of 10%. To do so, you can use the SAPUI5 CSS class sapUiBody and reference the theming parameter sapBrandColor.
```
.sapUiBody{ 
background-color:fade(@sapBrandColor,10);
}
```
If you now change the brand color using the Quick tab, the color of the whole page adjusts automatically.
You can also define your own LESS variables and reuse them within your coding.
Choose Apply.

Results

The code you have entered is reflected in the application preview immediately afterwards.