What can custom CSS do?

You can apply CSS (stylesheets that codify your brand) to Chameleon tours to ensure that you have granular control over all styling elements. You can use this to more specifically match the styling of tours to your application. 

While many common styling attributes (such as color, fonts, text etc.) are changeable from our point-and-click styling editor, you may want further control over items such as:

  • Line spacing
  • Borders and shadows
  • Positioning of certain components (e.g. dismiss cross)
  • Color gradients
  • Font stacks (learn more here)

🔒 Note: This is only available on custom / advanced plans. If you'd like this feature, email us

To do this, you can add custom CSS styling within the Tour Styling section of the Chameleon Editor. 

❗️ Note: if you are using Custom CSS (if anything is present in the input field) this will take precedence for any other point-and-click styling changes you make from the Chameleon Editor directly.

How to use custom CSS

Custom CSS works by targeting specific elements of Chameleon to change styling. 

To use this, first you have to identify the Chameleon element you would like to target, then add the specific styling in the custom CSS field. 

1. Identify Chameleon Elements

We recommending using the Elements panel in Chrome's Developer tool to inspect elements, and identify the css style properties you should use. 

2. Edit / test the CSS in browser

We suggest that you first change the CSS locally within your browser, from within the Developer Tools, so you can confirm that the observed style is as you expected.

You may need to specify element styles with an !important tag. 

3. Add styles to CSS input field

Once you're satisfied, you can then add this code into the CSS input field within the Tour Styling section.

💡 Tip: The example modal to the right of the Chameleon Editor Sidebar previews your current style, and should update automatically. If your expected changes do not appear, review your CSS to ensure it's targeting the correct element

Selectors guide

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-media-body .chmln-body .chmln-body-content { /* the style of the body content */ }
#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*/

Variable Custom CSS

If you would like to adjust the CSS applied based on the user (or user group), for example, to change the styling based on the user's individual or company settings, then this is also possible via our custom helpers API

Please email us if you would like this functionality enabled for your account. 

Did this answer your question?