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.  

You can adjust custom CSS for your Chameleon account on the Styling page.

List of Tours 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 2000 px can be unpredictable on Safari and Firefox

Style a particular Tour or Step

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?