Skip to main content

CSS personnalisé

Personnalisez l'apparence du wall au-delà des options du Wall Builder.

Ajouter du CSS personnalisé​

Via le Wall Builder​

  1. Ouvrez le Wall Builder
  2. Cliquez sur l'onglet "Avancé"
  3. Collez votre CSS dans le champ "CSS personnalisé"
  4. Prévisualisez et sauvegardez

Via fichier externe​

Si vous préférez gérer le CSS côté client :

<style>
  /* Vos styles Ad Sentinelle personnalisés */
  #adwall-overlay .adwall-modal {
    /* Styles ici */
  }
</style>
<script src="https://adwall-backend.../v1/loader/SITE_ID.js" async></script>

Structure HTML du wall​

<div id="adwall-overlay">
  <div class="adwall-modal">
    <button class="adwall-close-btn">✕</button>  <!-- Mode Soft uniquement -->
    
    <div class="adwall-content">
      <img class="adwall-logo" src="..." alt="Logo" />
      
      <h2 class="adwall-title">Titre du wall</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">Bouton principal</button>
        <button class="adwall-secondary-btn">Bouton secondaire</button>
      </div>
      
      <button class="adwall-help-btn">Comment désactiver ?</button>
    </div>
    
    <!-- Contenu aide (masqué par défaut) -->
    <div class="adwall-help-content" style="display: none;">
      ...
    </div>
  </div>
</div>

Classes CSS disponibles​

ClasseÉlément
#adwall-overlayContainer overlay (fond sombre)
.adwall-modalModal central
.adwall-close-btnBouton fermer (mode Soft)
.adwall-contentContenu principal
.adwall-logoImage du logo
.adwall-titleTitre H2
.adwall-messagesContainer des messages
.adwall-messageParagraphe de message
.adwall-buttonsContainer des boutons
.adwall-cta-btnBouton CTA principal
.adwall-secondary-btnBouton secondaire
.adwall-help-btnBouton aide
.adwall-help-contentContenu du guide d'aide

Exemples de personnalisation​

Changer la police​

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

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

Ajouter une ombre​

#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);
}

Bordure colorée​

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

Gradient en arrière-plan​

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

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

Animation d'entrée personnalisée​

#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);
  }
}

Bouton avec effet hover​

#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);
}

Style "Glass morphism"​

#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);
}

Mode sombre automatique​

@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​

Ajustements mobile​

@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;
  }
}

Ajustements tablette​

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

Surcharger les styles par défaut​

Pour forcer vos styles à s'appliquer :

/* Utilisez !important si nécessaire */
#adwall-overlay .adwall-modal {
  background: #1a1a2e !important;
}

/* Ou augmentez la spécificité */
body #adwall-overlay .adwall-modal {
  background: #1a1a2e;
}

Tester vos styles​

Console du navigateur​

  1. Ouvrez les DevTools (F12)
  2. Activez un adblocker pour déclencher le wall
  3. Modifiez les styles dans l'onglet Styles
  4. Copiez les styles qui fonctionnent

Forcer l'affichage du wall​

// Dans la console, forcez l'affichage pour tester
window.Ad Sentinelle?.forceDisplay();

Bonnes pratiques​

  1. Testez sur mobile : Vérifiez le rendu sur différents écrans
  2. Accessibilité : Maintenez un bon contraste de couleurs
  3. Performance : Évitez les animations lourdes
  4. Cohérence : Respectez votre charte graphique
  5. Fallbacks : Prévoyez des solutions pour navigateurs anciens
Attention

Évitez de modifier les classes utilisées par le JavaScript du SDK, cela pourrait casser le fonctionnement.