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, and Slideouts to 400px wide. You Can Adjust the default width of modals or slideouts to make them larger or smaller using the following code

/*For Modals*/
appcues[data-pattern-type=modal] cue, appcues[data-pattern-type=modal] .appcues-progress, appcues[data-pattern-type=modal] .appcues-skip {
    width: 480px;
    min-width: 480px;
    max-width: 480px;
}


/*For Slideouts*/
appcues[data-pattern-type=shorty] modal-container{
    width: 300px;
    min-width: 300px;
    max-width: 300px;
}

  

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: 480px;
}

  

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

Still need help? Contact Us Contact Us