Customizing Modals & Slideouts (CSS)

With a little extra CSS, you can enhance your modals and slideouts on top of the customization our basic style editor (located on your Themes page) supports. Copy, paste, and edit the snippets below to take your flows to another level.

Step Level Use?

The below snippets are formatted for use in the CSS section of the Theme that you'll be applying to your flow. However, if you'd like to use any of these snippets to resize a particular step (such that other steps aren't affected), wrap any of the below snippets in a <style> tag and place in the HTML component of the step you'd like to modify. For example:

<style> /* Insert snippet below for step level use =) */ 

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. 

ProTIpDo not use body or html tags in the HTML component while building your flows, as it can cause your flow to break or not show when pushed live.


Rounded Modals

You can choose "Round" for Button Roundness in your theme to match:

Note: This will ONLY work for modals. This CSS will not have the same effect for Slideout patterns.

/* Note: make sure to choose "Hide the progress bar" in your theme first. */

appcues cue .apc-hero {
    border-top-left-radius: 18px; /* If you're using a hero, adjust these numbers*/
    border-top-right-radius: 18px;

appcues cue {
    border-radius: 18px; /* This is the roundness of the borders */

modal.container-fullscreen, modal.container, .appcues-progress, .appcues-skip, .active {
    box-shadow: none;

.appcues-skip >a { /* This section affects your 'skippable' button in the top-right if it appears */
    border-top-right-radius: 18px; /* Match your chosen radius here */

Squared Modals

By default, Modals and Slideouts have slightly rounded top corners. To make them completely squared off instead, add the below CSS snippet.

/* To square off top corners of modals and slideouts */
appcues cue, appcues .appcues-progress { 
border-radius: 0;

Adjusting the width

Modals default to 650px wide. You Can Adjust the default width of modals to make them larger or smaller using the following code.

Please note that there is an upper-limit to the size of modals. To circumvent this, change the "min-width" to the desired size as well, shown below.

/* To make a modal slightly wider */
appcues[data-pattern-type=modal] > cue, appcues[data-pattern-type=modal] > div {
    width: 720px;
    min-width: 720px;

/* To make modals slightly narrower */
appcues[data-pattern-type=modal] > cue, appcues[data-pattern-type=modal] > div {
    width: 580px;
    min-width: 580px;

/* To make a slideouts slightly wider */
appcues[data-pattern-type=shorty] modal-container {
    width: 640px;
    min-width: 640px;

/* To make slideouts slightly narrower */
appcues[data-pattern-type=shorty] modal-container {
    width: 580px;
    min-width: 580px;


Adjusting the height

Sometimes, you want a consistent height for all modals or modal steps. To accomplish that, use the following.

/* For Modals */
appcues[data-pattern-type=modal] cue {
    height: 420px;
    min-height: 420px;

/* For Slideouts */
appcues[data-pattern-type=shorty] cue {
    height: 480px;
    min-height: 0px;

If you want to make the height of the container smaller than the contents you'll want to make sure that the modal or slideout is set to automatically add a slider if needed.

/* For Modals */ <br>appcues[data-pattern-type=modal] {
    overflow-y: auto;
    height: 480px;
    min-height: 0px;
}<br>/* For Slideouts */ <br>appcues[data-pattern-type=shorty] {
    overflow-y: auto;
    height: 480px;
    min-height: 0px;

Styling link color

If you want to change the link color on all your patterns, use the following:

/*** Adjust links in content */
appcues cue section a[data-step], appcues cue section a[href], .tooltip p a[data-step], .tooltip p a[href] {
    color: #3388ee; /* Choose your link color here */
appcues cue section a[data-step]:hover, appcues cue section a[href]:hover, .tooltip p a[data-step]:hover, .tooltip p a[href]:hover {
    color: #1166cc; /* Choose your link hover (mouse over) color here */
    text-decoration: underline; /* a18y */

Changing the color of the progress bar

/* change fill color of the progress bar */
appcues .appcues-progress-bar {
background-color: #CA16D6;

Styling form text input

/* Change the color of the small input text */
appcues cue .form-field-text input { color: #CA16D6; }

/* Change the color of the large input text */
appcues cue .form-field-textarea textarea { color: #CA16D6; }

Styling form labels

/* Make form labels font size bigger */
appcues cue > section .step-action-form label.label-display, appcues cue > section .form-field label.label-display {
font-size: 20px;

Styling Modals or Slideouts specifically

If you want to change the style of just Modals, or just Slideouts, without changing the other patterns, you can select each pattern specifically to modify its styles. appcues[data-pattern-type=modal] selects modals only, while appcues[data-pattern-type=shorty] chooses slideouts. You can then add style rules within those to apply only to slideouts or modals. Here are some examples.

/* Make Modals have a bright background color */
appcues[data-pattern-type=modal] cue {
    background-color: chartreuse;

/* Make Slideouts have a blue border */
appcues[data-pattern-type=shorty] cue {
    border: 2px solid skyblue;

You can also change anything within a slideout or a modal, specifically for slideouts or modals.

/* Give slideout buttons a rounded button style */
appcues[data-pattern-type=shorty] cue a.appcues-button {
    border-radius: 50px;

/* Make modal 2nd-level headings larger */
appcues[data-pattern-type=modal] cue h2 {
    font-size: 32px;


Centering a modal

You can adjust the top padding of the appcues element to move it closer to the center.

appcues[data-pattern-type=modal] {
    padding-top: 20%; /* Adjust based on how far you want it from the top of the page */

Note: To center a slideout, choose Centered for the position in the Flow Editor.


Changing the style of the Skip X

If you choose "Skippable" in the Flow Editor, then a Skip X appears in the upper right. You can adjust the style of the Skip X to better contrast with your application with:

/* This will remove the background and change the color of the X */
appcues .appcues-skip > a {
    background: none;
    right: 6px;
    font-size: 28px;
    color: #cccccc; /* A medium gray -- update as needed */
    opacity: 0.5;

appcues .appcues-skip > a:hover {
    /* Make non-transparent when mouse is over */
    opacity: 1;

/* This can append to move the X with the modal */ 

appcues[data-pattern-type=modal] cue,appcues .appcues-skip,appcues .appcues-progress{


/* This can append to move the X with the slideout */ 

appcues[data-pattern-type=shorty] cue,appcues .appcues-skip,appcues .appcues-progress{


Accessibility Tip: You can check the contrast ratio of your button using the Chrome DevTools. To do this, open your flow in the Flow Builder, open the Chrome DevTools (Menu → More Tools → Developer Tools), Click the Inspect icon in the top-left corner of DevTools, and move your mouse pointer over the Close 'x'. Accessibility requirements suggest a contrast of at least 4.5.

Contrast Ratio Screenshot

Using CSS To Style Buttons

You can add your own customizable buttons in your Modals and Slideouts. By default, these buttons will adopt the styles set in the theme. To change the button background color and button font color, you can edit your Theme's colors or use this article to create custom buttons with different styling as you see below!


To have two different button colors on the same modal (pictured above):
  1. Click the add "+" button on the right and choose Button to add the custom buttons within the same row. Here is our help doc with more info about creating custom buttons.  
  2. After the buttons have been configured, on the same line as the recently added buttons, click the + button and choose HTML 
  3. Enter the HTML code to change the color and save the changes.


Here's the needed CSS in plaintext... 

<style>   .zone-container:nth-of-type(1) a.appcues-button {     background-color: gray !important;   }   .zone-container:nth-of-type(2) a.appcues-button {     background-color: blue !important;   } </style>

Please note: you can use "blue" or "0000FF" when changing the colors in the code above.

Customizing Ratings and Radio Buttons 

By default the ratings option starts out at 0 and increments up.
For surveys and forms it's common to want to have the selectable options start at 1 and increment from there.
To switch to this styling you can add the following CSS to the theme that you're using.

.rating-options .rating-option:first-of-type {

To change the color of radio select buttons

/*Change radio select input color*/
appcues cue>section .form-field label.field-option input[type=radio]:checked+span:before { background-color: green; }
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.