For an overview of how to use custom CSS to style your Chameleon experiences, please read this article first

You can use custom CSS (by adding it within the Styling section) to adjust the design of your Tours. 

Note: this may not be available on your plan. You can get access to custom CSS by upgrading to our Standard plan here

Below are example CSS selectors for Chameleon steps and their parts. 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-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*/

Did this answer your question?