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)

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 Experiences 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

Chameleon Selectors

To see how to apply custom CSS to the following Experiences, see the relevant articles: 

My styles are overriding

If a selector you're using is not overriding due to CSS specificity you can add the !important specifier to the rule that is not being applied. Additionally, adding the prefix  #chmln-dom before #chmln adds another level of id-based specificity that may prove useful.

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, our powerful merge tags can also be used in Custom CSS. If that's not enough for your use case, we also have the option of using our custom helpers API to extend the merge-tags with custom code.

Please email us if you would like this functionality enabled for your account and to discuss how best to leverage this advanced functionality. 

Did this answer your question?