Use the CSS Editor for styling your application with standard web cascading style sheets. It can be found under the tab Other.
Please keep in mind that CSS statements are mainly used for design purposes, not for the basic layout to maintain the responsiveness of UI5.
For the corporate design, we recommend the use of the UI5 theming functionality with the Theme Designer.
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. Therefore you can use the Theme Designer.
The syntax for accessing widgets by ID with CSS is: #<screenId>–<widgetId>
If you want to learn more about CSS, check out the tutorials of the w3 schools or Codecademy.
Prerequisites
A Simplifier application you want to style (Become a Simplifier Jedi!).
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.
- Define a CSS style class in the CSS Editor (Button Styles – W3Schools):
- Enter the name of the CSS style class in the property field cssClasses of the widget in the UI Designer (left hand side panel):
- Define a CSS style class in the CSS Editor using the widget’s HTML element classes as class name:
