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

Apply Style Sheets (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 your own style sheets to the following entities and their corresponding attributes:

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

:root{
        --defaultFontSize: 12px;
        }