Using Your Own Style Sheets

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

Create a New Style Sheet

Creating a new style sheet in FintechOS Studio is an easy task:

  1. From the menu, click Advanced > Style Sheets. The Style Sheets List page appears.
  2. At the top-right corner of the page, click the Insert icon. The Add Style Sheet page appears.
  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.
    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. At the top-right corner of the page, click the Save and close icon. The new style sheet will be displayed in the Style Sheets List page.

Use Style Sheet

You can apply your own style sheets to the following entities and their corresponding attributes:

Entity Attributes
Entity Form Before Events, After Events
Entity Form Section After Events, After Section Save, Before Section Save
Custom Form After Generate Events
Entity View After Generate Js
HtmlWidget JavaScript

To apply your own colors and font styles you have created in your own style sheet, on the desired data form or digital journey, in the Code tab use the ebs.importStyleSheet method.

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

For information on how to use these methods, see Attribute Control Methods.

Now you can apply and use your own style sheets. For information on how to do it, see Manage Style Sheets for B2C User Journeys.

Limit Style Impact to Current Form

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

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

>.form_myEntity_myForm .mySelector{
        color: #f00;

Overwriting 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.

        --defaultFontSize: 12px;