What can custom CSS do?

You can apply CSS (stylesheets that define your styling) 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 customizable 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 their styling. 

To use this, you need first 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 the Chameleon Elements to target

Identify the selectors you want to target (use the articles from the 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 and test the CSS in the 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 Builder 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.

👉 Would you like access to this functionality? Speak with us so we can enable this for your account and discuss how you can best leverage it.

Discover more

Did this answer your question?