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.

Context

The following UI technologies support custom LESS and CSS:
  • SAPUI5
  • Unified Rendering technologies (Web Dynpro ABAP, FPM)
  • NWBC

Procedure

  1. In the side panel on the right, choose to open the CSS tab.
  2. Choose Add Custom CSS.
  3. 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.
  4. Choose Apply.

Results

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