Skip to main content

Custom CSS

Customize wall appearance beyond Wall Builder options.

Add Custom CSS​

Via Wall Builder​

  1. Open Wall Builder
  2. Click "Advanced" tab
  3. Paste CSS in "Custom CSS" field
  4. Preview and save

Via External File​

If you prefer managing CSS client-side:

<style>
  /* Your Ad Sentinelle custom styles */
  #adwall-overlay .adwall-modal {
    /* Styles here */
  }
</style>
<script src="https://adwall-backend.../v1/loader/SITE_ID.js" async></script>

Wall HTML Structure​

<div id="adwall-overlay">
  <div class="adwall-modal">
    <button class="adwall-close-btn">✕</button>  <!-- Soft mode only -->
    
    <div class="adwall-content">
      <img class="adwall-logo" src="..." alt="Logo" />
      
      <h2 class="adwall-title">Wall Title</h2>
      
      <div class="adwall-messages">
        <p class="adwall-message">Message 1</p>
        <p class="adwall-message">Message 2</p>
      </div>
      
      <div class="adwall-buttons">
        <button class="adwall-cta-btn">Main Button</button>
        <button class="adwall-secondary-btn">Secondary Button</button>
      </div>
      
      <button class="adwall-help-btn">How to Disable?</button>
    </div>
    
    <!-- Help content (hidden by default) -->
    <div class="adwall-help-content" style="display: none;">
      ...
    </div>
  </div>
</div>

Available CSS Classes​

ClassElement
#adwall-overlayOverlay container (dark background)
.adwall-modalCentral modal
.adwall-close-btnClose button (Soft mode)
.adwall-contentMain content
.adwall-logoLogo image
.adwall-titleTitle H2
.adwall-messagesMessages container
.adwall-messageMessage paragraph
.adwall-buttonsButtons container
.adwall-cta-btnMain CTA button
.adwall-secondary-btnSecondary button
.adwall-help-btnHelp button
.adwall-help-contentHelp guide content

Customization Examples​

Change Font​

#adwall-overlay {
  font-family: 'Playfair Display', serif;
}

#adwall-overlay .adwall-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
}

Add Shadow​

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

Colored Border​

#adwall-overlay .adwall-modal {
  border-top: 4px solid #8b5cf6;
}

Gradient Background​

#adwall-overlay .adwall-modal {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

#adwall-overlay .adwall-title,
#adwall-overlay .adwall-message {
  color: white;
}

Custom Entry Animation​

#adwall-overlay .adwall-modal {
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

Button with Hover Effect​

#adwall-overlay .adwall-cta-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

#adwall-overlay .adwall-cta-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 ease;
}

#adwall-overlay .adwall-cta-btn:hover::before {
  left: 100%;
}

#adwall-overlay .adwall-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

Glassmorphism Style​

#adwall-overlay .adwall-modal {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

Automatic Dark Mode​

@media (prefers-color-scheme: dark) {
  #adwall-overlay .adwall-modal {
    background: #1f2937;
    color: #f9fafb;
  }
  
  #adwall-overlay .adwall-title,
  #adwall-overlay .adwall-message {
    color: #f9fafb;
  }
  
  #adwall-overlay .adwall-cta-btn {
    background: #8b5cf6;
  }
}

Responsive Design​

Mobile Adjustments​

@media (max-width: 640px) {
  #adwall-overlay .adwall-modal {
    margin: 16px;
    padding: 24px;
    border-radius: 16px;
  }
  
  #adwall-overlay .adwall-title {
    font-size: 1.25rem;
  }
  
  #adwall-overlay .adwall-cta-btn {
    width: 100%;
    padding: 14px 24px;
  }
}

Tablet Adjustments​

@media (min-width: 641px) and (max-width: 1024px) {
  #adwall-overlay .adwall-modal {
    max-width: 500px;
  }
}

Override Default Styles​

To force your styles to apply:

/* Use !important if necessary */
#adwall-overlay .adwall-modal {
  background: #1a1a2e !important;
}

/* Or increase specificity */
body #adwall-overlay .adwall-modal {
  background: #1a1a2e;
}

Test Your Styles​

Browser Console​

  1. Open DevTools (F12)
  2. Enable ad blocker to trigger wall
  3. Modify styles in Styles tab
  4. Copy working styles

Force Wall Display​

// In console, force display for testing
window.AdSentinelle?.forceDisplay();

Best Practices​

  1. Test on mobile: Verify rendering on different screens
  2. Accessibility: Maintain good color contrast
  3. Performance: Avoid heavy animations
  4. Consistency: Respect brand guidelines
  5. Fallbacks: Plan for older browsers
Caution

Avoid modifying classes used by SDK JavaScript, this could break functionality.