Customizing banner and dialog

The consent dialog is the first thing your visitors see. You set the appearance, the texts and the behavior in the admin area, without touching a file. Dialog (box) and bar (banner) have separate editors with their own color sets.

Basic settings and texts

1. Open “Kakapo Consent” in the WordPress menu and select the “Dialog” item in the left-hand navigation under “Consent”.
2. On the “Basic shape & position” card, set the “Display” (box or bar), the “Position” (bottom, top, centered) and the “Accent color”.
3. On the “Texts” card, enter the title and the message as well as the four labels “Accept”, “Settings” (in German: „Einstellungen“), “Decline” and “Save selection”.
4. Below that, switch on “Granular individual consent” if visitors are to allow each scanned service separately in the settings view.
5. Check the result on the “Preview” card: it shows the real front-end component and can be switched between desktop (1280), tablet (768) and mobile (390).

Fine-tuning the dialog

• “Dimensions & fine-tuning”: corner radius 0 to 32, width 380 to 900, base font size 12 to 18, shadow (No shadow, Subtle, Medium, Strong) and fade-in (None, Fade in gently, Slide in from below, Zoom in)
• “Buttons & entry point”: button radius 0 to 24, arrangement automatic (side by side) or stacked, weighting of the decline button (Style as equal, Subtle, Hide) and entry point with the overview or straight to the detail view
• “Overlay”: color, opacity 0 to 90 and blur 0 to 12 — the dimming is only drawn for the centered dialog, that is layout “Box” and position “centered”
• “Logo”: image from the media library or as a URL, alignment left, right or centered, height 16 to 120 pixels
• “Behavior”: explicit mode, close X, show cookie duration, merge “Functional” into “Necessary” and hide empty categories
• “Footer links”: Privacy Policy, legal notice and cookie policy, for each link either a published page or an alternative URL

The bar has a set of its own

The “Banner” menu item contains the editor for the full-width bar, with its own colors for primary color, text, background and button text, its own font choice and the position at the top or at the bottom. The “Bar message” field is independent of the dialog text in terms of content; if it stays empty, the bar shows the same text as the dialog. Which editor applies is decided by the “Display mode” under “General” (in German: „Allgemein“) — with a fixed choice, the respective other menu item disappears.

Custom CSS

The dialog panel has a “Custom CSS” field. It is included in the front end directly after the consent output and applies equally to dialog, bar and widget; HTML tags are removed when saving. Because the renderer works with inline styles, “!important” is usually needed. The dialog carries a fixed identifier, as does every button (among others .kwpc-btn-accept-all, .kwpc-btn-reject, .kwpc-btn-save).

#kwpc-banner