Skip to main content

Can I customize my consent management platform (CMP) with my own CSS?

Jona Smulders Cohen
Updated

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

--termly-theme-mask-background

Sets the color of the background mask for the 'modal' style of CMP

--termly-override-z-index

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.

Related articles