Customization Risks
Termly typically advises against customizing your Termly CMP by overriding existing CSS properties. Doing so can lead to instability and maintenance issues because the IDs and classes used in the Termly consent banner and preference center are subject to change without notice, potentially breaking the custom styles applied.
Safe Customization with CSS Variables
To facilitate safer customization options, Termly exposes some custom CSS variables to allow flexibility in customizing certain properties of your CMP.
Available Custom CSS Variables
Variable | Usage |
| Sets the color of the background mask for the 'modal' style of CMP |
| Sets the z-index of the banner |
How to use
To use these variables, you can add your own CSS rules in your website’s stylesheet, or in a <style> tag in the <head> of the pages where Termly is installed. For example:
#termly-code-snippet-support {
--termly-theme-mask-background: #00000033;
--termly-z-index: 999;
}
Built-in Customization Options
You can still customize your banner's font, color, style, and more using the built-in options in your Termly dashboard.
For additional queries, please reach out to our support team.