In order to enhance the design of the cookie bar to match your preferences, you can apply CSS to different elements of the Cookie bar and the Preferences popup. This can be done in the Custom CSS field. You can navigate to the Consent banner tab > Design section, as shown below:



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 selectors:

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



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

Preferences Popup selectors:

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

In the below file you will find the table with all the selectors for the Preferences popup elements:

Download - Table with selectors

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

Global parameters

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:

.isense-cc-window.cc-banner

Preferences popup:

.isense-cc-settings-dialog

Example:

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

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

Updated on: 24/11/2024