Style Sheets

Style sheets allow you to define your own styles for forms and digital journeys for better accessibility and improved usability. Using style sheets, you can apply your own text style, text color, padding, etc.

Create a New Style Sheet

  1. In FintechOS Studio, go to Main Menu > Advanced > Style Sheets.
  2. Click Insert.
  3. In the Name field, enter the name of the new style sheet.
  4. In the Code field, provide the CSS classes that define your styles.
    NOTE  
    If in the custom style sheet you reference files (e.g., images), make sure that you're using the following referencing convention ../custom/<filename>.extension instead of custom/<filename>.extension; otherwise the files will not load.
    You can limit the style impact on the current form driven flow and you can also overwrite css variables. For more details, see the sections below.
  5. Click Save and close. The new style sheet will be displayed in the Style Sheets List page.

Clone a Style Sheet

If you wish to create a variation based on an existing style sheet, you can clone the desired style sheet and use it as a starting point for further modifications.

To clone a style sheet:

  1. Open the source style sheet in the editor and press the Clone StyleSheet button.

  2. In the pop-up window that opens, provide a name for the clone.
  3. Click Clone to create your new style sheet.

Apply Style Sheets to Form Driven Flows (No-Code)

In the form or form driven flow's General section, use the Style Sheets property to select the style sheets you wish to apply.

You can select multiple style sheets for the same form. In this case, the order in which the style sheets will be applied matches the order in which you entered them.

Apply Style Sheets Using Code

You can apply custom style sheets to the following components in the corresponding locations:

  • Entity Forms - Before Events, After Events
  • Entity Form Sections - After Events, After Section Save, Before Section Save
  • Custom Flows - After Generate Js
  • Entity Views - After Generate Js
  • HTML Widgets - JavaScript
  • Charts - After Generate Js

Use the ebs.importStyleSheet Client SDK method to import your custom style sheets.

If you want to remove your own styles applied on data forms and digital journeys, use the ebs.removeAllImportedStyleSheets method.

Limit Style Impact to Current Form

To better qualify your selectors, use the following css class:

form_{entityName}_{formName}, with the spaces removed.

Copy
>.form_myEntity_myForm .mySelector{
        color: #f00;
        }

Overwrite Variables

If you want to style content based on its relationship with the parent and sibling content, use the :root selector. It enables you to target the highest-level element of the DOM, overwriting css variables.

Copy
:root{
        --defaultFontSize: 12px;
        }