Customization

Adapt the appearance of your Ad Sentinelle to your visual identity.

Logo

Upload Logo

1. In Wall Builder, click "Logo"
2. Click "Upload" or drag and drop
3. Accepted formats: PNG, JPG, SVG, WebP
4. Recommended size: 200x60 px (or similar ratio)

Logo Position

Position	Preview
Top	Centered at top of modal
Left	Aligned left of title
Right	Aligned right of title
Center	Centered above title

Logo Size

Size	Dimensions
Small	40px height
Medium	60px height
Large	80px height
Custom	Custom (px)

// Configuration
logoUrl: 'https://yoursite.com/logo.png'
logoPosition: 'top'
logoSize: 'medium'
// or
logoSizeCustom: 70  // in pixels

Colors

Color Palette

Configure main colors:

// Color configuration
primaryColor: '#8b5cf6'     // Purple - buttons, links
backgroundColor: '#ffffff'   // White - modal background
textColor: '#1f2937'        // Dark gray - text

Primary Color

Used for:

• Main CTA button
• Links
• Accent elements
• Modal border (optional)

Examples:

• #8b5cf6 - Purple (default)
• #3b82f6 - Blue
• #10b981 - Green
• #f59e0b - Orange
• #ef4444 - Red

Background Color

Modal background:

• #ffffff - White (light mode)
• #1f2937 - Dark gray (dark mode)
• Custom brand color

Text Color

For title and paragraphs:

• #1f2937 - Dark gray (on light background)
• #f9fafb - Off-white (on dark background)

Overlay Opacity

The overlay is the semi-transparent background behind the modal:

overlayOpacity: 0.8  // 80% opacity

Value	Effect
0.5	Semi-transparent (content visible)
0.7	Fairly opaque
0.8	Opaque (recommended for Hard)
0.9	Very opaque
1.0	Completely black

Typography

Available Sizes

Size	Pixels	Usage
xs	12px	Notes, mentions
sm	14px	Secondary text
md	16px	Normal text
lg	18px	Emphasized text
xl	20px	Subtitles
2xl	24px	Titles

Title

title: '🛡️ Ad Blocker Detected'
titleSize: 'xl'  // Large size

Content Blocks

contentBlocks: [
  {
    text: 'Your blocker prevents our financing.',
    size: 'md',
    bold: false,
    italic: false
  },
  {
    text: 'Disable it to continue.',
    size: 'lg',
    bold: true,
    italic: false
  }
]

Buttons

Primary Button Style

Style	Appearance
Filled	Colored background, white text
Outline	Colored border, transparent background
Ghost	No border, hover colored

buttonText: "I've Disabled My Blocker"
buttonStyle: 'filled'

Secondary Button

secondaryButtonText: 'Learn More'
// Appears below main button

Help Button

showHelpButton: true
helpButtonText: 'How to Disable?'

Animation

Animation Types

Animation	Description
fade	Fade-in appearance (default)
slide	Slide from bottom
scale	Zoom from center
bounce	Bounce effect
none	No animation

animation: 'fade'

Animation Duration

Animation duration is 300ms by default. Not configurable via dashboard (custom CSS required).

Borders

Corner Radius

Value	Pixels	Effect
none	0px	Square corners
sm	4px	Slightly rounded
md	8px	Rounded (default)
lg	12px	Well rounded
xl	16px	Very rounded
full	9999px	Completely rounded

borderRadius: 'lg'

Custom CSS

For advanced customization, add custom CSS:

/* In the "Custom CSS" field of Wall Builder */

/* Change font */
#adwall-overlay {
  font-family: 'Your Font', sans-serif;
}

/* Add shadow */
#adwall-overlay .adwall-modal {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Customize button */
#adwall-overlay .adwall-cta-btn {
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Custom animation */
#adwall-overlay .adwall-modal {
  animation: customSlide 0.4s ease-out;
}

@keyframes customSlide {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Available CSS Classes

Class	Element
#adwall-overlay	Main container
.adwall-modal	Central modal
.adwall-logo	Logo image
.adwall-title	Title
.adwall-content	Content area
.adwall-cta-btn	Main button
.adwall-secondary-btn	Secondary button
.adwall-help-btn	Help button
.adwall-close-btn	Close button (Soft mode)

Configuration Examples

Media/Newspaper Style

{
  logoPosition: 'top',
  primaryColor: '#1e40af',     // Dark blue
  backgroundColor: '#ffffff',
  textColor: '#1f2937',
  overlayOpacity: 0.9,
  buttonStyle: 'filled',
  borderRadius: 'md',
  animation: 'fade'
}

Tech/Modern Style

{
  logoPosition: 'left',
  primaryColor: '#8b5cf6',     // Purple
  backgroundColor: '#0f172a',  // Dark background
  textColor: '#f8fafc',
  overlayOpacity: 0.85,
  buttonStyle: 'outline',
  borderRadius: 'xl',
  animation: 'scale'
}

Minimal Style

{
  logoPosition: 'center',
  primaryColor: '#171717',     // Black
  backgroundColor: '#fafafa',
  textColor: '#171717',
  overlayOpacity: 0.7,
  buttonStyle: 'ghost',
  borderRadius: 'none',
  animation: 'none'
}

Tip

Use colors consistent with your brand guidelines for natural integration.