Current Release

CSS Editor

217 views 1 June 4, 2021

Prerequisites

A Simplifier application you want to style

UI5 and CSS: Please be aware to use CSS directives mainly for design purposes, not for basic layouting to preserve the responsiveness of UI5. For design purposes, we recommend using the theming functionality of UI5

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 (right hand side panel):

Please use a blank space to separate several classes in the cssClasses property field.

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:

Was this article helpful?

 
Related Articles
Leave A Comment