The Banner Editor gives you full control over how your cookie consent banner looks and behaves. Every change is reflected in a live preview panel so you can see exactly what your visitors will experience before you save.
WordPress users: Banner design changes made in the Kukie.io dashboard are automatically reflected on your WordPress site. No plugin update needed. Learn more about the WordPress plugin.
Opening the Banner Editor
Navigate to your site in the dashboard and click Banner Editor in the sub-navigation. The editor opens on the Design tab, with the live preview panel on the right.
Layout Options
Kukie.io offers three layout types:
- Floating - a compact widget that appears in a corner of the screen. You can choose the position: bottom-left, bottom-right, top-left, or top-right.
- Bottom Bar / Top Bar - a full-width strip anchored to the bottom or top of the viewport.
- Popup - a centred modal with an optional backdrop overlay. Best for maximum visibility.
The position selector is only shown for the Floating layout, since bars and popups have fixed positioning.
Colour Scheme
The Theme Colours section lets you set:
- Primary colour - used for the Accept All button and accent elements.
- Background colour - the banner's background.
- Text colour - body text and headings.
- Button text colour - the text on the Accept All button.
Every colour field accepts a HEX value (#1B4DFF), an RGB value (rgb(27, 77, 255)) or a CSS variable from your own site.
Using your site's CSS variables
If your website defines its palette as CSS custom properties (for example --primary and --secondary on :root), type the variable into any colour field instead of a fixed colour:
var(--secondary)
var(--secondary, #1b4dff)The second form adds a fallback colour for pages where the variable is not defined. The banner reads the variable from your page when it loads, so a theme change or your site's dark mode repaints the banner too. The lighter tints the banner derives from your colours (hover shades, borders, the cookie cards in the preferences panel) follow the variable as well. This works in every colour field of the editor: the theme colours and their dark variants, the per-button colours, the preferences modal buttons, the iFrame placeholder and the revisit button.
Because the editor cannot see your site's stylesheet, the live preview shows the fallback colour if you gave one, or the default colour otherwise; a note under the field says so. The accessibility widget cannot inherit a variable as its colour - if your primary colour is a variable, pick the widget colour explicitly on its own settings page.
Contrast warnings
The editor measures each colour you choose against the colour it sits on, with the formula WCAG 2.2 uses, and warns you when a pair is hard to read. The warning sits under the colour field to change. It names the pair, gives its contrast ratio and the ratio it needs, and says which way to move a colour. A summary at the top of the Design tab counts the warnings on every tab.
The pairs it checks:
- Text on the background, and descriptions (the text colour at 70%) on the background and on the preferences modal's list - at least 4.5:1.
- Links on the background and on the preferences modal's list - at least 4.5:1. On the banner, links, the focus outline and the 'on' switch all use the primary colour, so a primary that passes for links passes for the other two. A service's privacy link sits on a row lightly tinted with the primary colour, so it is checked on that row too.
- Buttons - each button's text on its colour, and the hover text on the hover colour where you set one, at least 4.5:1. This covers the banner buttons, the preferences modal's own button colours and the iFrame placeholder's buttons. A Reject All or Customise button with its own colour but no hover colour fades to 92% while the pointer is over it, so its text is checked faded too. Where visitors must opt in and you have set Accept All or Reject All colours, Reject All's text takes the primary colour unless you give it one, so that pair is checked on Reject All's colour.
- iFrame placeholder - its text on the placeholder's background, at least 4.5:1, and the focus outline on its buttons, which is drawn in the primary colour on the placeholder's background, at least 3:1. The placeholder sits on your page, not on the banner, so a primary that passes on the banner can still fail here.
- Revisit button - the icon on the button's colour, at least 3:1 for an icon on its own and 4.5:1 when the button shows text.
In dark mode, only the colours you set are checked: the banner adjusts the dark colours it picks itself. A colour given as a CSS variable is checked through its fallback colour; a variable without a fallback is read on your site, so the editor cannot check it. A warning never stops you saving, and the banner always uses your colours exactly as you set them.
Colour Source
Choose between Custom and Inherit colour modes:
- Custom - your chosen theme colours are applied with high specificity. This is the default and recommended mode.
- Inherit - the banner uses neutral defaults and allows your website's existing CSS to influence its appearance. Useful if you want the banner to blend in with your site's design system.
Border Radius
The border radius slider controls how rounded the banner corners and buttons appear. A value of 0 gives sharp corners; higher values create a softer, more modern look. The live preview updates instantly as you drag the slider.
Show Background Overlay
Show Background Overlay, on the Behaviour tab, works with every layout. With it on, a semi-transparent dark layer appears behind the banner and the page cannot be used until the visitor makes a choice; screen readers and the keyboard stay inside the banner too. It is on for new sites. Switch it off to show the banner without dimming the page, so visitors can keep using it while the banner is open; a popup then gets a stronger shadow to stand out. The preferences modal has its own overlay setting on the Preferences modal tab, which follows this one until you change it.
Live Preview
The preview panel on the right side of the editor shows a scaled-down rendering of your banner. You can toggle between the main banner view and the preferences modal view to check both states. Every form change is reflected immediately.
The preview follows the region rule that applies to your own location. On an opt-in rule the Reject All button carries the same accent colour as Accept All, so that refusing is as prominent as accepting; visitors in a region with a different rule may see the plain outlined button instead.
Tip: Remember to click Save after making your changes. The preview reflects unsaved edits but they will not be applied to your live site until you save.
