How to Create and Apply Flow Styles
To make your flows look and feel like a part of your own product, you can create and save multiple styles.
Accessing your Styles
To access your styles page, click on the Styling option in your dropdown menu or select the Styles tab at my.appcues.com
Using the Basic Editor
Here you'll be presented with some basic styling options and a free-form CSS editor, along with a preview of how the current theme applies to flows. You can adjust a number of standard UI options for flows and hotspots on the Basic tab, plus just about anything you can imagine from the CSS Editor. To get a list of classes you can style with your own CSS, check out this doc.
Once you're happy with the theme you've built, click the Save & Publish button in the upper left to push out your customization. It's important to note that styling changes will effect both live and drafted flows alike.
Creating Multiple Styles
You can create multiple styles to use on a per-flow basis. You can select and edit your styles from the "Choose a theme to edit" dropdown. You can also Delete the selected theme, or Create a new theme. Creating a new theme will copy the selected theme over so that you don't have to start from scratch.
If you had made any styling changes prior to the launch of multiple themes, those settings now make up your default theme, called " Your Default Theme." This default theme applies to any previously published flows. You can still edit your default theme as before, and you will update the styling to new and old flows alike.
It's important to note, if at any point you decide to Delete a theme, all related flows, published or not, will revert to your default theme.
Applying Styles to Flows
To apply a pre-made style to a flow, select the paintbrush icon in your editor. From there, you'll see a dropdown of your saved styles.
Select the one you'd like to use and it will be applied and saved to your flow.
Applying Styles to a Single Step in a Flow
Modals and Slideouts
To add custom CSS to a modal or slideout, click on the <> icon and enter your snippet. Save your styling by clicking the <> icon once more.
Note: Any CSS you add to each page in the modal will apply to all pages of the modal. To keep things in organized, we recommend adding custom CSS only to the first page in a set of modals.
Tooltips and Hotspots
To add custom CSS to a singular tooltip or hotspot, click on the <> icon and enter your snippet. Save your styling by clicking the <> icon once more.