Personalizzazione CSS di Estimated Delivery (V4)
Il Generatore di Visualizzazione copre le esigenze di stile più comuni, ma il campo CSS Personalizzato in fondo alla barra laterale Design ti dà il pieno controllo. Incolla qualsiasi frammento di questa galleria, salva e ricarica la pagina prodotto per vedere il risultato.
🎨 Galleria dei Design
22 effetti CSS da copiare e incollare — da accenti discreti a gradienti audaci, bagliore neon e lamina d'oro. Ognuno funziona incollandolo direttamente in Back Office → Moduli → Estimated Delivery → Design → CSS Personalizzato.
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;
}⚙️ Come Funziona
Dove Incollare il CSS Personalizzato
Vai su Back Office → Moduli → Estimated Delivery → Design, poi scorri fino in fondo alla barra laterale sinistra. Il campo CSS Personalizzato scrive in views/css/ed_custom.css, che viene caricato dopo tutti gli altri stili del modulo — quindi la maggior parte delle regole ha effetto senza !important.
L'Anteprima Live del Generatore di Visualizzazione non mostra il CSS Personalizzato in tempo reale. Dopo il salvataggio, ricarica la pagina prodotto per vedere il risultato.
Non modificare mai direttamente i file CSS sorgente del modulo — vengono sovrascritti a ogni aggiornamento del modulo.
Variabili CSS — L'Approccio Più Pulito
Il widget V4 è costruito attorno alle proprietà personalizzate CSS. Impostare una variabile sull'elemento contenitore è più pulito che puntare ai singoli selettori figli, e resiste alla maggior parte dei cambiamenti di layout man mano che il modulo si aggiorna.
/* 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;
}
Variabili di Colore (sul contenitore)
| Variabile | Cosa controlla |
|---|---|
--ed-bg | Colore di sfondo del widget |
--ed-border-color | Colore del bordo |
--ed-accent | Colore di accento usato dallo stile Bold |
--ed-text | Colore del testo (temi scuri) |
Variabili di Formato del Testo per Elemento (su .ed-display)
| Variabile | Controlla |
|---|---|
--ed-date-color | Colore del testo della data |
--ed-date-weight | Spessore del carattere della data |
--ed-date-style | Stile del carattere della data (es. italic) |
--ed-date-decoration | Decorazione del testo della data |
--ed-countdown-color | Colore del conto alla rovescia |
--ed-countdown-weight | Spessore del carattere del conto alla rovescia |
--ed-countdown-style | Stile del carattere del conto alla rovescia |
--ed-countdown-decoration | Decorazione del testo del conto alla rovescia |
--ed-carrier-color | Colore del nome del corriere |
--ed-carrier-weight | Spessore del carattere del corriere |
--ed-carrier-style | Stile del carattere del corriere |
--ed-carrier-decoration | Decorazione del testo del corriere |
--ed-price-color | Colore del prezzo |
--ed-price-weight | Spessore del carattere del prezzo |
--ed-price-style | Stile del carattere del prezzo |
--ed-price-decoration | Decorazione del testo del prezzo |
Il Sistema di Classi V4
Il Generatore di Visualizzazione scrive le classi direttamente sul contenitore del widget. Queste classi ti indicano ciò che il modulo gestisce già tramite l'interfaccia — così sai quando serve il CSS e quando basta modificare un'impostazione.
Selettore Radice
Ogni regola di CSS personalizzato deve avere come ambito .estimateddelivery.ed-v4:
/* Correct — scoped to V4 widget */
.estimateddelivery.ed-v4 { … }
.estimateddelivery.ed-v4 .ed-date { … }
/* Product page only */
.estimateddelivery.estimateddelivery-product.ed-v4 { … }
Temi di Colore
Impostati dal campo Colore del Generatore di Visualizzazione. Puoi puntare a un tema specifico con queste classi:
| Classe | Sfondo | Bordo | Accento |
|---|---|---|---|
ed-color-none | trasparente | — | — |
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 |
Stile della Riga di Visualizzazione
| Classe | Effetto |
|---|---|
ed-style-clean | Sfondo trasparente |
ed-style-subtle | Tinta molto chiara (rgba(0,0,0,0.03)) |
ed-style-card | Trasparente, l'ombra dà la profondità |
ed-style-outlined | Riga incentrata sul bordo |
ed-style-bold | Sfondo con il colore di accento, testo bianco |
Layout (.ed-display)
| Classe | Descrizione |
|---|---|
ed-layout-inline | Icona e testo su un'unica riga orizzontale |
ed-layout-icon-left | Icona a sinistra, blocco di testo accanto |
ed-layout-stacked | Icona sopra, testo sotto |
ed-layout-text-only | Nessuna icona |
ed-layout-banner | Layout a striscia a tutta larghezza |
Bordo, Angoli, Ombra, Spaziatura, Dimensione del Carattere, Margine
| Gruppo | Classi |
|---|---|
| Stile del bordo | ed-border-none ed-border-simple ed-border-dashed ed-border-double |
| Spessore del bordo | ed-bw-thin ed-bw-normal ed-bw-thick |
| Posizione del bordo | ed-bp-all ed-bp-left ed-bp-top ed-bp-topbottom |
| Angoli | ed-corners-sharp (0px) ed-corners-soft (4px) ed-corners-round (8px) ed-corners-pill (20px) |
| Ombra | ed-shadow-none ed-shadow-light ed-shadow-elevated ed-shadow-floating |
| Spaziatura | ed-spacing-tight ed-spacing-comfortable ed-spacing-spacious |
| Dimensione del carattere | ed-fs-small (12px) ed-fs-medium (14px) ed-fs-large (16px) |
| Margine | ed-margin-flush ed-margin-snug ed-margin-normal ed-margin-roomy |
Migrazione dei Selettori V3 → V4
Se hai del CSS di un'installazione V3, quei selettori non corrispondono più a nulla. Sostituiscili usando questa tabella:
| Selettore V3 (non funzionante) | Sostituto V4 |
|---|---|
.ed_delivery_wrapper | .estimateddelivery.ed-v4 |
.date_green | .estimateddelivery.ed-v4 .ed-date o --ed-date-color |
.ed_countdown | .estimateddelivery.ed-v4 .ed-countdown o --ed-countdown-color |
.ed_carrier_name | .estimateddelivery.ed-v4 .ed-carrier o --ed-carrier-color |
.carrier_price | .estimateddelivery.ed-v4 .ed-price o --ed-price-color |
.ed_delivery_text | .estimateddelivery.ed-v4 .ed-display-content |
📋 Frammento di Riferimento Rapido
Incolla questo nel campo CSS Personalizzato per vedere tutte le variabili sovrascrivibili in un unico posto. Decommenta e compila i valori che desideri:
.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; */
}
🛠 Personalizzazioni Comuni
Nascondere un elemento specifico
/* 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;
}
Animare il conto alla rovescia
@keyframes ed-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.estimateddelivery.ed-v4 .ed-countdown {
animation: ed-pulse 2s ease-in-out infinite;
}
Regolazioni responsive
@media (max-width: 768px) {
.estimateddelivery.ed-v4 {
font-size: 13px;
padding: 6px 10px;
}
}
Puntare solo al widget della pagina prodotto
.estimateddelivery.estimateddelivery-product.ed-v4 {
--ed-date-color: #e63946;
}
🔍 Risoluzione dei Problemi
| Problema | Soluzione |
|---|---|
| Il CSS non ha alcun effetto | Verifica di puntare a .estimateddelivery.ed-v4 e non ai vecchi selettori V3 come .ed_delivery_wrapper |
| Gli stili compaiono negli strumenti per sviluppatori ma non sulla pagina | Svuota la cache di PrestaShop (Parametri Avanzati → Prestazioni → Svuota la cache) e forza il ricaricamento del browser (Ctrl+Shift+R) |
| Variabile di colore impostata ma il colore dell'elemento non cambia | Alcuni elementi figli ereditano il colore del testo dal tema anziché dal widget. Punta direttamente all'elemento: .estimateddelivery.ed-v4 .ed-date { color: … } |
Serve !important | Necessario solo quando il tema applica stili con una specificità maggiore. Come ultima risorsa, aggiungi !important alla singola proprietà — non a tutto il blocco |
| Il campo CSS Personalizzato è vuoto dopo il salvataggio | Assicurati che la configurazione del Generatore di Visualizzazione sia stata salvata correttamente. Verifica che views/css/ed_custom.css esista e che il server web possa scriverci |
| Il widget appare diverso su mobile | Aggiungi un blocco @media (max-width: 768px) con valori di font-size e padding adattati |
| Il vetro smerigliato / backdrop-filter non compare | backdrop-filter richiede uno sfondo non trasparente dietro il widget. Gli utenti di Firefox devono attivarlo manualmente in about:config |
Correlati
- Generatore di Visualizzazione — i controlli visivi che generano queste classi
- Magazzini Personalizzati — regole di consegna per magazzino che influiscono sulle date mostrate
Hai Bisogno di Aiuto?
Perché il mio vecchio CSS non funziona dopo un aggiornamento del modulo?
Il widget V4 usa una struttura HTML e nomi di classe completamente diversi rispetto alle versioni precedenti. Selettori come .ed_delivery_wrapper, .date_green, .ed_countdown e .ed_carrier_name non esistono più. Sostituiscili con gli equivalenti V4: .estimateddelivery.ed-v4, .ed-date, .ed-countdown e .ed-carrier. Consulta la tabella di migrazione V3 → V4 in questa guida.
Mi serve !important perché il CSS personalizzato funzioni?
No, per la maggior parte delle regole. Il campo CSS Personalizzato scrive in ed_custom.css, che viene caricato per ultimo, dopo tutti i fogli di stile del modulo. Le regole scritte lì sovrascrivono i valori predefiniti del modulo senza !important. Ti serve solo se il tuo tema applica stili con una specificità maggiore — ad esempio, se il tema punta a .product-page .estimateddelivery anziché solo a .estimateddelivery.
Posso usare le variabili CSS per cambiare il colore della data senza influire sul resto del testo?
Sì — è esattamente a questo che servono. Imposta --ed-date-color su .estimateddelivery.ed-v4 e solo l'elemento della data lo recepisce. Gli altri elementi di testo, come il nome del corriere e il prezzo, hanno le proprie variabili (--ed-carrier-color, --ed-price-color) e non vengono toccati.
Dov'è il campo CSS Personalizzato? Non riesco a trovarlo.
Vai su Back Office → Moduli → Estimated Delivery → Configura, poi apri la scheda Design. Scorri fino in fondo alla barra laterale sinistra — l'area di testo CSS Personalizzato si trova in fondo al pannello delle impostazioni, sotto le opzioni di tipografia.
Posso applicare gli stili al widget solo nelle pagine prodotto e non nel carrello?
Sì. L'elemento contenitore riceve automaticamente una classe di contesto: estimateddelivery-product nelle pagine prodotto e estimateddelivery-cart nelle pagine del carrello. Limita il tuo CSS così: .estimateddelivery.estimateddelivery-product.ed-v4 { } per applicare gli stili solo al widget della pagina prodotto.