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 yesterday

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.

Check out the CSS Overview article to learn how to apply CSS to Chameleon Experiences and see more examples πŸ‘‡


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 #chmln-step-{Step ID} .chmln-inner

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

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

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

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

  • Adjust the Dismiss component on a Banner: #chmln #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 #chmln-step-dialog-{Step ID}

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

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

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

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

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

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

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

Did this answer your question?