Estilo barra de progreso checkout con efecto resplandor

samuel_es

¡Hola a todos!

Estoy intentando modernizar un poco el checkout de mi tienda y me gustaría darle un efecto de resplandor al paso activo en la barra de progreso. He intentado varias cosas en themes/classic/assets/css/custom.css, pero no consigo que el resplandor se vea bien en todo el paso, y en móvil los números de paso se me cortan.

Este es el código que he añadido:

/* Intento en custom.css para estilo de pasos de pago */
.checkout-step .step-title {
    font-weight: normal;
    transition: all 0.3s ease;
}
.checkout-step.js-current-step .step-title {
    color: #007bff; /* Color azul para paso activo */
    text-shadow: 0 0 5px rgba(0, 123, 255, 0.7); /* Intento de resplandor */
}
/* En móvil, los números de paso se ven cortados */

El text-shadow solo afecta al texto, y quiero que sea un resplandor más general en todo el recuadro del paso. Además, en pantallas pequeñas, los títulos de los pasos se colapsan y a veces los números quedan mal. ¿Alguna idea de cómo puedo mejorarlo?

valeriaiberia90

@samuel_es Entiendo perfectamente lo que dices, es un clásico de PrestaShop. El text-shadow no es lo ideal para lo que buscas porque solo afecta al texto, no al contenedor del paso completo. Para un efecto de resplandor en el recuadro, normalmente se usa box-shadow.

También es importante saber qué versión de PrestaShop estás usando. En las versiones más antiguas, como la 1.7.x, el tema Classic tiene sus peculiaridades con el responsive, y los estilos de los pasos del checkout a veces requieren más ajustes de lo que parece, sobre todo para que los números no se corten en móvil. ¿Qué versión exacta tienes?

Milo

Hola @samuel_es, gracias por la aclaración. Tal como comenta @valeriaiberia90, el problema de tu código es doble: el text-shadow no aplica el efecto deseado a todo el bloque y las reglas responsive no son lo suficientemente específicas para los números de paso.

Para conseguir un efecto de resplandor en todo el recuadro del paso activo, lo ideal es usar box-shadow en el contenedor principal .checkout-step.js-current-step. Esto crea una sombra que simula el resplandor alrededor del elemento. Además, para los problemas en móvil, ajustaremos los tamaños de fuente y añadiremos un poco de relleno para evitar recortes.

Aquí te dejo el código CSS corregido para tu themes/classic/assets/css/custom.css (asumiendo PrestaShop 1.7.3.0):

/* Estilo para pasos de pago con resplandor y ajustes responsive */
.checkout-step .step-title {
    font-weight: 500; /* Un poco más de grosor para el título */
    transition: all 0.3s ease-in-out;
}
.checkout-step.js-current-step {
    border: 1px solid rgba(0, 123, 255, 0.5); /* Borde sutil para resaltar */
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.6); /* Efecto de resplandor */
    background-color: rgba(0, 123, 255, 0.05); /* Fondo ligero para el paso activo */
    border-radius: 4px; /* Bordes ligeramente redondeados */

Con estos cambios, el paso activo debería tener un resplandor más visible y los números de paso en móvil se ajustarán mejor para evitar que se corten.

samuel_es

¡Increíble, @Milo! Lo he implementado en mi custom.css y funciona a la perfección. El box-shadow da exactamente el efecto de resplandor que buscaba y los ajustes para móvil son geniales, ya no se cortan los números ni los títulos. ¡Muchísimas gracias por la ayuda tan directa y efectiva!