While Chameleon offers many point-and-click styling options, you can also leverage Custom CSS to fine-tune the styling of your Tours.
🧑💼 Chameleon Admins (*if roles are enabled) can also adjust the custom CSS for your account on the Styling page.
Check out the CSS Overview article to learn how to apply CSS to your Experiences and get more examples 👇
Below are example CSS selectors for Chameleon Tour Steps and their components. You can use these to help guide which elements to target.
We recommend you test adding your own style settings in all cases.
/* New step editor styles*/
#chmln .chmln-edit-modal .chmln-inner .chmln-header .chmln-close{ /* the close button */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-media-body .chmln-step-media { /* the style of the image or video */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-body .chmln-body-content { /* the style of the body content */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-body .chmln-body-content h4 { /* the style of a particular header size in the body */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-footer { /* the style of the footer area at the bottom of the step */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-progress{ /* the style of the progress bar */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-progress .chmln-progress-dot{ /* the style of the progress bar dot*/ }
#chmln .chmln-edit-modal .chmln-inner .chmln-progress .chmln-progress-text{ /* the style of the progress bar text*/ }
#chmln .chmln-edit-modal .chmln-inner .chmln-cta-region button.chmln-action{ /* the style of the buttons */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-cta-region button.chmln-button-primary { /* the style of all primary buttons */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-cta-region button.chmln-button-secondary { /* the style of all secondary buttons */ }
#chmln .chmln-edit-modal .chmln-lightbox-highlight .chmln-lightbox-opening-row .chmln-lightbox-opening{ /* the style of the shroud highlight (a CSS shadow) */
box-shadow: 0 0 100px 2000px rgba(0,0,0,0.4) !important; }
ℹ box-shadow sizes over 2000 px can be unpredictable on Safari and Firefox.
Sometimes you may want to create styles specifically for one Tour or a single step.
You can then create custom CSS to target this ID. For example, below are example CSS selectors for a specific step.
#chmln .chmln-edit-modal.chmln-step-[STEP-ID] .chmln-inner .chmln-body .chmln-body-content {
font-family: 'Helvetica Neue', sans-serif !important;
}Replace the [STEP-ID] with the Step id of the Step you want to target
ℹ You can also target entire Tours by leveraging the Experience ID
Show RTL Tours to match other languages
#chmln .chmln-step-[Step ID] .chmln-inner
{ direction: rtl !important;
}
ℹ In this case your Builder message editor will appear LTR but the end-user Experience will be RTL.
Increase the "Pointer" size on a Step
#chmln #chmln-step-[Step ID]
svg.chmln-pointer-highlight
{ width:50px;
height:50px;
top:15px;
left:-50px;
}