What can custom CSS do?

You can apply CSS (stylesheets that codify your brand) to Chameleon Experiences to ensure that you have granular control over all styling elements. You can use this to more specifically match the styling of Experiences 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 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. 

See the list of selectors used for different Experiences:

1. Identify Chameleon Elements

Identify the selectors you want to target (use links in list above), or by 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 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

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?