How to Use Simplifier CSS Editor

Written by Christian Kleinschroth
January 11, 2021

Prerequisites

A Simplifier application you want to style.

The general look and feel of the app should be realised using the SAP UI Theme Designer.

Step 1 – Open Simplifier CSS Editor

In the Application Editor, select CSS Editor by clicking Other (Simplifier Documentation):

Step 2 – Style Widgets by Style Class Property

You can assign CSS style classes to a widget via the widget property cssClasses.

To override the default styles add !important to the style instructions.

  • Enter the name of the CSS style class in the property field cssClasses of the widget in the UI Designer (left hand side panel):

Step 3 – Style Widgets by ID

You can assign CSS style classes to widgets directly by using the widget’s ID.

  • Define a CSS style class in the CSS Editor using the widget’s ID as class name:

The syntax for accessing widgets by ID with CSS is: #<screenId>–<widgetId>

Step 4 – Style Widgets using HTML Element Classes

You can assign CSS style classes to widgets using HTML element classes:

  • Check the HTML element class via the browser console (open browser console, right-click at the widget and select inspect):
  • Define a CSS style class in the CSS Editor using the widget’s HTML element classes as class name:
Tags:

Was this article helpful?

 
Related Articles