Advanced Banner Styling

Custom CSS and advanced styling options for your cookie banner

Overview

While CookieConfig provides a visual customization interface in your dashboard, you can also add custom CSS for complete control over your banner's appearance.

Custom CSS

Adding Custom CSS

To add custom CSS to your banner:

Log in to your dashboard
Go to your website settings
Navigate to "Banner Configuration" → "Advanced Styling"
Add your custom CSS in the CSS editor
Click "Save" to apply changes

CSS Class Reference

The cookie banner uses the following CSS classes:

.cc-banner          /* Main banner container */
.cc-banner-header    /* Banner header section */
.cc-banner-title     /* Banner title/heading */
.cc-banner-text      /* Banner description text */
.cc-banner-buttons   /* Button container */
.cc-btn-accept       /* "Accept All" button */
.cc-btn-reject       /* "Reject All" button */
.cc-btn-customize    /* "Customize" button */
.cc-preferences      /* Preferences modal */
.cc-category         /* Individual category section */
.cc-category-toggle  /* Category toggle switch */

Example: Custom Button Styles

/* Round buttons with shadows */
.cc-btn-accept,
.cc-btn-reject,
.cc-btn-customize {
  border-radius: 25px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.cc-btn-accept:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

Example: Custom Layout

/* Center-aligned banner with max width */
.cc-banner {
  max-width: 600px;
  margin: 0 auto;
  border-radius: 12px;
  padding: 24px;
}

.cc-banner-text {
  text-align: center;
  margin-bottom: 20px;
}

.cc-banner-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

Responsive Design

Mobile Optimization

Use media queries to adjust your banner for mobile devices:

/* Mobile styles */
@media (max-width: 768px) {
  .cc-banner {
    padding: 16px;
  }

  .cc-banner-buttons {
    flex-direction: column;
    width: 100%;
  }

  .cc-btn-accept,
  .cc-btn-reject,
  .cc-btn-customize {
    width: 100%;
  }
}

Accessibility Reminder

Always test your custom styles with screen readers and keyboard navigation to ensure your banner remains accessible to all users.

Best Practices

✓Maintain sufficient color contrast for accessibility (minimum 4.5:1 ratio)
✓Ensure interactive elements have clear focus states for keyboard navigation
✓Test on multiple browsers and devices
✓Keep custom CSS lightweight to avoid impacting page load times
✓Use brand fonts and colors while ensuring the banner is clearly visible