While Chameleon offers many point-and-click styling options, you can also leverage custom CSS to more finely-tune the styling of your Chameleon Experiences, including Tours, Launchers, Microsurveys, etc.  

👉 Explore the styling options offered by Chameleon

You can input your CSS within the Chameleon Builder by navigating to the Styling section. 

Note: If you are on a legacy plan, custom CSS may not be available on your account. You can get access to custom CSS by upgrading to our Startup plan here

List of selectors

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-footer .chmln-progress{ /* the style of the progress bar */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-footer .chmln-progress .chmln-progress-dot{ /* the style of the progress bar dot*/ }
#chmln .chmln-edit-modal .chmln-inner .chmln-footer .chmln-progress .chmln-progress-text{ /* the style of the progress bar text*/ }
#chmln .chmln-edit-modal .chmln-inner .chmln-footer .chmln-cta-region button.chmln-action{ /* the style of the buttons */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-footer .chmln-cta-region button.chmln-button-primary { /* the style of all primary buttons */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-footer .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; }
/*NOTE: box-shadow sizes over 2000px can be unpredictable on Safari and Firefox*/


Sometimes you may want to create styles specifically for one Tour or a single step.

👉 Learn how to find the ID of your Experience

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;
}
/*NOTE: Replace the [STEP-ID] with the Step id of the Step you want to target.*/

👉 Explore some examples for styling Experiences using Custom CSS


Learn more

Did this answer your question?