Personalización CSS de Estimated Delivery (V4)
El Constructor de Visualización cubre las necesidades de estilo más habituales, pero el campo CSS Personalizado que se encuentra al final de la barra lateral Diseño te da control total. Pega cualquier fragmento de esta galería, guarda y recarga la página de producto para ver el resultado.
🎨 Galería de Diseños
22 efectos CSS para copiar y pegar — desde acentos sutiles hasta degradados atrevidos, resplandor neón y lámina de oro. Cada uno funciona pegándolo directamente en Back Office → Módulos → Estimated Delivery → Diseño → CSS Personalizado.
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;
}⚙️ Cómo Funciona
Dónde Pegar el CSS Personalizado
Ve a Back Office → Módulos → Estimated Delivery → Diseño y desplázate hasta el final de la barra lateral izquierda. El campo CSS Personalizado escribe en views/css/ed_custom.css, que se carga después de todos los demás estilos del módulo, por lo que la mayoría de las reglas surten efecto sin !important.
La Vista Previa en Vivo del Constructor de Visualización no renderiza el CSS Personalizado en tiempo real. Después de guardar, recarga la página de producto para ver el resultado.
No edites nunca directamente los archivos CSS de origen del módulo: se sobrescriben en cada actualización del módulo.
Variables CSS — El Enfoque Más Limpio
El widget V4 está construido en torno a propiedades personalizadas de CSS. Definir una variable en el elemento contenedor es más limpio que apuntar a selectores de elementos hijos individuales, y sobrevive a la mayoría de los cambios de maquetación a medida que el módulo se actualiza.
/* 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 Color (en el contenedor)
| Variable | Qué controla |
|---|---|
--ed-bg | Color de fondo del widget |
--ed-border-color | Color del borde |
--ed-accent | Color de acento usado por el estilo Bold |
--ed-text | Color del texto (temas oscuros) |
Variables de Formato de Texto por Elemento (en .ed-display)
| Variable | Controla |
|---|---|
--ed-date-color | Color del texto de la fecha |
--ed-date-weight | Grosor de fuente de la fecha |
--ed-date-style | Estilo de fuente de la fecha (p. ej. italic) |
--ed-date-decoration | Decoración del texto de la fecha |
--ed-countdown-color | Color del temporizador de cuenta atrás |
--ed-countdown-weight | Grosor de fuente de la cuenta atrás |
--ed-countdown-style | Estilo de fuente de la cuenta atrás |
--ed-countdown-decoration | Decoración del texto de la cuenta atrás |
--ed-carrier-color | Color del nombre del transportista |
--ed-carrier-weight | Grosor de fuente del transportista |
--ed-carrier-style | Estilo de fuente del transportista |
--ed-carrier-decoration | Decoración del texto del transportista |
--ed-price-color | Color del precio |
--ed-price-weight | Grosor de fuente del precio |
--ed-price-style | Estilo de fuente del precio |
--ed-price-decoration | Decoración del texto del precio |
El Sistema de Clases V4
El Constructor de Visualización escribe las clases directamente en el contenedor del widget. Estas clases te indican lo que el módulo ya gestiona desde la interfaz, para que sepas cuándo hace falta CSS y cuándo basta con cambiar un ajuste.
Selector Raíz
Toda regla de CSS personalizado debe tener como ámbito .estimateddelivery.ed-v4:
/* Correct — scoped to V4 widget */
.estimateddelivery.ed-v4 { … }
.estimateddelivery.ed-v4 .ed-date { … }
/* Product page only */
.estimateddelivery.estimateddelivery-product.ed-v4 { … }
Temas de Color
Los define el campo Color del Constructor de Visualización. Puedes apuntar a un tema concreto con estas clases:
| Clase | Fondo | Borde | Acento |
|---|---|---|---|
ed-color-none | transparente | — | — |
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 |
Estilo de la Fila de Visualización
| Clase | Efecto |
|---|---|
ed-style-clean | Fondo transparente |
ed-style-subtle | Tinte muy claro (rgba(0,0,0,0.03)) |
ed-style-card | Transparente, la sombra aporta la profundidad |
ed-style-outlined | Fila centrada en el borde |
ed-style-bold | Fondo con el color de acento, texto blanco |
Maquetación (.ed-display)
| Clase | Descripción |
|---|---|
ed-layout-inline | Icono y texto en una sola línea horizontal |
ed-layout-icon-left | Icono a la izquierda, bloque de texto a su lado |
ed-layout-stacked | Icono arriba, texto debajo |
ed-layout-text-only | Sin icono |
ed-layout-banner | Maquetación en franja de ancho completo |
Borde, Esquinas, Sombra, Espaciado, Tamaño de Fuente, Margen
| Grupo | Clases |
|---|---|
| Estilo de borde | ed-border-none ed-border-simple ed-border-dashed ed-border-double |
| Grosor de borde | ed-bw-thin ed-bw-normal ed-bw-thick |
| Posición del borde | ed-bp-all ed-bp-left ed-bp-top ed-bp-topbottom |
| Esquinas | ed-corners-sharp (0px) ed-corners-soft (4px) ed-corners-round (8px) ed-corners-pill (20px) |
| Sombra | ed-shadow-none ed-shadow-light ed-shadow-elevated ed-shadow-floating |
| Espaciado | ed-spacing-tight ed-spacing-comfortable ed-spacing-spacious |
| Tamaño de fuente | ed-fs-small (12px) ed-fs-medium (14px) ed-fs-large (16px) |
| Margen | ed-margin-flush ed-margin-snug ed-margin-normal ed-margin-roomy |
Migración de Selectores V3 → V4
Si tienes CSS de una instalación V3, esos selectores ya no funcionan. Sustitúyelos usando esta tabla:
| Selector V3 (roto) | Sustituto 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 |
📋 Fragmento de Referencia Rápida
Pega esto en el campo CSS Personalizado para ver todas las variables sobrescribibles en un solo lugar. Descomenta y rellena los valores que quieras:
.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; */
}
🛠 Personalizaciones Habituales
Ocultar un elemento concreto
/* 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;
}
Animar la cuenta atrás
@keyframes ed-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.estimateddelivery.ed-v4 .ed-countdown {
animation: ed-pulse 2s ease-in-out infinite;
}
Ajustes responsive
@media (max-width: 768px) {
.estimateddelivery.ed-v4 {
font-size: 13px;
padding: 6px 10px;
}
}
Apuntar solo al widget de la página de producto
.estimateddelivery.estimateddelivery-product.ed-v4 {
--ed-date-color: #e63946;
}
🔍 Solución de Problemas
| Problema | Solución |
|---|---|
| El CSS no tiene ningún efecto | Comprueba que apuntas a .estimateddelivery.ed-v4 y no a los antiguos selectores V3 como .ed_delivery_wrapper |
| Los estilos aparecen en las DevTools pero no en la página | Vacía la caché de PrestaShop (Parámetros Avanzados → Rendimiento → Vaciar caché) y fuerza la recarga del navegador (Ctrl+Shift+R) |
| He definido una variable de color pero el color del elemento no cambia | Algunos elementos hijos heredan el color del texto del tema y no del widget. Apunta directamente al elemento: .estimateddelivery.ed-v4 .ed-date { color: … } |
Hace falta !important | Solo es necesario cuando el tema aplica estilos con mayor especificidad. Como último recurso, añade !important a la propiedad concreta, no a todo el bloque |
| El campo CSS Personalizado está vacío tras guardar | Asegúrate de que la configuración del Constructor de Visualización se guardó correctamente. Comprueba que views/css/ed_custom.css existe y que el servidor web puede escribir en él |
| El widget se ve distinto en móvil | Añade un bloque @media (max-width: 768px) con valores ajustados de font-size y padding |
| El cristal esmerilado / backdrop-filter no se muestra | backdrop-filter requiere un fondo no transparente detrás del widget. En Firefox hay que activarlo manualmente en about:config |
Relacionado
- Constructor de Visualización — los controles visuales que generan estas clases
- Almacenes Personalizados — reglas de entrega por almacén que afectan a las fechas mostradas
¿Necesitas Ayuda?
¿Por qué mi CSS antiguo no funciona tras actualizar el módulo?
El widget V4 usa una estructura HTML y unos nombres de clase completamente distintos a los de las versiones anteriores. Selectores como .ed_delivery_wrapper, .date_green, .ed_countdown y .ed_carrier_name ya no existen. Sustitúyelos por sus equivalentes V4: .estimateddelivery.ed-v4, .ed-date, .ed-countdown y .ed-carrier. Consulta la tabla de migración V3 → V4 de esta guía.
¿Necesito !important para que funcione el CSS personalizado?
No, en la mayoría de las reglas. El campo CSS Personalizado escribe en ed_custom.css, que se carga el último, después de todas las hojas de estilo del módulo. Las reglas escritas ahí sobrescriben los valores predeterminados del módulo sin !important. Solo lo necesitas si tu tema aplica estilos con mayor especificidad — por ejemplo, si tu tema apunta a .product-page .estimateddelivery en lugar de solo a .estimateddelivery.
¿Puedo usar variables CSS para cambiar el color de la fecha sin afectar al resto del texto?
Sí, para eso están. Define --ed-date-color en .estimateddelivery.ed-v4 y solo el elemento de la fecha lo recoge. Los demás elementos de texto, como el nombre del transportista y el precio, tienen sus propias variables (--ed-carrier-color, --ed-price-color) y no se ven afectados.
¿Dónde está el campo CSS Personalizado? No lo encuentro.
Ve a Back Office → Módulos → Estimated Delivery → Configurar y abre la pestaña Diseño. Desplázate hasta el final de la barra lateral izquierda: el área de texto CSS Personalizado está al final del panel de ajustes, debajo de las opciones de tipografía.
¿Puedo aplicar estilos al widget solo en las páginas de producto y no en el carrito?
Sí. El elemento contenedor recibe automáticamente una clase de contexto: estimateddelivery-product en las páginas de producto y estimateddelivery-cart en las páginas del carrito. Define el ámbito de tu CSS así: .estimateddelivery.estimateddelivery-product.ed-v4 { } para aplicar los estilos solo al widget de la página de producto.