Skip to main content

Using Custom CSS to style Embeddables

Explore how you can use Custom CSS to tweak the look of your Banners and Cards

Tiago Mota avatar
Written by Tiago Mota
Updated over 8 months ago

While Chameleon offers many point-and-click styling options, you can also leverage Custom CSS to fine-tune the styling of Embeddables.

🧑‍💼 Chameleon Admins (*if Roles are enabled) can adjust the custom CSS for your account on the Styling page.

Using Custom CSS

You can apply Custom CSS to the style of your Embeddables in the Dashboard (to a Theme) or in the Builder (to a specific Embeddable).

Check out the CSS Overview article to learn how to apply CSS to Chameleon Experiences and see more examples 👇

Custom CSS Overview

In the Builder, you can access the "CSS Cheat Sheet" to copy specific CSS selectors or use AI to generate your custom styles.

List of Banners selectors

👇 Below are the CSS selectors for Banners. Use these to know which elements to target.

  • Target a Pushdown or Cover Banner : #chmln-step-{Step ID} .chmln-inner

  • Target an Embedded Banner: #chmln-step-{Step ID} .chmln-inner .chmln-body-inline-container

  • Update a Banner's body container: #chmln-step-{Step ID} .chmln-body-container .chmln-body-content

  • Adjust a Banner's primary button: #chmln-step-{Step ID} .chmln-cta-region button.chmln-button-primary

  • Adjust a Banner's secondary button: #chmln-step-{Step ID} .chmln-cta-region button.chmln-button-secondary

  • Adjust the Dismiss component on a Banner: #chmln-step-{Step ID} .chmln-close


List of Cards selectors

👇 Below are the CSS selectors for Cards. Use these to know which elements to target.

  • Target an individual Card in a stack: #chmln-step-dialog-{Step ID}

  • Target all the Cards in a stack: .chmln-cards-container .chmln-campaign-{Campaign ID} .chmln-inner

  • Adjust the title on a Card: #chmln-step-{Step ID} .chmln-header .chmln-title

  • Adjust the body on a Card: #chmln-step-{Step ID} .chmln-body-container .chmln-body-content

  • Target the primary button on a specific Card: #chmln-step-{Step ID} .chmln-cta button.chmln-button-primary

  • Target the secondary button on a specific Card: #chmln-step-{Step ID} .chmln-cta button.chmln-button-secondary

  • Adjust the Dismiss component on a specific Card: #chmln-step-{Step ID} button.chmln-close

  • Target the media component on a specific Card: #chmln-step-{Step ID} .chmln-step-media div

👉 Explore more examples of styling Experiences using Custom CSS

Related Articles
Using Custom CSS to style Tours
Using Custom CSS to style Launchers
Using Custom CSS to style Experiences
Using Custom CSS to style Microsurveys
Using Custom CSS to style Tooltips
Did this answer your question?