Custom CSS Reference

CookieRay Pro lets you add your own CSS to the consent banner. This page lists the classes you can target, explains why some rules need !important, and gives examples to start from. For where the field lives and its limits, see Trust Badge and Custom CSS.

Where to add it

Open CookieRay → Banner Design and scroll to Advanced. The field holds up to 5,000 characters and is applied on your live site only. The admin live preview does not show it, so check changes on a real page. Open your site in a private window to see the banner.

Why some rules need !important

Two things work against a plain override:

• Inline styles. The banner sets some values directly on the element from your Banner Design settings: the corner radius, the headline and icon colors, the description color, the privacy link color, and the floating button background. A normal CSS rule cannot beat an inline style, but a rule with !important can.
• Load order. Your custom CSS is printed in the page head before CookieRay’s own stylesheet. At equal specificity the later stylesheet wins, so make your selector more specific (start with .cookieray-banner-root) or add !important.

The action buttons are styled with !important rules of fairly high specificity. To override them, use !important and a longer selector, for example .cookieray-banner-root .cookieray-btn-primary.cookieray-btn.cookieray-btn. Use .cookieray-prefs-root in place of .cookieray-banner-root for the buttons in the preferences modal. The Accept button’s background and text colors also come from CSS variables set on the button itself.

Classes you can target

Banner

Preferences modal (opens from the Settings button)

Other elements

Class names can change in future versions. If a rule stops working after an update, inspect the banner in your browser and check the class names again.

Examples

Paste only what you need.

Use your site font

.cookieray-banner-root,
.cookieray-prefs-root {
  font-family: inherit !important;
}

Sharper corners

.cookieray-banner,
.cookieray-prefs-modal {
  border-radius: 4px !important;
}

Change the headline color

.cookieray-banner-root .cookieray-headline {
  color: #111827 !important;
}

Change the accept button color

.cookieray-banner-root .cookieray-btn-primary.cookieray-btn.cookieray-btn {
  background: #0f766e !important;
  color: #ffffff !important;
}

Round the buttons

.cookieray-banner-root .cookieray-btn.cookieray-btn.cookieray-btn {
  border-radius: 999px !important;
}

Move the floating button higher (to clear a chat widget)

.cookieray-manage-pill {
  bottom: 90px !important;
}

Hide the icon tile

.cookieray-icon-tile {
  display: none !important;
}

Check it works

1. Save in Banner Design.
2. Open your site in a private window. If the banner does not show, you may already have given consent. Clear the site cookies and reload.
3. If a rule has no effect, inspect the element, look at the Styles panel, and add !important and a longer selector.
4. If your site uses a caching or CSS-optimization plugin, clear its cache so the new <style> block is served.

Limits and safety

• Up to 5,000 characters. Anything past that is cut off when you save.
• The text </style is neutralized when saving, so you cannot close the style block early.
• Saving new custom CSS needs an active Pro license. Without one the field is locked. CSS you already saved keeps applying on your live site if the license later lapses, but you cannot edit it until Pro is active again.

Related

• Cookie Banner
• Trust Badge and Custom CSS
• Pro troubleshooting