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.
Below are example CSS selectors for Chameleon Tooltips 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 editor styles*/
#chmln .chmln-edit-modal .chmln-inner .chmln-header .chmln-title{ /* the Tooltip title */ }
#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-container { /* the style of the body content */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-body .chmln-body-container 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-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) */
#chmln .chmln-tooltip-<tooltip-id> .chmln-hotspot-spot { /* hotspot selector */ }
#chmln .chmln-edit-modal .chmln-inner .chmln-pointer-highlight { /* the tooltip pointer */ }
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
👉 Have any questions or issues? Review the best way to get help.