Styling Appcues with Custom CSS
Table of Contents
This is a guide to the CSS selectors inside Appcues flows and steps. If you're not sure what CSS selectors are, please refer to this guide.
Writing custom CSS is advanced. We make this stuff available, but it's really hard to provide support for it. Please make sure you or someone on your team is comfortable editing CSS before you begin.
One piece of advice: make sure you preview and test any themes you alter using custom CSS. This will ensure customizations do not cause any unforeseen issues with your flow content or the underlying page.
A few more notes:
- please do not use body or html tags in the custom CSS, as it may cause your flow to break or not show when the flow has been pushed live.
- please make sure you test for cross-browser capability where applicable. While we do our own testing, we are unable to guarantee yours will operate as expected.
- key: The selectors listed below are subject to change at any time. While these are a good start for sharing with your team, use the browser inspector to determine up-to-date selectors.
Intro to custom CSS
Flow container appcues
This element wraps an entire flow.
Progress bar .appcues-progress
A CSS progress bar that's updated as users complete each step.
Steps appcues cue
This is where the main content lives. Feel free to assign styles here as necessary.
Navigation buttons .appcues-button, .appcues-button-success
Button arrows are set using the CSS content attribute and unicode characters. You can remove/edit them by changing the CSS.
Backdrop .appcues-backdrop
This is the background that covers the page during a "lights off" flow.
Tooltip .tooltip.panel-content
This the is where tooltip content lives.
Hero Headers appcues cue .apc-hero h1 and appcues cue .apc-hero h2
The heading (h1) and subheading (h2) for the Hero heading component.
Example CSS
/*
It's dangerous to go alone! Take this.
(Not actually dangerous, but hopefully these selectors
will help you make your flows look beautiful!)
/|
/ |
/ |
/ |
/ |
/ |
\ |
/| \ |
/ | \ |
/ | \ |
/___| \_|
APPCUES CSS SELECTORS
*/
/************************************/
/* Appcues Base Presets */
/*** Remove next/previous arrows */
appcues .appcues-actions-right .appcues-button { padding-right: 18px; }
appcues .appcues-actions-right .appcues-button:after { content: none; }
appcues .appcues-actions-left .appcues-button { padding-left: 18px; }
appcues .appcues-actions-left .appcues-button:before { content: none; }
/*** Adjust style of progress bar */
appcues .appcues-progress { background-color: white; height: 7px; border: 0; }
appcues .appcues-progress .appcues-progress-bar { transition:width 0.5s ease 0.07s; }
appcues .appcues-progress .appcues-progress-bar:not([aria-valuenow='100']) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/*** Adjust margins & padding */
appcues cue { min-height: 100px !important; padding: 22px 54px 82px; }
appcues cue .apc-hero { margin: -22px -54px 0; }
/* Fix up Hero typography */
appcues cue .apc-hero h2 { font-size: 18px; font-weight: bold; }
appcues[data-pattern-type=modal] cue {
box-shadow: 0 0 18px rgba(0,0,0,0.25);
}
.tooltip .panel { padding: 9px 12px 10px; }
/*** Adjust typography */
appcues cue h1, .tooltip h1 { font-weight: 200; font-size: 32px; margin-top: 0.5em; -webkit-font-smoothing:antialiased; }
appcues cue h2, .tooltip h2 { font-weight: 400; font-size: 24px; margin-top: 0.5em; -webkit-font-smoothing:antialiased; }
appcues cue h3, .tooltip h3 { font-weight: 600; letter-spacing: -0.01em; font-size: 20px; -webkit-font-smoothing:antialiased; }
appcues cue h4,h5 { letter-spacing: -0.01em; margin-top: 0.75em; -webkit-font-smoothing:antialiased; }
p, li {
line-height: 1.6em;
}
/*** 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;
}
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;
text-decoration: underline; /* a18y */
}
/*** Adjust skip X */
appcues .appcues-skip a { background: none; right: 6px; font-size: 28px; }
.tooltip .panel .appcues-skip { color: #ccc; }
/* End Appcues Base */
/************************************/
/*___Buttons and Links___*/
.appcues-actions-right {
/*[The section of the button row which hold the 'Next' or righthand side button.]*/
}
.tooltip .content .panel .panel-content-actions .appcues-actions-right {
/*[Full selector to edit .appcues-actions-right in hotspots/tooltips]*/
}
appcues cue .appcues-actions-right {
/*[Full selector to edit .appcues-actions-right in modals/slideouts]*/
}
.appcues-actions-left {
/*[The section of the button row which hold the 'Prev' or lefthand side button.]*/
}
.tooltip .content .panel .panel-content-actions .appcues-actions-left {
/*[Full selector to edit .appcues-actions-left in hotspots/tooltips]*/
}
appcues cue .appcues-actions-left {
/*[Full selector to edit .appcues-actions-left in modals/slideouts]*/
}
.appcues-button {
/*[Generic selector for any button.]*/
}
.appcues-button-success {
/*[Selector for the 'Next' buttons (buttons which advance the step of the flow).]*/
}
.panel .panel-content-actions .appcues-actions-right > .appcues-button.appcues-button-success {
/*[Full selector to edit .appcues-button-success in hotspots/tooltips]*/
}
appcues cue .appcues-actions-right > .appcues-button.appcues-button-success {
/*[Full selector to edit .appcues-button-success in modals/slideouts]*/
}
.panel .panel-content-actions .appcues-skip {
/*[Full selector to edit .appcues-skip in tooltips/hotspots] (Hide these tips)*/
}
appcues .appcues-skip {
/*[Full selector to edit .appcues-skip in modals/slideouts] (X button to close)*/
}
appcues[data-pattern-type=shorty] cue {
/*[Selector for slideouts specifically]*/
}
appcues[data-pattern-type=modal] cue {
/*[Selector for modals specifically]*/
}
/*___Modals and Slideouts___*/
appcues {
/*[This element wraps the entire modal or slideout.]*/
}
appcues cue {
/*[This is where the main content for modals and slideouts lives.]*/
}
appcues .appcues-backdrop[data-pattern-type=modal] {
/*[The backdrop (darkened background) for modals.]*/
}
appcues .appcues-progress {
/*[The progress bar which indicates how far a user is in the flow]*/
}
appcues cue .apc-hero {
/*[This is the selector for a hero image.]*/
}
appcues cue .appcues-actions {
/*[The row where all the buttons are placed.]*/
}
/*___Hotspots and Tooltips___*/
.tooltip .content .panel {
/*[This is selector for the tooltip panel itself. The styles to the arrow can be accessed using the ::before selector (see below)]*/
}
.tooltip .content .panel .panel-content {
/*[This is the selector for any content within the tooltip. This applies to both body text and the actions row.]*/
}
.tooltip .content .panel .panel-content-actions {
/*[The specific container selection for the row with buttons/actions.]*/
}For specific styling information check out Customizing Hotspots & Tooltips and Customizing Modals & Slideouts.