Personnalisation CSS d'Estimated Delivery (V4)
Le Générateur d'Affichage couvre les besoins de style les plus courants, mais le champ CSS Personnalisé en bas de la barre latérale Design vous donne un contrôle total. Collez n'importe quel extrait de cette galerie, enregistrez, puis rechargez votre page produit pour voir le résultat.
🎨 Galerie de Designs
22 effets CSS à copier-coller — des accents discrets aux dégradés audacieux, en passant par la lueur néon et la feuille d'or. Chacun fonctionne en le collant directement dans Back Office → Modules → Estimated Delivery → Design → CSS Personnalisé.
Design 1: Aurora Borealis
GradientAn animated gradient background sweeps through purple, teal, and blue — giving your delivery widget a living, premium feel that draws the eye.
/* Aurora Borealis — animated gradient cycling purple → teal → blue */
@keyframes ed-aurora {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.estimateddelivery.ed-v4 {
background: linear-gradient(135deg, #7b2ff7, #00d4aa, #2196f3, #7b2ff7);
background-size: 300% 300%;
animation: ed-aurora 6s ease infinite;
border: none;
border-radius: 10px;
color: #ffffff;
box-shadow: 0 4px 20px rgba(123, 47, 247, 0.4);
}
.estimateddelivery.ed-v4 .ed-date {
color: #ffffff;
font-weight: 900;
text-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
}
.estimateddelivery.ed-v4 .ed-display-text {
color: rgba(255, 255, 255, 0.9);
}Design 2: Sunset Horizon
GradientWarm coral-to-golden gradient reads as urgency and warmth — perfect for summer sales or fashion stores wanting an energetic vibe.
/* Sunset Horizon — coral → orange → golden left-to-right gradient */
.estimateddelivery.ed-v4 {
background: linear-gradient(90deg, #ff6b6b, #ffa500, #ffd700);
border: none;
border-radius: 8px;
color: #1a1a1a;
box-shadow: 0 4px 16px rgba(255, 107, 107, 0.35);
}
.estimateddelivery.ed-v4 .ed-date {
color: #1a1a1a;
font-weight: 900;
}
.estimateddelivery.ed-v4 .ed-display-text {
color: #3a1a00;
}Design 3: Ocean Deep
GradientA radial gradient from deep navy to rich blue wraps the widget in depth, with the date glowing in bright cyan — commanding and trustworthy.
/* Ocean Deep — radial gradient navy center to deep blue edges */
.estimateddelivery.ed-v4 {
background: radial-gradient(ellipse at center, #1e40af 0%, #0a1628 100%);
border: none;
border-radius: 10px;
color: #e0f4ff;
box-shadow: 0 4px 20px rgba(10, 22, 40, 0.5);
}
.estimateddelivery.ed-v4 .ed-date {
color: #00d4ff;
font-weight: 800;
text-shadow: 0 0 10px rgba(0, 212, 255, 0.7), 0 0 20px rgba(0, 212, 255, 0.4);
}
.estimateddelivery.ed-v4 .ed-display-text {
color: #e0f4ff;
}Design 4: Candy Pop
GradientScreaming hot pink to violet diagonal gradient with a neon yellow date — impossibly bold and fun, ideal for youth fashion or toy stores.
/* Candy Pop — hot pink to violet diagonal, neon yellow date */
.estimateddelivery.ed-v4 {
background: linear-gradient(135deg, #ff2d92, #7c3aed);
border: none;
border-radius: 10px;
color: #ffffff;
box-shadow: 0 4px 20px rgba(255, 45, 146, 0.4);
}
.estimateddelivery.ed-v4 .ed-date {
color: #ffef00;
font-weight: 900;
text-shadow: 0 0 8px rgba(255, 239, 0, 0.6);
}
.estimateddelivery.ed-v4 .ed-display-text {
color: rgba(255, 255, 255, 0.9);
}Design 5: Forest Moss
GradientA deep-green diagonal gradient with a lime left accent border and mint date highlights — earthy, natural, great for organic or eco-friendly brands.
/* Forest Moss — sage to deep green gradient with lime left accent */
.estimateddelivery.ed-v4 {
background: linear-gradient(135deg, #2d6a4f, #1b4332);
border: none;
border-left: 4px solid #52b788 !important;
border-radius: 8px;
color: #d8f3dc;
box-shadow: 0 3px 12px rgba(27, 67, 50, 0.4);
}
.estimateddelivery.ed-v4 .ed-date {
color: #74c69d;
font-weight: 800;
}
.estimateddelivery.ed-v4 .ed-display-text {
color: #d8f3dc;
}⚙️ Comment Ça Marche
Où Coller le CSS Personnalisé
Rendez-vous dans Back Office → Modules → Estimated Delivery → Design, puis faites défiler jusqu'en bas de la barre latérale gauche. Le champ CSS Personnalisé écrit dans views/css/ed_custom.css, qui se charge après tous les autres styles du module — la plupart des règles prennent donc effet sans !important.
L'Aperçu en Direct du Générateur d'Affichage n'affiche pas le CSS Personnalisé en temps réel. Après l'enregistrement, rechargez votre page produit pour voir le résultat.
Ne modifiez jamais directement les fichiers CSS sources du module — ils sont écrasés à chaque mise à jour du module.
Variables CSS — L'Approche la Plus Propre
Le widget V4 repose sur les propriétés personnalisées CSS. Définir une variable sur l'élément conteneur est plus propre que cibler chaque sélecteur enfant, et cela résiste à la plupart des changements de mise en page au fil des mises à jour du module.
/* Override colors with variables — no specificity fights */
.estimateddelivery.ed-v4 {
--ed-bg: #F0FFF0;
--ed-border-color: #8ED48E;
--ed-date-color: #00a651;
--ed-date-weight: bold;
}
Variables de Couleur (sur le conteneur)
| Variable | Ce qu'elle contrôle |
|---|---|
--ed-bg | Couleur de fond du widget |
--ed-border-color | Couleur de la bordure |
--ed-accent | Couleur d'accent utilisée par le style Bold |
--ed-text | Couleur du texte (thèmes sombres) |
Variables de Format de Texte par Élément (sur .ed-display)
| Variable | Contrôle |
|---|---|
--ed-date-color | Couleur du texte de la date |
--ed-date-weight | Graisse de la police de la date |
--ed-date-style | Style de police de la date (p. ex. italic) |
--ed-date-decoration | Décoration du texte de la date |
--ed-countdown-color | Couleur du compte à rebours |
--ed-countdown-weight | Graisse de la police du compte à rebours |
--ed-countdown-style | Style de police du compte à rebours |
--ed-countdown-decoration | Décoration du texte du compte à rebours |
--ed-carrier-color | Couleur du nom du transporteur |
--ed-carrier-weight | Graisse de la police du transporteur |
--ed-carrier-style | Style de police du transporteur |
--ed-carrier-decoration | Décoration du texte du transporteur |
--ed-price-color | Couleur du prix |
--ed-price-weight | Graisse de la police du prix |
--ed-price-style | Style de police du prix |
--ed-price-decoration | Décoration du texte du prix |
Le Système de Classes V4
Le Générateur d'Affichage écrit des classes directement sur le conteneur du widget. Ces classes vous indiquent ce que le module gère déjà via l'interface — pour que vous sachiez quand le CSS est nécessaire et quand un simple changement de réglage suffit.
Sélecteur Racine
Chaque règle de CSS personnalisé doit être limitée à .estimateddelivery.ed-v4 :
/* Correct — scoped to V4 widget */
.estimateddelivery.ed-v4 { … }
.estimateddelivery.ed-v4 .ed-date { … }
/* Product page only */
.estimateddelivery.estimateddelivery-product.ed-v4 { … }
Thèmes de Couleur
Définis par le champ Couleur du Générateur d'Affichage. Vous pouvez cibler un thème précis avec ces classes :
| Classe | Fond | Bordure | Accent |
|---|---|---|---|
ed-color-none | transparent | — | — |
ed-color-white | #ffffff | #e0e0e0 | #666 |
ed-color-blue | #EFF8FF | #7CB9D4 | #2196f3 |
ed-color-red | #FFF0F0 | #E4ACAC | #ef5350 |
ed-color-green | #F0FFF0 | #8ED48E | #4caf50 |
ed-color-purple | #F5F0FF | #B89CD4 | #7e57c2 |
ed-color-brown | #FFF8EC | #D4BC8C | #795548 |
ed-color-yellow | #FFFDE6 | #D4D09C | #ffc107 |
ed-color-orange | #FFF2E0 | #E6853E | #ff9800 |
ed-color-dark | #2C2C2C | #444 | #fff |
ed-color-navy | #1B2A4A | #2D4373 | #fff |
Style de la Ligne d'Affichage
| Classe | Effet |
|---|---|
ed-style-clean | Fond transparent |
ed-style-subtle | Teinte très légère (rgba(0,0,0,0.03)) |
ed-style-card | Transparent, l'ombre apporte la profondeur |
ed-style-outlined | Ligne centrée sur la bordure |
ed-style-bold | Fond à la couleur d'accent, texte blanc |
Mise en Page (.ed-display)
| Classe | Description |
|---|---|
ed-layout-inline | Icône et texte sur une seule ligne horizontale |
ed-layout-icon-left | Icône à gauche, bloc de texte à côté |
ed-layout-stacked | Icône au-dessus, texte en dessous |
ed-layout-text-only | Pas d'icône |
ed-layout-banner | Mise en page en bandeau pleine largeur |
Bordure, Coins, Ombre, Espacement, Taille de Police, Marge
| Groupe | Classes |
|---|---|
| Style de bordure | ed-border-none ed-border-simple ed-border-dashed ed-border-double |
| Épaisseur de bordure | ed-bw-thin ed-bw-normal ed-bw-thick |
| Position de la bordure | ed-bp-all ed-bp-left ed-bp-top ed-bp-topbottom |
| Coins | ed-corners-sharp (0px) ed-corners-soft (4px) ed-corners-round (8px) ed-corners-pill (20px) |
| Ombre | ed-shadow-none ed-shadow-light ed-shadow-elevated ed-shadow-floating |
| Espacement | ed-spacing-tight ed-spacing-comfortable ed-spacing-spacious |
| Taille de police | ed-fs-small (12px) ed-fs-medium (14px) ed-fs-large (16px) |
| Marge | ed-margin-flush ed-margin-snug ed-margin-normal ed-margin-roomy |
Migration des Sélecteurs V3 → V4
Si vous avez du CSS issu d'une installation V3, ces sélecteurs ne correspondent plus à rien. Remplacez-les à l'aide de ce tableau :
| Sélecteur V3 (cassé) | Remplacement V4 |
|---|---|
.ed_delivery_wrapper | .estimateddelivery.ed-v4 |
.date_green | .estimateddelivery.ed-v4 .ed-date ou --ed-date-color |
.ed_countdown | .estimateddelivery.ed-v4 .ed-countdown ou --ed-countdown-color |
.ed_carrier_name | .estimateddelivery.ed-v4 .ed-carrier ou --ed-carrier-color |
.carrier_price | .estimateddelivery.ed-v4 .ed-price ou --ed-price-color |
.ed_delivery_text | .estimateddelivery.ed-v4 .ed-display-content |
📋 Extrait de Référence Rapide
Collez ceci dans le champ CSS Personnalisé pour voir toutes les variables modifiables au même endroit. Décommentez et renseignez les valeurs souhaitées :
.estimateddelivery.ed-v4 {
/* Background and borders */
/* --ed-bg: #F0FFF0; */
/* --ed-border-color: #8ED48E; */
/* --ed-accent: #00a651; */
/* Date */
/* --ed-date-color: #00a651; */
/* --ed-date-weight: bold; */
/* --ed-date-style: normal; */
/* --ed-date-decoration: none; */
/* Countdown timer */
/* --ed-countdown-color: #e53935; */
/* --ed-countdown-weight: bold; */
/* Carrier name */
/* --ed-carrier-color: #333333; */
/* --ed-carrier-weight: normal; */
/* Price */
/* --ed-price-color: #00a651; */
/* --ed-price-weight: bold; */
}
🛠 Personnalisations Courantes
Masquer un élément précis
/* Hide the carrier name */
.estimateddelivery.ed-v4 .ed-carrier {
display: none;
}
/* Hide the price */
.estimateddelivery.ed-v4 .ed-price {
display: none;
}
/* Hide the countdown */
.estimateddelivery.ed-v4 .ed-countdown {
display: none;
}
Animer le compte à rebours
@keyframes ed-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.estimateddelivery.ed-v4 .ed-countdown {
animation: ed-pulse 2s ease-in-out infinite;
}
Ajustements responsives
@media (max-width: 768px) {
.estimateddelivery.ed-v4 {
font-size: 13px;
padding: 6px 10px;
}
}
Cibler uniquement le widget de la page produit
.estimateddelivery.estimateddelivery-product.ed-v4 {
--ed-date-color: #e63946;
}
🔍 Dépannage
| Problème | Solution |
|---|---|
| Le CSS n'a aucun effet | Vérifiez que vous ciblez .estimateddelivery.ed-v4 et non les anciens sélecteurs V3 comme .ed_delivery_wrapper |
| Les styles apparaissent dans les DevTools mais pas sur la page | Videz le cache de PrestaShop (Paramètres avancés → Performances → Vider le cache) et forcez le rechargement du navigateur (Ctrl+Shift+R) |
| Variable de couleur définie mais la couleur de l'élément ne change pas | Certains éléments enfants héritent la couleur du texte du thème plutôt que du widget. Ciblez directement l'élément : .estimateddelivery.ed-v4 .ed-date { color: … } |
!important nécessaire | Uniquement requis lorsque le thème applique des styles avec une spécificité plus élevée. En dernier recours, ajoutez !important à la propriété concernée — pas à tout le bloc |
| Le champ CSS Personnalisé est vide après l'enregistrement | Vérifiez que la configuration du Générateur d'Affichage a bien été enregistrée. Assurez-vous que views/css/ed_custom.css existe et que le serveur web peut y écrire |
| Le widget s'affiche différemment sur mobile | Ajoutez un bloc @media (max-width: 768px) avec des valeurs ajustées de font-size et padding |
| Le verre dépoli / backdrop-filter ne s'affiche pas | backdrop-filter nécessite un fond non transparent derrière le widget. Les utilisateurs de Firefox doivent l'activer manuellement dans about:config |
Voir Aussi
- Générateur d'Affichage — les contrôles visuels qui génèrent ces classes
- Entrepôts Personnalisés — règles de livraison par entrepôt qui influencent les dates affichées
Besoin d'Aide ?
Pourquoi mon ancien CSS ne fonctionne-t-il plus après une mise à jour du module ?
Le widget V4 utilise une structure HTML et des noms de classes complètement différents de ceux des versions précédentes. Les sélecteurs comme .ed_delivery_wrapper, .date_green, .ed_countdown et .ed_carrier_name n'existent plus. Remplacez-les par leurs équivalents V4 : .estimateddelivery.ed-v4, .ed-date, .ed-countdown et .ed-carrier. Consultez le tableau de migration V3 → V4 de ce guide.
Ai-je besoin de !important pour que le CSS personnalisé fonctionne ?
Non, pour la plupart des règles. Le champ CSS Personnalisé écrit dans ed_custom.css, qui se charge en dernier, après toutes les feuilles de style du module. Les règles qui y sont écrites remplacent les valeurs par défaut du module sans !important. Vous n'en avez besoin que si votre thème applique des styles avec une spécificité plus élevée — par exemple, si votre thème cible .product-page .estimateddelivery plutôt que .estimateddelivery seul.
Puis-je utiliser des variables CSS pour changer la couleur de la date sans affecter les autres textes ?
Oui — c'est précisément leur rôle. Définissez --ed-date-color sur .estimateddelivery.ed-v4 et seul l'élément de la date la prend en compte. Les autres éléments de texte, comme le nom du transporteur et le prix, ont leurs propres variables (--ed-carrier-color, --ed-price-color) et ne sont pas affectés.
Où se trouve le champ CSS Personnalisé ? Je ne le trouve pas.
Rendez-vous dans Back Office → Modules → Estimated Delivery → Configurer, puis ouvrez l'onglet Design. Faites défiler jusqu'en bas de la barre latérale gauche — la zone de texte CSS Personnalisé se trouve tout en bas du panneau de réglages, sous les options de typographie.
Puis-je cibler le widget uniquement sur les pages produit, et non dans le panier ?
Oui. L'élément conteneur reçoit automatiquement une classe de contexte : estimateddelivery-product sur les pages produit et estimateddelivery-cart sur les pages panier. Limitez votre CSS ainsi : .estimateddelivery.estimateddelivery-product.ed-v4 { } pour n'appliquer les styles qu'au widget de la page produit.