How to Customize 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. 
Want extra support? 
Upgrade to our Growth plan for 1:1 design support!

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

Still need help? Contact Us Contact Us