Submit Article Requests

Do you have a suggestion for an article you would like to see created?
Feel free to submit this form and add your suggestions to our document board.

Please fill out the contact form below and we will reply as soon as possible.

  • Appcues Certifications & Training
  • Contact Us
  • Home
  • User Experiences
  • Customization & Styling

Styling Appcues with Custom CSS

Updated at November 28th, 2022

Submit Article Requests

Do you have a suggestion for an article you would like to see created?
Feel free to submit this form and add your suggestions to our document board.

Please fill out the contact form with the details about the help content you'd like to see.

  • Installation & Developers
    Installing Appcues Installing Appcues Mobile API & Data Troubleshooting Extras
  • User Experiences
    Web Experiences Building Web Experiences Building Mobile Experiences Customization & Styling Targeting Studio Troubleshooting Use Cases FAQ
  • Mobile
    Installation & Overview Building Mobile Experiences Mobile Analytics Troubleshooting Mobile Use Cases
  • Account Management
    Subscription Users & Data
  • Analytics
    Experience and Event Analytics Data
  • Best Practices
    Use Cases Pro Tips PLG FAQ
  • Integrations
    Integration Documents Use Cases Resources
  • Post-mortem
    System Incidents
+ More

Table of Contents

Intro to custom CSS Progress bar .appcues-progress Steps appcues cue Navigation buttons .appcues-button, .appcues-button-success Backdrop .appcues-backdrop Tooltip .tooltip.panel-content Hero Headers appcues cue .apc-hero h1 and appcues cue .apc-hero h2 Example CSS

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.

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • Targeting Flows
  • Building Flows
  • NPS Overview
  • Using Custom Fonts
Appcues logo

Product

Why Appcues
How it works
Integrations
Security
Pricing
What's new

Use cases

User Onboarding Software
Feature Adoption Software
NPS & Surveys
Announcements
Insights
Mobile Adoption

Company

About
Careers
we're Hiring

Support

Developer Docs
Contact

Resources

The Appcues Blog
Product Adoption Academy
GoodUX
Case studies
Webinar Series
Made with Appcues
Appcues University

Follow us

Facebook iconTwitter icon greyLinkedin iconInstagram icon
© 2022 Appcues. All rights reserved.
SecurityTerms of ServicePrivacy Policy
Expand