CSS for Cookie Bar & Preferences

As you already may or may not know, you can apply CSS to different elements of the Cookie bar and the Preferences popup. This can be done in the Custom CSS section of the Design tab, as shown here:



Note: Keep in mind that applying Custom CSS may override your current settings which you have applied for the colors and the styling of the bar.


Here is a list of the CSS selectors:

Cookie Bar:

The selectors for the Default, Classic and Modern layouts are all the same:



1. Main Text: .cc-message
2. Privacy Policy text: .cc-link
3. Preferences button: button.cc-btn.cc-settings
4. Reject button: button.cc-btn.cc-deny
5. Accept button: button.cc-btn.cc-allow
6. “X” icon: .isense-close-icon

Preferences Popup:



Table with the selectors for all of the above elements, for the different layouts:



Download - Table with selectors

The colors of the checkboxes/switchers and the ticks can be configured from Design Settings >
Checkbox Color & Checkbox Tick Color**. Alternatively for the Classic and Modern layouts Design Settings > Switcher Inactive and Switcher Active.

If you would like to apply a global setting for all of the text in the Cookie bar or Preferences popup, for example change the font-size or the font, you can apply it with the following selectors:

Cookie bar:

.cc-window.cc-banner

Preferences popup:

.cc-settings-dialog

Example:

.cc-window { font-family: "Times New Roman", Times, serif; }

If you need any help, don’t hesitate to contact our support team at: apps-support@consentmo.com or from the Chat button at the bottom right corner of your browser.

Updated on: 22/11/2023