Styling and Branding

Customize the biskoui consent banner to match your website's design and branding for a seamless user experience.

biskoui offers several pre-designed templates to get you started quickly, each optimized for different use cases and design preferences.

Default Templates

Clean & Minimal

Best For: Professional websites, corporate sites, portfolios
Characteristics: Simple layout, subtle colors, clear typography
Layout: Centered text with horizontal button layout
Mobile Behavior: Stacks buttons vertically

Modern Card

Best For: Modern web apps, SaaS platforms, tech companies
Characteristics: Card-style design with subtle shadows
Layout: Compact design with prominent accept button
Mobile Behavior: Responsive sizing with optimized touch targets

Bottom Bar

Best For: E-commerce sites, news websites, high-traffic sites
Characteristics: Non-intrusive bottom placement
Layout: Horizontal bar with inline buttons
Mobile Behavior: Fixed bottom position with slide-up animation

Best For: Landing pages, marketing sites, focused experiences
Characteristics: Prominent overlay with backdrop
Layout: Centered modal with clear consent options
Mobile Behavior: Full-screen overlay with optimized spacing

Best For: Content-heavy sites, blogs, documentation
Characteristics: Side-mounted drawer-style appearance
Layout: Vertical sidebar with detailed consent options
Mobile Behavior: Slides in from bottom on mobile devices

Template Configuration

Access template settings in your dashboard:

Go to Banner → Templates
Select your preferred template
Customize colors, fonts, and layout
Preview changes in real-time
Save and publish your configuration

{
  "template": "modern_card",
  "customization": {
    "primary_color": "#2563eb",
    "secondary_color": "#64748b", 
    "font_family": "Inter, sans-serif",
    "border_radius": "8px",
    "shadow": "0 10px 25px rgba(0,0,0,0.1)"
  }
}

Color Customization

Brand Color Integration

Primary Color:

Accept button background
Link colors and interactive elements
Progress indicators and highlights
Should match your brand's primary color

Secondary Color:

Reject/customize button styling
Secondary text and descriptions
Border colors and dividers
Typically a neutral or complementary color

Text Colors:

Primary Text: Main headings and important content
Secondary Text: Descriptions and smaller details
Link Text: Interactive links and buttons
Error Text: Validation messages and warnings

Color Palette Examples

Corporate Blue:

:root {
  --biskoui-primary: #1e40af;
  --biskoui-secondary: #64748b;
  --biskoui-text-primary: #1f2937;
  --biskoui-text-secondary: #6b7280;
  --biskoui-background: #ffffff;
  --biskoui-border: #e5e7eb;
}

Modern Green:

:root {
  --biskoui-primary: #059669;
  --biskoui-secondary: #6b7280;
  --biskoui-text-primary: #111827;
  --biskoui-text-secondary: #4b5563;
  --biskoui-background: #f9fafb;
  --biskoui-border: #d1d5db;
}

Elegant Purple:

:root {
  --biskoui-primary: #7c3aed;
  --biskoui-secondary: #a1a1aa;
  --biskoui-text-primary: #18181b;
  --biskoui-text-secondary: #52525b;
  --biskoui-background: #ffffff;
  --biskoui-border: #e4e4e7;
}

Dark Mode Support

Configure automatic dark mode detection or manual toggle:

/* Light mode (default) */
.biskoui-banner {
  background: #ffffff;
  color: #1f2937;
  border: 1px solid #e5e7eb;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .biskoui-banner {
    background: #1f2937;
    color: #f9fafb;
    border: 1px solid #374151;
  }
}

/* Manual dark mode class */
.dark .biskoui-banner {
  background: #111827;
  color: #f3f4f6;
  border: 1px solid #4b5563;
}

Typography & Fonts

Font Selection

Web-Safe Fonts:

Arial, sans-serif - Maximum compatibility
Georgia, serif - Classic readability
"Times New Roman", serif - Traditional appearance
Verdana, sans-serif - Clear at small sizes

Modern Web Fonts:

Inter, sans-serif - Clean, modern appearance
Roboto, sans-serif - Google's versatile font
"Open Sans", sans-serif - Friendly and readable
Poppins, sans-serif - Contemporary geometric design

Custom Font Integration:

/* Load your custom font */
@import url('https://fonts.googleapis.com/css2?family=YourFont:wght@400;500;600&display=swap');

/* Apply to banner */
.biskoui-banner {
  font-family: 'YourFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

Typography Hierarchy

Heading Styles:

.biskoui-banner h1 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.biskoui-banner h2 {
  font-size: 1.125rem;
  font-weight: 500; 
  line-height: 1.4;
  margin-bottom: 0.375rem;
}

Body Text:

.biskoui-banner p {
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.biskoui-banner .description {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--biskoui-text-secondary);
}

Button Typography:

.biskoui-banner button {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-transform: none; /* or uppercase for emphasis */
}

Layout and Positioning

Fixed Positioning:

/* Bottom fixed */
.biskoui-banner--bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

/* Top fixed */
.biskoui-banner--top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

/* Center modal */
.biskoui-banner--center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

Inline Positioning:

/* Inline at top of page */
.biskoui-banner--inline-top {
  position: relative;
  width: 100%;
  margin-bottom: 1rem;
}

/* Inline in content area */
.biskoui-banner--inline-content {
  position: relative;
  margin: 2rem 0;
  max-width: 800px;
}

Button Layout Configurations

Horizontal Layout:

.biskoui-buttons--horizontal {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.biskoui-buttons--horizontal .biskoui-btn {
  flex: 1;
  max-width: 200px;
}

Vertical Layout:

.biskoui-buttons--vertical {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.biskoui-buttons--vertical .biskoui-btn {
  width: 100%;
}

Stacked with Primary:

.biskoui-buttons--stacked {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.biskoui-btn--primary {
  order: -1; /* Primary button first */
  background: var(--biskoui-primary);
  color: white;
}

.biskoui-btn--secondary {
  background: transparent;
  color: var(--biskoui-text-secondary);
  border: 1px solid var(--biskoui-border);
}

Mobile Responsiveness

Responsive Design Patterns

Adaptive Layout:

/* Desktop: horizontal buttons */
@media (min-width: 768px) {
  .biskoui-banner {
    padding: 1.5rem;
    max-width: 600px;
    margin: 0 auto;
  }
  
  .biskoui-buttons {
    flex-direction: row;
    justify-content: center;
  }
}

/* Mobile: vertical buttons, full width */
@media (max-width: 767px) {
  .biskoui-banner {
    padding: 1rem;
    border-radius: 0;
  }
  
  .biskoui-buttons {
    flex-direction: column;
  }
  
  .biskoui-btn {
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }
}

Touch-Friendly Targets:

/* Ensure minimum 44px touch targets */
@media (max-width: 767px) {
  .biskoui-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
  }
  
  .biskoui-close-btn {
    min-height: 44px;
    min-width: 44px;
  }
}

Mobile-Specific Features

Slide Animations:

/* Slide up from bottom */
.biskoui-banner--mobile-slide {
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
}

.biskoui-banner--mobile-slide.is-visible {
  transform: translateY(0);
}

Safe Area Handling (iOS):

.biskoui-banner--bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

.biskoui-banner--top {
  padding-top: env(safe-area-inset-top);
}

Custom CSS Implementation

Basic CSS Customization

Add custom styles via dashboard CSS editor or external stylesheet:

/* Custom banner styling */
.biskoui-banner {
  /* Your custom styles */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Custom button styling */
.biskoui-btn--accept {
  background: #10b981;
  border: none;
  border-radius: 8px;
  transition: all 0.2s;
}

.biskoui-btn--accept:hover {
  background: #059669;
  transform: translateY(-1px);
}

Advanced Customization

Animation Effects:

/* Fade in animation */
@keyframes biskouiFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.biskoui-banner {
  animation: biskouiFadeIn 0.4s ease-out;
}

/* Button hover effects */
.biskoui-btn {
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.biskoui-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.biskoui-btn:hover::before {
  left: 100%;
}

Custom Icons:

/* Add custom icons to buttons */
.biskoui-btn--accept::before {
  content: '✓';
  margin-right: 0.5rem;
}

.biskoui-btn--reject::before {
  content: '✕';
  margin-right: 0.5rem;
}

/* Icon fonts integration */
.biskoui-btn--settings::before {
  font-family: 'Material Icons';
  content: 'settings';
  margin-right: 0.5rem;
}

Theme Integration

WordPress Theme Integration:

/* Match WordPress theme styling */
.biskoui-banner {
  font-family: var(--wp--preset--font-family--base);
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--foreground);
}

.biskoui-btn--primary {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}

Bootstrap Integration:

/* Use Bootstrap classes */
.biskoui-banner {
  @extend .card;
  @extend .shadow-lg;
}

.biskoui-btn {
  @extend .btn;
}

.biskoui-btn--accept {
  @extend .btn-primary;
}

.biskoui-btn--reject {
  @extend .btn-outline-secondary;
}

Logo and Branding

Logo Integration

Logo Upload in Dashboard:

Go to Banner → Branding
Upload logo file (PNG, SVG, or JPG)
Set logo dimensions and positioning
Configure logo behavior on different screen sizes

Logo Sizing Guidelines:

Recommended Size: 120x40px to 200x60px
Maximum Size: 300x100px
Format: SVG preferred for scalability
Background: Transparent PNG or SVG

CSS Logo Customization:

.biskoui-logo {
  max-height: 40px;
  width: auto;
  margin-bottom: 1rem;
}

/* Responsive logo sizing */
@media (max-width: 767px) {
  .biskoui-logo {
    max-height: 32px;
  }
}

/* Dark mode logo variant */
@media (prefers-color-scheme: dark) {
  .biskoui-logo--light {
    display: none;
  }
  .biskoui-logo--dark {
    display: block;
  }
}

Brand Consistency

Color Matching:

Extract brand colors from your style guide
Ensure sufficient contrast ratios (WCAG AA: 4.5:1)
Test colors across different devices and lighting
Consider accessibility for color-blind users

Typography Alignment:

Use the same font families as your website
Maintain consistent font weights and sizing
Preserve your brand's typographic hierarchy
Ensure readability at all sizes

Performance Optimization

CSS Performance Best Practices

Minimize CSS Size:

/* Combine and minify custom CSS */
/* Use efficient selectors */
.biskoui-banner{background:#fff;border:1px solid #e5e7eb;border-radius:8px}
.biskoui-btn{padding:.75rem 1rem;border:none;border-radius:6px}

Avoid Layout Thrashing:

/* Use transform and opacity for animations */
.biskoui-banner {
  will-change: transform, opacity;
  transform: translateZ(0); /* Force hardware acceleration */
}

/* Avoid animating layout properties */
.biskoui-btn {
  transition: transform 0.2s, opacity 0.2s;
}

.biskoui-btn:hover {
  transform: scale(1.02); /* Better than changing width/height */
}

Loading Optimization

Critical CSS Inlining:

<!-- Inline critical banner styles -->
<style>
.biskoui-banner{position:fixed;bottom:1rem;left:1rem;right:1rem;background:#fff;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1);z-index:9999}
</style>

<!-- Load full styles asynchronously -->
<link rel="preload" href="/biskoui-styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

Image Optimization:

/* Optimize logo loading */
.biskoui-logo {
  loading: lazy;
  decoding: async;
}

/* Use CSS sprites for small icons */
.biskoui-icon {
  background-image: url('/biskoui-icons.svg');
  background-size: 200px 100px;
}

.biskoui-icon--check {
  background-position: 0 0;
}

.biskoui-icon--close {
  background-position: -20px 0;
}

Testing and Quality Assurance

Browser Testing

Cross-Browser Compatibility:

Chrome/Chromium (latest 2 versions)
Firefox (latest 2 versions)
Safari (latest 2 versions)
Edge (latest 2 versions)
Mobile Safari (iOS)
Chrome Mobile (Android)

Testing Checklist:

Banner displays correctly on all target browsers
Colors match brand guidelines
Typography renders consistently
Buttons are properly sized and accessible
Mobile responsiveness works across devices
Animations perform smoothly
Dark mode displays correctly (if implemented)
High contrast mode accessibility

Accessibility Testing

Screen Reader Compatibility:

/* Ensure proper focus indicators */
.biskoui-btn:focus {
  outline: 2px solid var(--biskoui-primary);
  outline-offset: 2px;
}

/* Hide decorative elements from screen readers */
.biskoui-decorative::before {
  content: '';
  aria-hidden: true;
}

/* Ensure sufficient color contrast */
.biskoui-text {
  color: #2d3748; /* Contrast ratio 8.5:1 on white background */
}

Keyboard Navigation:

Test tab order through all interactive elements
Ensure all buttons are keyboard accessible
Verify escape key closes banner
Test with screen reader software

Performance Testing

Core Web Vitals Impact:

Measure Cumulative Layout Shift (CLS)
Monitor First Input Delay (FID)
Track Largest Contentful Paint (LCP)
Test banner loading impact on page performance

Optimization Tools:

Chrome DevTools Performance tab
Lighthouse accessibility and performance audits
WebPageTest for real-world performance
GTmetrix for detailed analysis

Next Steps

After customizing your banner styling:

Styling and Branding

Banner Templates

Default Templates

Clean & Minimal

Modern Card

Bottom Bar

Sidebar Slide

Template Configuration

Color Customization

Brand Color Integration

Color Palette Examples

Dark Mode Support

Typography & Fonts

Font Selection

Typography Hierarchy

Layout and Positioning

Banner Positioning Options

Button Layout Configurations

Mobile Responsiveness

Responsive Design Patterns

Mobile-Specific Features

Custom CSS Implementation

Basic CSS Customization

Advanced Customization

Theme Integration

Logo and Branding

Logo Integration

Brand Consistency

Performance Optimization

CSS Performance Best Practices

Loading Optimization

Testing and Quality Assurance

Browser Testing

Accessibility Testing

Performance Testing

Next Steps

Banner Templates​

Default Templates​

Clean & Minimal​

Modern Card​

Bottom Bar​

Center Modal​

Sidebar Slide​

Template Configuration​

Color Customization​

Brand Color Integration​

Color Palette Examples​

Dark Mode Support​

Typography & Fonts​

Font Selection​

Typography Hierarchy​

Layout and Positioning​

Banner Positioning Options​

Button Layout Configurations​

Mobile Responsiveness​

Responsive Design Patterns​

Mobile-Specific Features​

Custom CSS Implementation​

Basic CSS Customization​

Advanced Customization​

Theme Integration​

Logo and Branding​

Logo Integration​

Brand Consistency​

Performance Optimization​

CSS Performance Best Practices​

Loading Optimization​

Testing and Quality Assurance​

Browser Testing​

Accessibility Testing​

Performance Testing​

Next Steps​

Banner Templates

Default Templates

Clean & Minimal

Modern Card

Bottom Bar

Center Modal

Sidebar Slide

Template Configuration

Color Customization

Brand Color Integration

Color Palette Examples

Dark Mode Support

Typography & Fonts

Font Selection

Typography Hierarchy

Layout and Positioning

Banner Positioning Options

Button Layout Configurations

Mobile Responsiveness

Responsive Design Patterns

Mobile-Specific Features

Custom CSS Implementation

Basic CSS Customization

Advanced Customization

Theme Integration

Logo and Branding

Logo Integration

Brand Consistency

Performance Optimization

CSS Performance Best Practices

Loading Optimization

Testing and Quality Assurance

Browser Testing

Accessibility Testing

Performance Testing

Next Steps