TL;DR: Cookie Banner → Design tab → Customize theme, colors, buttons, and borders. Changes appear instantly in the live preview.
Overview
The banner design controls all visual styling for your consent banner. You can choose from built-in themes, customize colors for every element, and style each button individually to match your brand.
Before You Begin
Make sure you have:
Selected your consent template (GDPR or US State Laws)
Time required: About 5-10 minutes
How to Access Design Settings
Step 1: Open Cookie Banner settings
Navigate to Cookie Banner from the top navigation menu.
Step 2: Open the Design section
Click the Design accordion in the left sidebar from the General tab to expand all styling options.
Choosing a Theme
Step 1: Select a theme style
Choose from three theme options:
Light — White backgrounds with dark text
Dark — Dark backgrounds with light text
Step 2: Pick a built-in theme color preset (optional)
Select from five built-in theme color presets: Default Theme, Theme 1(red), Theme 2(green), Theme 3(blue), Theme 4(Black). Each preset applies coordinated colors across all banner elements.
💡 Tip: Built-in themes provide quick, professional styling. Start with a preset, then customize individual elements as needed.
Customizing Banner Common Style
Customizing the Banner common Style will appear while you choose the Default Theme option from the Built-in Themes.
Background and borders
Click the color picker next to each option to adjust:
Banner Background — Main banner container color
Title Color — Consent notice title text
Text Color — Body text throughout the banner
Footer Border Color — Divider line in the preference center
Separator Color — Lines between sections
Banner radius
Enter a pixel value to control corner rounding. Higher values create more rounded corners.
Styling Buttons
Each button has six customizable properties. Configure colors for all three banner buttons: Accept All, Reject All, and Manage Preferences.
Step 1: Expand the button section
Scroll to the button you want to style (e.g., "Accept All" Button).
Step 2: Set button colors
Adjust each property using the color picker:
Color — Button text color (normal state)
Hover Color — Button text color when the cursor hovers
Background — Button background color (normal state)
Hover Background — Button background color when the cursor hovers
Border Color — Button outline color (normal state)
Hover Border Color — Button outline color when the cursor hovers
Step 3: Repeat for other buttons
Apply the same customization process to Reject All and Manage Preferences buttons.
⚠️ Important: Ensure sufficient color contrast between text and backgrounds for accessibility. Light text requires dark backgrounds, and vice versa.
Testing Your Design
Step 1: Use the live preview
Changes appear instantly in the Preview panel on the right side of the screen.
Step 2: Test on multiple devices
Click the device icons (desktop, tablet, mobile) at the top of the preview panel to see how your design appears across screen sizes.
Done!
Your design is ready to save and publish.
✅ Success indicator: The banner in the preview matches your brand colors and remains readable on all device sizes.
What's Next
Now that you've designed your banner, you should:
Troubleshooting
Text is hard to read
Why this happens: Insufficient contrast between text and background colors.
Solution:
Use dark text on light backgrounds, or light text on dark backgrounds
Test readability by viewing the banner preview at different zoom levels
Use an online contrast checker tool to verify accessibility standards
Changes aren't visible in the preview
Solution: Click the Save button at the bottom of the left sidebar. The preview updates automatically after saving.
I want to reset to the default colors
Solution: Click one of the built-in color themes (White, Red, Green, Blue, Black) to restore preset colors, then customize from there.