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