• Resources
    • Documentation
    • Knowledge Base
    • Forum
    • Webinars and Videos
    • Courses
    • FAQ
    • Changelog
    • Blog
    • Swag Shop
  • Marketplace
  • Login
  • Resources
    • Documentation
    • Knowledge Base
    • Forum
    • Webinars and Videos
    • Courses
    • FAQ
    • Changelog
    • Blog
    • Swag Shop
  • Marketplace
  • Login
home/Knowledge Base/Layout & Design/How to Use Simplifier CSS Editor

How to Use Simplifier CSS Editor

293 views 0

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.

  • Define a CSS style class in the CSS Editor (Button Styles – W3Schools):

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:

Was this article helpful?

Yes  No
Related Articles
  • Use SAP UI Theme Designer
Leave A Comment Cancel reply

You must be logged in to post a comment.

Latest Articles
  • REST: Use a CSRF Token and a Cookie to authorize Requests
  • Use the Adobe PDF Embed API in your Simplifier Application
  • Process Designer: Keeping an overview
  • Contact | Imprint | Privacy | © 2022 Simplifier AG. All Rights Reserved.

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.