Introduction

Banner Customization allows you to style the cookie consent banner to match your website’s design and brand identity. From colors and fonts to layout and animations, you have complete control over how the banner appears to your visitors.

A well-designed cookie banner not only ensures GDPR compliance but also maintains a cohesive visual experience that doesn’t disrupt your site’s aesthetic. This guide covers all customization options available in PureDevs GDPR Compliance.

  • Brand Consistency: Match your site’s colors, fonts, and style
  • Better UX: Create a seamless, non-intrusive experience
  • Improved Visibility: Ensure the banner is noticeable but not annoying
  • Professional Appearance: Show attention to detail and quality
  • Increased Trust: A polished banner builds credibility
  • Accessibility: Customize for better readability and usability

Accessing Banner Customization Settings

  1. Log in to your WordPress admin dashboard
  2. Navigate to Settings → PureDevs GDPR compliance
  3. Click the Banner Settings or Customization tab
  4. Scroll through the various customization options
  5. Make changes and use Live Preview to see results
  6. Click Save Changes when satisfied
Live Preview

Use the live preview feature to see your customization changes in real-time before saving. This helps you perfect the design without repeatedly saving and refreshing.

Color Customization

Background Color

Setting: Main banner background color

  • Light Themes: White (#ffffff), light gray (#f5f5f5), off-white (#fafafa)
  • Dark Themes: Dark gray (#2c2c2c), charcoal (#1a1a1a), black (#000000)
  • Brand Colors: Use subtle brand color variants
  • Contrast: Ensure text remains readable

Best Practices:

  • Match your site’s theme (light or dark)
  • Use semi-transparent backgrounds (rgba) for modern look
  • Avoid bright, distracting colors
  • Test contrast ratio with text color (minimum 4.5:1)

Text Color

Setting: Main message and body text color

  • Dark Text on Light: #333333, #404040, #1a1a1a
  • Light Text on Dark: #ffffff, #f5f5f5, #e0e0e0
  • Readability: Avoid pure black (#000) on pure white (#fff)
  • Contrast: Must meet WCAG AA standards (4.5:1)

Setting: Privacy policy and other link colors

  • Use brand primary color if available
  • Traditional blue (#0066cc) works universally
  • Ensure contrast with background (3:1 minimum)
  • Different from body text to indicate clickability
  • Consider hover state color

Border and Accent Colors

Setting: Borders, dividers, and accents

  • Subtle borders: rgba(0,0,0,0.1) or rgba(255,255,255,0.1)
  • Accent colors for highlights or emphasis
  • Divider lines between sections
  • Focus indicators for accessibility

Color Scheme Examples

Clean Light Theme

Background: #ffffff
Text: #333333
Links: #0066cc
Border: rgba(0,0,0,0.1)
Buttons: #0066cc (primary), #f5f5f5 (secondary)

Modern Dark Theme

Background: #1a1a1a
Text: #e0e0e0
Links: #4dabf7
Border: rgba(255,255,255,0.1)
Buttons: #4dabf7 (primary), #2c2c2c (secondary)

Brand-Focused Theme

Background: #f8f9fa (very light brand color)
Text: #212529
Links: #0d6efd (brand primary)
Border: rgba(13,110,253,0.2)
Buttons: #0d6efd (primary), #6c757d (secondary)

Typography Customization

Font Family

Options:

  • System Fonts: Fast, familiar, accessible
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  • Web Fonts: Google Fonts, Adobe Fonts, custom fonts
  • Match Site Font: Inherit from your site’s typography

Recommendations:

  • Use same font as your site for consistency
  • System fonts are faster and more accessible
  • Avoid decorative fonts – prioritize readability
  • Ensure font loads quickly

Font Sizes

  • Message Text: 14-16px (base size)
  • Button Text: 14-15px
  • Link Text: Same as message or slightly smaller
  • Title/Heading: 18-24px (if used)
  • Mobile Adjustments: Slightly larger for touch devices

Font Weight

  • Message Text: 400 (normal) or 500 (medium)
  • Links: 500-600 (medium-semibold)
  • Buttons: 500-700 (medium-bold)
  • Headings: 600-700 (semibold-bold)

Line Height and Spacing

  • Line Height: 1.5-1.6 for body text
  • Letter Spacing: Default or slightly increased (0-0.02em)
  • Paragraph Spacing: 8-12px between paragraphs
  • Readability: Avoid cramped text

Spacing and Layout

Padding

Internal spacing within banner:

  • Desktop: 20-30px all around
  • Mobile: 15-20px to maximize space
  • Popup: 30-40px for comfortable reading
  • Compact Banner: 12-16px for tight layouts

Margin

External spacing around banner:

  • Usually 0 for full-width banners
  • 10-20px margins for inset/boxed style
  • Bottom margin if banner pushes content

Element Spacing

  • Text to Buttons: 15-20px gap
  • Between Buttons: 10-12px gap
  • Message to Links: 8-12px
  • Vertical Sections: 20px between sections

Width and Alignment

  • Full Width: 100% width for banners
  • Contained Width: Max 1200-1400px for readability
  • Popup Width: 500-700px (responsive on mobile)
  • Content Alignment: Left, center, or justified

Borders and Shadows

Border Styling

Banner Borders:

  • None: Clean, minimal look
  • Top/Bottom Only: Subtle separation (1px solid)
  • Full Border: Box outline (1-2px)
  • Border Color: Subtle, low-contrast colors

Border Examples:

/* Top border only (for bottom banner) */
border-top: 1px solid rgba(0,0,0,0.1);

/* Full border (for popup) */
border: 1px solid rgba(0,0,0,0.15);

/* Thick accent border */
border-top: 3px solid #0066cc;

Border Radius

Rounded Corners:

  • Sharp (0px): Modern, clean, professional
  • Subtle (4-6px): Slightly softened edges
  • Rounded (8-12px): Friendly, approachable
  • Very Rounded (16-20px): Playful, modern

Where to Apply:

  • Popup modals (8-16px recommended)
  • Top banner top corners only (if banner pushes content)
  • Bottom banner usually no radius (flush with edges)

Box Shadows

Add depth and elevation:

Subtle Shadow (Recommended)

box-shadow: 0 2px 8px rgba(0,0,0,0.1);

Medium Shadow (Popups)

box-shadow: 0 4px 16px rgba(0,0,0,0.15);

Strong Shadow (High Emphasis)

box-shadow: 0 8px 24px rgba(0,0,0,0.2);

No Shadow (Flat Design)

box-shadow: none;

Shadow Best Practices:

  • Use shadows on popups to create depth
  • Top/bottom banners can use subtle shadows or none
  • Dark themes need lighter shadows: rgba(0,0,0,0.3-0.5)
  • Don’t overdo – subtle is better

Entry Animations

How banner appears on page:

Slide In (Recommended)

  • Bottom banner slides up from bottom
  • Top banner slides down from top
  • Smooth, professional appearance
  • Duration: 300-500ms

Fade In

  • Gradual opacity increase
  • Subtle, non-intrusive
  • Works for all banner types
  • Duration: 200-400ms

Scale/Zoom

  • Expands from center (popups)
  • Attention-grabbing
  • Modern, dynamic feel
  • Use sparingly

No Animation

  • Instant appearance
  • Fastest, simplest
  • Good for slow devices
  • Accessibility preference for some users

Exit Animations

  • Reverse of entry animation
  • Fade out (most common)
  • Slide out in same direction
  • Duration: 200-300ms (faster than entry)

Animation Settings

  • Enable/Disable: Toggle animations on/off
  • Animation Type: Choose from available options
  • Duration: Speed of animation (ms)
  • Easing: Animation curve (ease, ease-in-out, linear)
  • Delay: Wait time before banner appears
Accessibility Note

Respect user’s prefers-reduced-motion settings. Disable or reduce animations for users who have this preference enabled in their OS.

Overlay Background (Popup Only)

Background Dimming

When popup is open, dim the page behind:

  • Enable/Disable: Turn overlay on or off
  • Opacity: 0.3-0.7 (higher = darker)
  • Color: Usually black or dark gray
  • Blur: Optional backdrop blur effect (modern browsers)

Overlay Settings

/* Standard dark overlay */
background: rgba(0, 0, 0, 0.5);

/* Lighter overlay */
background: rgba(0, 0, 0, 0.3);

/* Very dark overlay */
background: rgba(0, 0, 0, 0.7);

/* With backdrop blur (modern) */
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);

Click Behavior

  • Click to Close: Clicking overlay closes popup (not recommended for GDPR)
  • Click Disabled: Must use buttons or X to close (recommended)
  • Prevent Body Scroll: Disable scrolling while popup is open

Responsive Design Customization

Mobile Adjustments

Automatically adjust for mobile devices:

  • Full Width: 100% width on mobile (even for popups)
  • Increased Font Size: 16px minimum to prevent zoom
  • Larger Touch Targets: Buttons at least 44x44px
  • Reduced Padding: Save space on small screens
  • Stacked Layout: Vertical button arrangement

Breakpoints

  • Mobile: < 768px - Compact, vertical layout
  • Tablet: 768px – 1024px – Adjust spacing
  • Desktop: > 1024px – Full design

Mobile-Specific Options

  • Convert popup to bottom drawer on mobile
  • Shorter message text for mobile
  • Hide less important links on small screens
  • Simplify button labels (“Accept” vs “Accept All Cookies”)

Advanced Customization

Custom CSS

Add your own CSS for ultimate control:

  • Access Custom CSS field in settings
  • Target banner elements with specific selectors
  • Override default styles
  • Add custom animations or effects

Example Custom CSS:

/* Change banner font */
.gdpr-banner {
    font-family: 'Open Sans', sans-serif;
}

/* Add subtle animation to buttons */
.gdpr-banner button:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

/* Custom scrollbar for long content */
.gdpr-banner-content::-webkit-scrollbar {
    width: 8px;
}
.gdpr-banner-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

Icon Customization

  • Upload custom cookie icon
  • Choose icon style (outline, filled, colorful)
  • Adjust icon size and position
  • Add brand logo to banner

Layout Templates

Pre-designed layout options:

  • Classic – Traditional horizontal layout
  • Modern – Split text/buttons layout
  • Minimal – Compact single-line
  • Detailed – Multi-section with expandable info

Customization Best Practices

Design Principles

  • ✅ Match your site’s existing design language
  • ✅ Ensure high contrast for readability
  • ✅ Keep it simple and uncluttered
  • ✅ Test on multiple devices and screen sizes
  • ✅ Prioritize accessibility over aesthetics
  • ✅ Use subtle animations if any
  • ✅ Make buttons clearly clickable
  • ✅ Provide visual feedback on interactions

What to Avoid

  • ❌ Low contrast text that’s hard to read
  • ❌ Overly bright or distracting colors
  • ❌ Tiny font sizes (below 14px)
  • ❌ Excessive animations or effects
  • ❌ Cramped spacing that feels claustrophobic
  • ❌ Custom designs that hide or obscure buttons
  • ❌ Breaking accessibility standards
  • ❌ Making banner take up too much screen space

Testing Checklist

  1. Test on mobile, tablet, and desktop
  2. Check all major browsers (Chrome, Firefox, Safari, Edge)
  3. Verify color contrast meets WCAG AA (4.5:1)
  4. Test with keyboard navigation
  5. Check with screen reader
  6. Verify animations don’t cause issues
  7. Test with reduced motion preference enabled
  8. Ensure banner doesn’t break site layout