Customize Cookie Banners Design

Overview

Your cookie banner is often the very first thing a visitor sees on your site. With Secure Privacy's design editor, you can fully customize the banner's appearance to match your brand identity -- from layout and colors to button styles and custom CSS.

Accessing the Design Editor

1. Log in to your Secure Privacy account
2. Navigate to Design in your dashboard
3. Select a design to preview and modify
4. Open the Cookie banner section

Choosing a Banner Layout

Secure Privacy offers four layout options. Choose the one that best fits your site's design language.

Bar (Full Width)

A full-width bar at the top or bottom of the viewport. This is the most popular layout because it is familiar to users and does not obscure page content.

Bar with Padding

Same as the bar layout, but with padding on all sides. This gives the banner a floating, three-dimensional appearance that makes it stand out slightly more without overwhelming the content.

Corner

A compact banner positioned in the bottom-left or bottom-right corner. This is the most unobtrusive option -- it integrates seamlessly with your page and works well for sites that prioritize minimal visual disruption.

Middle (Modal)

A centered modal overlay. This option provides maximum visibility and is best when you need explicit, hard-to-miss consent collection. It dims the background page content until the user responds.

Customizing Colors

Every color element can be adjusted to match your brand:

Configuring Buttons

Each button (Accept, Decline, Customize) can be styled independently:

• Fill style -- Choose between a filled button or a stroke/outline button
• Corner style -- Smooth (rounded), sharp (square), or fully rounded (pill)
• Background color -- The button's resting color
• Hover background -- The color when users mouse over
• Text color -- The label color
• Hover text color -- Text color on hover

Under GDPR, the "Reject All" button must be equally prominent as the "Accept All" button. Avoid dark patterns that make acceptance visually dominant while hiding or downplaying the rejection option.

Advanced: Custom CSS

For customizations beyond the visual editor, use the Custom CSS feature:

1. Go to Design > Cookie Banner > Custom CSS
2. Add your CSS rules targeting Secure Privacy classes

Example: Rounded Banner with Margin

.sp-banner {
  border-radius: 16px !important;
  margin: 16px !important;
}

Example: Custom Button Styling

.sp-banner .sp-btn-accept {
  border-radius: 8px !important;
  text-transform: uppercase !important;
}

Example: Custom Font

@import url('https://fonts.googleapis.com/css2?family=Inter');
.sp-banner {
  font-family: 'Inter', sans-serif !important;
}

Previewing Your Design

Before publishing any changes, use the built-in preview to test across device sizes:

• Desktop view
• Tablet view
• Mobile view

Switch to full-screen preview for the most accurate visualization. Note that minor rendering differences between preview and live may occur.

Design Best Practices

1. Match your brand -- Use your site's color palette for a cohesive look
2. Keep text concise -- Avoid legal jargon; use plain language
3. Ensure contrast -- Text must be readable against the banner background (aim for WCAG AA contrast ratio)
4. Test on mobile -- Over half of web traffic is mobile; make sure buttons are tap-friendly
5. Verify functionality -- After any styling change, test that all buttons still work correctly