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, but do not use body or html tags in the HTML component while building your flows as it may cause your flow to break or not show when the flow has been pushed live.

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 style 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>

Adding styling to a step using the HTML block:

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 unselect Show progress bar in step settings or hide the progress bar in your theme CSS 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 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 */ appcues[data-pattern-type=modal] cue {
    overflow-y: auto;
    height: 480px;
    min-height: 0px;
}

/* For Slideouts */ appcues[data-pattern-type=shorty] cue {
    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 */
}<br>

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 modal background color white for top half and black for bottom half */
appcues[data-pattern-type=modal] cue {
  background: linear-gradient(
    to bottom, 
    #ffffff 0%, 
    #ffffff 50%, 
    #000000 50%, 
    #000000 100%
  );
}


/* 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 slideout background color white for top half and black for bottom half */
appcues[data-pattern-type=shorty] cue {
  background: linear-gradient(
    to bottom, 
    #ffffff 0%, 
    #ffffff 50%, 
    #000000 50%, 
    #000000 100%
  );
}

/* 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 Appcues 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.

Customizing Ratings and Radio Buttons 

By default, the rating 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;
}

To style ratings:

appcues cue > section .form-field .rating-option span {
  /* Rating span */
  background-color: blue;
  border: 1px solid #777;
}

appcues cue > section .form-field .rating-option span:hover {
  /* Rating span hover */

  background-color: orange;
  border: 1px solid #777;
}

appcues cue > section .form-field .rating-option input[type=radio]:checked + span {
  /* Rating span after selected */
  
  background-color: orange;
  border: 1px solid #777;
}

appcues cue > section .form-field .rating-option span {
  /* Rating selection text */
  font-size: 30px !important;
  color: green !important;
}

appcues cue > section .form-field .rating-labels .right small {
  /* Rating helper text */

  font-size: 18px;
}

appcues cue > section .form-field .rating-labels .left small {
  /* Rating helper text */
  font-size: 18px;
}

To change the color of radio select buttons:

/*Change radio select input color*/<br>appcues cue>section .form-field label.field-option input[type=radio]:checked+span:before {
background-color: green;
}