Customizing Banner Appearance

Learn how to style your GetCookies consent banner to match your brand perfectly.

Using the Visual Editor

The easiest way to customize your banner is through the GetCookies dashboard:

1. Go to Domains > Select your domain
2. Click Widget Settings
3. Use the visual editor to customize

Customization Options

Colors

Position

Choose where your banner appears:

• Bottom - Full-width bar at the bottom
• Top - Full-width bar at the top
• Bottom Left - Popup in bottom-left corner
• Bottom Right - Popup in bottom-right corner
• Center - Modal in center of screen

Text Customization

Customize all banner text:

• Banner title
• Banner description
• Accept button text
• Reject button text
• Preferences button text
• Category names and descriptions

Custom CSS

For advanced customization, add custom CSS in your GetCookies dashboard:

/* Custom banner styling */
.gc-banner {
  font-family: 'Your Font', sans-serif;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* Custom button styling */
.gc-banner .gc-btn-accept {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 25px;
  text-transform: uppercase;
  font-weight: 600;
}

/* Hover effects */
.gc-banner .gc-btn-accept:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

CSS Class Reference

Responsive Design

The banner automatically adapts to different screen sizes. You can customize mobile behavior:

/* Mobile-specific styling */
@media (max-width: 768px) {
  .gc-banner {
    padding: 16px;
    font-size: 14px;
  }

  .gc-banner-buttons {
    flex-direction: column;
  }
}

Accessibility

GetCookies banners are designed with accessibility in mind:

• Proper focus management
• Keyboard navigation support
• ARIA labels for screen readers
• Sufficient color contrast (WCAG AA)

You can enhance accessibility with custom styling:

/* High contrast focus states */
.gc-banner *:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}