Chameleon

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

🧑‍💼 <a href="https://help.chameleon.io/en/articles/3698941-how-can-i-manage-my-team-s-roles-and-permissions">Chameleon Admins</a> (*if Roles are enabled) can adjust the custom CSS for your account on the <a href="https://app.trychameleon.com/styling/custom-css" rel="nofollow noopener noreferrer" target="_blank">Styling page</a>.

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

___________________________________________________________

👇 Below are the <a href="https://help.trychameleon.com/becoming-a-chameleon-expert/configuring-the-steps-within-a-tour/how-chameleon-selects-the-right-element" rel="nofollow noopener noreferrer" target="_blank">CSS selectors</a> for Banners. Use these to know which elements to target.

Target a <a href="https://help.chameleon.io/en/articles/2472292-understanding-banners#h_cf37290984">Pushdown or Cover</a> Banner : <code>#chmln #chmln-step-{Step ID} .chmln-inner</code>

Target an <a href="https://help.chameleon.io/en/articles/2472292-understanding-banners#h_cf37290984">Embedded</a> Banner: <code>#chmln #chmln-step-{Step ID} .chmln-inner .chmln-body-inline-container</code>

Update a Banner's body container: <code>#chmln #chmln-step-{Step ID} .chmln-body-container .chmln-body-content</code>

Adjust a Banner's primary button: <code>#chmln #chmln-step-{Step ID} .chmln-cta-region button.chmln-button-primary </code>

Adjust a Banner's secondary button: <code>#chmln #chmln-step-{Step ID} .chmln-cta-region button.chmln-button-secondary</code>

Adjust the <a href="https://help.chameleon.io/en/articles/1663496-how-to-use-dismiss">Dismiss</a> component on a Banner: <code>#chmln #chmln-step-{Step ID} .chmln-close</code>

- Target a <a href="https://help.chameleon.io/en/articles/2472292-understanding-banners#h_cf37290984">Pushdown or Cover</a> Banner : <code>#chmln #chmln-step-{Step ID} .chmln-inner</code>
 
- Target an <a href="https://help.chameleon.io/en/articles/2472292-understanding-banners#h_cf37290984">Embedded</a> Banner: <code>#chmln #chmln-step-{Step ID} .chmln-inner .chmln-body-inline-container</code>
 
- Update a Banner's body container: <code>#chmln #chmln-step-{Step ID} .chmln-body-container .chmln-body-content</code>
 
- Adjust a Banner's primary button: <code>#chmln #chmln-step-{Step ID} .chmln-cta-region button.chmln-button-primary </code>
 
- Adjust a Banner's secondary button: <code>#chmln #chmln-step-{Step ID} .chmln-cta-region button.chmln-button-secondary</code>
 
- Adjust the <a href="https://help.chameleon.io/en/articles/1663496-how-to-use-dismiss">Dismiss</a> component on a Banner: <code>#chmln #chmln-step-{Step ID} .chmln-close</code>

👇 Below are the <a href="https://help.trychameleon.com/becoming-a-chameleon-expert/configuring-the-steps-within-a-tour/how-chameleon-selects-the-right-element" rel="nofollow noopener noreferrer" target="_blank">CSS selectors</a> for Cards. Use these to know which elements to target.

Target an individual Card in a stack: <code>#chmln #chmln-step-dialog-{Step ID}</code>

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

Adjust the title on a Card: <code>#chmln #chmln-step-{Step ID} .chmln-header .chmln-title</code>

Adjust the body on a Card: <code>#chmln #chmln-step-{Step ID} .chmln-body-container .chmln-body-content</code>

Target the primary button on a specific Card: <code>#chmln #chmln-step-{Step ID} .chmln-cta button.chmln-button-primary</code>

Target the secondary button on a specific Card:<code> #chmln #chmln-step-{Step ID} .chmln-cta button.chmln-button-secondary</code>

Adjust the <a href="https://intercom.help/chameleon/en/articles/1663496-how-to-use-dismiss" rel="nofollow noopener noreferrer" target="_blank">Dismiss</a> component on a specific Card:<code> #chmln #chmln-step-{Step ID} button.chmln-close</code>

Target the media component on a specific Card: <code>#chmln #chmln-step-{Step ID} .chmln-step-media div</code>

- Target an individual Card in a stack: <code>#chmln #chmln-step-dialog-{Step ID}</code>
 
- Target all the Cards in a stack: <code>#chmln .chmln-cards-container .chmln-campaign-{Campaign ID} .chmln-inner</code>
 
- Adjust the title on a Card: <code>#chmln #chmln-step-{Step ID} .chmln-header .chmln-title</code>
 
- Adjust the body on a Card: <code>#chmln #chmln-step-{Step ID} .chmln-body-container .chmln-body-content</code>
 
- Target the primary button on a specific Card: <code>#chmln #chmln-step-{Step ID} .chmln-cta button.chmln-button-primary</code>
 
- Target the secondary button on a specific Card:<code> #chmln #chmln-step-{Step ID} .chmln-cta button.chmln-button-secondary</code>
 
- Adjust the <a href="https://intercom.help/chameleon/en/articles/1663496-how-to-use-dismiss" rel="nofollow noopener noreferrer" target="_blank">Dismiss</a> component on a specific Card:<code> #chmln #chmln-step-{Step ID} button.chmln-close</code>
 
- Target the media component on a specific Card: <code>#chmln #chmln-step-{Step ID} .chmln-step-media div</code>

👉 <a href="https://help.trychameleon.com/en/articles/3338736-styling-with-custom-css" rel="nofollow noopener noreferrer" target="_blank">Explore more examples of styling Experiences using Custom CSS</a>

List of Banners selectors

List of Cards selectors