Modifier l’apparence du widget de déblocage automatique

Le widget de déblocage automatique possède un fonctionnement spécifique dans Poool Access.

Son apparence n’est pas modifiée comme les autres actions/widgets standards du Dashboard.

La personnalisation repose sur une Apparance Avancée dédiée, entièrement gérée en CSS.

Ce fonctionnement permet de créer des rendus spécifiques uniquement pour ce widget, sans impact sur les autres apparances.

Principe de fonctionnement

La personnalisation suit une logique simple :

1. Création d’une apparence dédiée dans le Dashboard
2. Ajout et gestion du style via CSS uniquement
3. Association de cette apparence dans le scénario du widget

Une fois configurée, cette apparence est appliquée exclusivement au widget de déblocage automatique concerné.

Association dans le scénario

Une fois l'apparence créée dans le scénario :

• Sélectionner le widget de déblocage automatique
• Choisir l’apparence créée précédemment
• Publier le scénario

Le wall utilisera automatiquement cette apparence lors de son affichage.

Personnalisation via CSS

Toute la logique de design repose sur le CSS.

Avec cette approche, vous pouvez quasiment tout modifier :

• Couleurs (fond, boutons, textes…)
• Typographies
• Bordures et arrondis
• Background avec images
• Effets hover
• Structure visuelle globale

Vous pouvez créer un widget complètement intégré à votre design.

Récapitulatif des principales zones CSS

Barre verticale du widget

.p3-widget:before {
  background: #0432ba;
  /* display: none; pour supprimer la barre */
}

Élément décoratif situé à gauche du widget.

Peut être stylisé ou supprimé selon le design.

Boutons

.p3-widget a.p3-button,
.p3-widget button.p3-button {
  background-color: #aa5656;
  color: #fff;
}

Modifier l’apparence principale des boutons (fond + texte).

Hover des boutons

.p3-widget a.p3-button:hover,
.p3-widget button.p3-button:hover {
  background-color: #da0d0d;
}

Modifier au survol.

Liens

.p3-widget a.p3-link {
  color: #000000;
}

Modifier les liens dans le widget.

Hover des liens

.p3-widget a.p3-link:hover {
  color: #da0d0d;
}

Modifier au survol.

Texte principal

.p3-widget .p3-text {
}

Zone principale de texte.

Permet de gérer typographie, taille, interligne, etc.

Compteur d’articles restants

.p3-widget.p3-widget-unlock .p3-infos .p3-remaining p {
}

Cible le chiffre principal du compteur.

Texte du compteur

.p3-widget.p3-widget-unlock .p3-infos .p3-remaining span {
}

Cible le texte descriptif associé au compteur.

Bloc d’informations (colonne gauche)

.p3-widget.p3-widget-unlock .p3-infos {
  background-color: yellow;
}

Zone contenant les informations principales du widget.

Peut être utilisée pour appliquer un fond, une image ou un layout spécifique.

Conteneur global du widget

.p3-widget.p3-visible {
  border-radius: 12px;
  background: yellow;
  overflow: hidden;
}

Pour modifer la structure globale du widget :

• arrondis
• background global

Mis à jour le : 30/04/2026