Styling Appcues with Custom CSS

Some advanced users or users looking for very special styling might want to use their own CSS. This is a guide to the Appcues-specific CSS selectors and classes that you can target. All of these selectors can also be seen in context within the browser inspector. If you're not comfortable exploring the browser inspector, we suggest you do not edit the CSS and do exercise caution if you decide to. If you do, please 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.   

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. If you have any questions, don't hesitate to reach out at support@appcues.com.

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 their 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.]*/
}