CSS customization in Editor

Some things you can do

Change appearence more freely.

Add transition and animation effects.

Guidelines

Changes to both css and event scripts are not applied to campaign inside the Campaign Designer, they only apply to the live campaign and preview. To see the changes you need to either preview the campaign or publish it.

Try to find specific selectors, if you style div { background-color: red } all divs in the widget will have a red background.

You might need to set !important for the change to take effect.

Most common selectors

How to select the widget Canvas (also called Step or State).

div.state.state-regular[data-state="step-id"]

Step-id can be found in 3 ways:

1. With the developer console:

2. With network log:

3. With query string: Only visible if you have 2 or more steps:

Target Text: With ID

Select the text element and name the ID, for example: custom > "MY-ID"

Get the Top-most DIV

div[data-external-id="MY-ID"] {
    /* Add your styles here */
    }

Targeting P inside div

div[data-external-id="MY-ID"] .text-content.actual-element p {
    /* Add your styles here */
    }