Appearance

Distance from the screen edges sets the space between the box and the edges of the screen, from 0 to 40 px, in steps of 2. The default is 20 px.

• At 0, the box sits in the corner of the screen. Its corners on the screen side become square; the corner towards the page keeps its rounding.
• It applies to the floating box and the discreet box. The bar at the bottom of the page stays as it is.
• On screens up to 560 px wide, such as phones, the box takes the full width at the bottom of the screen: the distance no longer applies.

• Floating box (recommended): in a corner of the screen. It is discreet, and the page stays usable.
• Bar at the bottom of the page: full width. It is more visible, and it covers more of the page.
• Discreet box: smaller, with less colour, so your site stays in view. Your colour, corners, position and the “Accept all” highlight still apply. Expect fewer visitors to answer. Until they do, the cookies that need consent stay off.

With Automatic, the banner follows the light or dark switch of your site when your theme marks it in a common way on a parent element such as <html> or <body>:

• dark: the attribute data-theme="dark" or data-bs-theme="dark", or one of the classes dark, dark-mode, is-dark-theme, wp-dark-mode-active;
• light: the attribute data-theme="light" or data-bs-theme="light", or the class light.

Without such a mark, the visitor’s device decides. Light and Dark never change.

Type a hexadecimal code in the field: #rrggbb or #rgb, with or without the #. Or open the panel with the small colour square next to it, and pick with the mouse or the arrow keys.

Under the field, three contrast scores update as you choose: Text on the buttons, marked AA or AAA, then Buttons on a light banner and Buttons on a dark banner. They are figures to help you. The screen never refuses a colour.

Below, two rows of swatches help you choose. A click on a swatch sets the colour and updates the preview.

• Colours of your site: first, since 2.9.13, the colour of the buttons of your home page, found by the scan and named “Buttons of your home page”. Then the colours found in your theme palette (theme.json), the Divi accent colour, the Elementor global colours and the accent or primary colour of the Customizer. Colours too light for a button are left out, and the row shows 6 colours at most in all. The row is absent when no colour is found.
• Suggestions: 6 light colours: Sky blue (Cookie Rocks), Lavender, Bubblegum, Apricot, Sunflower and Mint.

Filled buttons have a thin outline, so a white accent on a light banner or a black accent on a dark one keeps its shape.

A light accent, such as the default sky blue, is hard to read on white. Buttons keep the colour, with dark text. In the light theme, the focus outline, the logo and the switches use a darker shade of the same colour, dark enough to read. In the dark theme, they use the accent itself, or a lighter shade of it when the accent is too dark to see on the dark background.

By default, Reject all and Accept all have the same size and the same look. With this option, “Accept all” is shown in the accent colour and “Reject all” as an outline. “Reject all” always stays on the first screen of the banner.

With Rules by country on, the option shows Follows each visitor’s law. Only visitors who are not asked for consent first see the highlight, except in US states with a privacy law. All other visitors get two equal buttons.

Otherwise, under the checkbox, the screen says what the countries of your Obligations profile ask, with a Source link to the official text:

• “Buttons of equal weight are required in: …. Keep this setting off.” The message turns red when the option is on.
• When no country requires it and your site addresses visitors in the European Union: “Not advised: your site addresses visitors in Europe, where authorities see a highlighted “Accept all” as pushing visitors to accept.”
• Otherwise, when some countries recommend it: “Buttons of equal weight are recommended in: ….”
• When none of them says anything: “None of your jurisdictions requires buttons of equal weight.”
• Without a profile: “Answer the questions on the Obligations page to see what your jurisdictions require.”

When the list of countries is long, for example when your site addresses visitors everywhere, a See all … countries link unfolds the full list.

Even where button colour is not regulated, banners that mislead visitors are banned in many countries. Highlighting “Accept all” is one thing; hiding “Reject all” is another.

Off, visitors see only the categories your site uses: “Necessary”, plus the categories of the tools found on your pages, of the cookies of your site you classified, and of the scripts you hold yourself. A site without ads shows no “Marketing” switch. On, every category is shown, even those no cookie of your site uses.

Hiding the cookie button

Visitors must be able to withdraw consent at any time, as easily as they gave it (GDPR, article 7.3). The cookie button does that. You may hide it if a link that reopens the choices stays visible on every page, usually in the footer or the menu. A link to your cookie policy page is not enough.

Tick Hide it, and put a link on every page instead, then add the [cookie_rocks_link] shortcode, or a menu link to #cr-preferences (see Shortcodes). The settings of the place, the size and the ring of the button disappear. The screen then lists the link shortcodes, each with a Copy button.

Once the box is ticked, the screen says what your countries ask: “A way to change one’s choice on every page is required in: ….” (or “is recommended in”), followed by the form of link those countries accept. It says nothing when none of your countries asks for it, and asks you to answer the Obligations questions when there is no profile. Cookie Rocks then looks for the link on your home page. When your countries expect a way to change one’s mind, the Overview warns you if the link is missing, or if it only leads to a page instead of reopening the choices.

The ring around the cookie button

Since 2.9.10, a ring surrounds the cookie button while a visitor’s refusal is applied, on every site. It lights up in two cases:

• The visitor refuses a category shown to them: with Reject all, in the “Do Not Sell or Share” view, or by turning a category off in the details. A category hidden from the details never lights it.
• The browser sends the Global Privacy Control signal and you honour it (Consent, Global Privacy Control). The ring stays even if the visitor clicks Accept all, because the browser’s refusal still applies to marketing.

The message shown after the choice says “Refusal applied”, or “Opt-out request honored” when the signal Global Privacy Control is honoured, and after a refusal on a site that targets the United States or has Rules by country on. It stays on screen for 5 seconds. In these cases, the label of the button also becomes “Cookie settings · Opt-out request honored”: it shows on hover and screen readers read it.

Under Ring after a refusal, untick Show a ring around the cookie button after a refusal to turn it off, and use Colour of the ring to change its colour (sky blue by default).

California requires businesses covered by the CCPA to show whether they honoured the signal, for example “Opt-Out Request Honored” (CCPA Regulations, § 7025(c)(6), since 1 January 2026). Colorado allows it (Rule 5.08(E)). When your site targets these states and the ring is off, the screen says: “Your site targets …: showing that an opt-out request was honoured is required in California and allowed in Colorado. Keep the ring on.”

Place of the cookie button

You choose the place separately for each screen size: Computer (wider than 980 px), Tablet (768 to 980 px wide) and Phone (up to 767 px wide). For each one, pick a spot on the small drawn screen:

• Bottom left and Bottom right: 16 px from the side and from the bottom.
• Left, above a bar and Right, above a bar: 16 px from the side and 96 px from the bottom, above the fixed bars many sites show at the bottom of the screen.

You can also drag the button in the preview, on your real page. A place that matches no spot shows “Custom place, set in the preview or in the fine-tuning below.” Under Fine-tuning, set for each screen size Left side or Right side, then the px from the side and the px from the bottom, from 0 to 400.

Since 2.9.13, the scan also measures a bar fixed at the bottom of your home page (call button, cart), on a computer and on a phone. When it would cover the cookie button, the screen says so, with its height: “Your home page has a bar fixed at the bottom of the screen (64 px). It would cover the cookie button.” Click Place the button above it: Cookie Rocks fills the px from the bottom of each screen size concerned with the height of the bar plus 16 px. Then click Save Changes.

Size of the cookie button

• Normal (recommended): 40 pixels. It meets the WCAG 2.2 level AA target size (24 pixels at least).
• Large: 44 pixels, the WCAG 2.2 level AAA target size. For visitors who may find small buttons hard to tap: older people, health, public services.
• Small and discreet: 28 pixels, slightly faded. Its size still meets level AA.

Logo of the cookie button

• Default: a stone in the colour of your banner. It is the lightest choice: the stylesheet draws it, nothing more is loaded.
• Your own image: click Choose or upload an image to pick it in your media library, or paste its address in the field next to the button.

Your image must come from your media library, in SVG, PNG or WebP, and weigh 10 kB (10,000 bytes) at most, because it loads on every page. Use a square image, at least 64 pixels wide, ideally with a transparent background. It is shown at 30 pixels, in its own colours. A heavier image is pointed out as soon as you pick it. When you save, an image that breaks these rules is refused with a message, and the default icon is shown meanwhile.

Under the settings, the Texts section has one block per language of your site: the languages of Polylang or WPML, or the site language alone (the block is then called Banner and details texts). A block where you wrote texts opens by itself and shows how many, for example “2 texts of your own”. Each block has eight fields:

Since 2.11.2 In the banner sentence, the markers {partners} and {purposes} keep the automatic, translated list inside your own sentence. Two buttons place them. With no tool to name, the recommended sentence is shown.

An empty field keeps the recommended text, shown in grey. Recommended texts are translated and updated with the plugin, and the recommended banner sentence names the tools found on your site. Your own text stays as written: review it when you add a tool. It is plain text: tags and line breaks are removed, and it is cut at the maximum length. Keep “Reject all” as clear as “Accept all”, as data protection authorities require.

The texts of a language you remove from Polylang or WPML are kept, for the day it comes back.

The banner is translated into 54 languages: English, Arabic, Azerbaijani, Bulgarian, Bangla, Catalan, Czech, Danish, German, Greek, Spanish (Spain), Spanish (Mexico), Estonian, Finnish, French, Irish, Hindi, Croatian, Hungarian, Armenian, Indonesian, Icelandic, Italian, Japanese, Georgian, Kazakh, Korean, Kyrgyz, Lithuanian, Latvian, Macedonian, Mongolian, Malay, Maltese, Norwegian Bokmål, Nepali, Dutch, Polish, Portuguese (Brazil), Portuguese (Portugal), Romanian, Russian, Slovak, Slovenian, Albanian, Serbian (Cyrillic), Serbian (Latin), Swedish, Turkish, Ukrainian, Uzbek, Vietnamese, Chinese (Simplified) and Chinese (Traditional). Regional variants, such as Canadian French or Brazilian Portuguese, use the main language. A page in Basque or Galician shows the banner in Spanish. Arabic reads from right to left. For any other language, the recommended texts are in English: write your own eight texts in its block.

The preview shows your home page as visitors see it before choosing, without the admin bar. Use Computer, Tablet and Phone to change the screen size (the computer preview is 1,536 px wide), and Banner, Details and Cookie button to see each part. Each change of a setting or a text shows at once. While the preview shows the cookie button, changing a setting of the banner brings it back to the banner, so you see the effect.

Nothing is saved until you click Save Changes. Clicks in the preview have no effect and record no choice. The preview works even while the banner is turned off.

• The banner is placed first in the page: it is the first keyboard stop and the first thing screen readers read.
• The details panel is a modal dialog. Focus moves into it and stays there, Escape closes it, and focus returns to the button that opened it.
• Switches are announced as switches, with the name and description of their category or tool.
• The message after a choice is read by screen readers without moving the focus.
• The messages shown in place of a video, a map, music, a social media post or a form meet WCAG 2.2 level AA: their buttons are at least 44 px high, with a visible focus outline, and after a click on the button the focus stays on the content that appears.

To change the look further with CSS, see the Developers screen.