Skip to content

Make the banner match your site

← I want to…

Written for Cookie Rocks 2.9.5, checked on 1 November 2026. The current version is 2.11.2: some details may have changed.

This guide is for site owners who want the Cookie Rocks banner to look like the rest of their site: its colours, its corners, its place on the screen and its words.

You need: Cookie Rocks Pro, with a valid key or a trial. The Appearance page comes with Pro. With the Audit alone, your banner comes from the cookie plugin you already use: change its look in that plugin.

The Appearance page of Cookie Rocks Pro, with the settings on the left and the preview of the home page on the right
Cookie Rocks 2.11.2 · Click to enlarge

Steps

  1. Open Cookie Rocks, then Appearance. The preview on the right shows your home page as visitors see it before choosing. Each change shows there at once.
  2. Choose the Layout: Floating box (recommended), Bar at the bottom of the page or Discreet box. For a box, choose the Position: Left or Right.
  3. Choose the Theme: Automatic (follows the visitor’s device), Light or Dark.
  4. Pick the Accent colour, used for buttons and switches. When your theme has colours of its own, they appear under Colors of your site: a click takes one. The text on the buttons stays readable by itself.
  5. Move Rounded corners, from square (0) to very round (32 px, 20 px by default). The box, the buttons and the details panel follow.
  6. Turn Shadows off for a flat look, if your site uses no shadows.
  7. Click Save Changes. Nothing is saved before.

Below Rounded corners, Distance from the screen edges sets the space between the box and the edges of the screen, from 0 to 40 px (20 px by default). At 0, the box sits in the corner, and its corners on the screen side become square. The bar at the bottom of the page does not change. On phones, the distance is 8 px at most.

Change the words

  1. Under the settings, open Texts. There is one block per language of your site, or one block called Banner and details texts on a site with one language.
  2. Fill in only the fields you want to change, such as Banner title or Banner sentence. An empty field keeps the recommended text, shown in grey.
  3. In the preview, choose Details to see the details panel, then click Save Changes.

Tip. Keep the recommended texts when you can. They are translated and updated with the plugin, and the banner sentence names the tools found on your site. Your own text stays as written: review it when you add a tool.

If you see… “Buttons of equal weight are required in:” under Highlight “Accept all”: leave this box unticked. Keep “Reject all” as clear as “Accept all” in your texts too.

Every setting of the screen, the cookie button and its place: Appearance. To go further with CSS: Developers.

Next step: Show a fair cookie banner