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 =) */ 
</style>

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 */
}

   

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 {
    width: 720px;
    min-width: 720px;
}

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

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

/* 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;
}

  

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 */
}<br>
	

   

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 "close" X appears in the upper right. You can adjust the style of that 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{

}

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!

15445dc95cf276cfd110464caa720f0a.png

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.

    6bdf26d0e8ce7233319b5956d011d876.png

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 {
display:none;
}