Styling Appcues with Custom CSS

Most styling can be done without CSS by using our built-in controls in the Appcues styling tool.  Learn about that here.

However, some advanced users or users looking for very special styling might want to use their own CSS. This is a guide to the Appcues-specific CSS selectors and classes that you can target. All of these selectors can also be seen in context within the browser inspector. If you're not comfortable exploring the browser inspector, we suggest you do not edit the CSS and do exercise caution if you decide to. 

Please note that our markup is subject to change. While we test our own styling operators across browser versions, we are unable to guarantee that your custom CSS will operate as expected. If you have any questions, don't hesitate to reach out at support@appcues.com.

Flow container appcues

This element wraps an entire flow.

Progress bar .appcues-progress

A CSS progress bar that's updated as users complete each step.

Steps appcues cue

This is where the main content lives. Feel free to assign styles here as necessary.

Navigation buttons .appcues-button, .appcues-button-success

Button arrows are set using the CSS content attribute and unicode characters. You can remove/edit them by changing their CSS.

Backdrop .appcues-backdrop

This is the background that covers the page during a "lights off" flow.

Tooltip .tooltip.panel-content

This the is where tooltip content lives.

Hero Headers  appcues cue .apc-hero h1 and appcues cue .apc-hero h2

The heading (h1) and subheading (h2) for the Hero heading component.

More resources: 

Still need help? Contact Us Contact Us