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 Styles page) supports. Copy, paste, and edit the snippets below to take your flows to another level.

If you'd like to apply these changes to a single step in a flow, place and edit these snippets into the <> HTML editor of the individual modal or slideout.

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. 

Single-Button Flows 


.appcues-button, .appcues-button-success {
    border-radius:3px;
    padding:15px;
}

.appcues-actions-right {
    width: 100%!important;
    text-align: center!important;
}

.appcues-actions-right .appcues-button:after {
    display: none !important;
}
.appcues-actions-left .appcues-button:before {
    display: none !important; 
}
.appcues-button {
    padding: 10px 15px 10px 15px !important;
}<br>

Rounded Modals (with Rounded Buttons)

.appcues-button, .appcues-button-success {
    border-radius: 12px;
}

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

appcues cue {
    border-bottom-left-radius: 30px; /* These numbers will adjust your rounded border */
    border-bottom-right-radius: 30px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

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

.appcues-progress {
    visibility: hidden;
 }

.appcues-skip>a { /* This section affects your 'skippable' button*/
    cursor: pointer;
    display: block;
    background-color: transparent;
    color: #000;
    opacity: .4;
    border-bottom-left-radius: 3px;
    border-top-right-radius: 30px; 
    padding: 10px 10px 10px;
    position: absolute;
}

Styling Modals or Slideouts specifically

If you want to change the style of just modals, or just slideouts, without changing the other, 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. 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;
}

Still need help? Contact Us Contact Us