Barra de progreso de pago: brillo y diseño móvil

patricia_es87

Hola a todos, estoy intentando darle un aspecto más moderno a los pasos del checkout en PrestaShop, concretamente a la barra de progreso. Quiero que el paso activo tenga un efecto de 'resplandor' y que en móviles los números de los pasos no se recorten.

He estado trasteando en themes/classic/assets/css/custom.css y he añadido esto, pero el resplandor no se ve como espero y en móvil sigue siendo un desastre con los números de los pasos que se salen del recuadro o se cortan:

.checkout-step.current .step-title {
    background-color: #007bff;
    color: white;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.6);
    border-radius: 3px;
}
@media (max-width: 768px) {
    .checkout-step .step-number {
        font-size: 0.9em;
        padding: 5px;

¿Alguna idea de cómo puedo mejorar esto para que el efecto sea más visible y, sobre todo, para que se vea bien en pantallas pequeñas?

gonzaloshop

Hola @patricia_es87, entiendo perfectamente lo que buscas. Ese efecto de resplandor es genial para guiar al cliente.

Una pregunta rápida, ¿en qué versión de PrestaShop estás? A veces, los estilos por defecto del tema Classic pueden cambiar ligeramente entre versiones, y eso podría estar afectando la especificidad de tu box-shadow o cómo se interpretan los media queries.

Respecto al recorte en móviles, a menudo no es solo el tamaño de fuente, sino el min-width o flex-shrink del contenedor del número. Podría ser que necesites ajustar también los márgenes o el line-height de los títulos.

mariaweb

Estoy con @gonzaloshop, la versión es clave. Pero más allá de eso, el box-shadow que has puesto es bastante sutil. Para un 'resplandor', normalmente se necesita un valor de spread-radius mayor y quizás jugar con múltiples sombras o con un color más vibrante para la sombra. También asegúrate de que no haya un estilo por defecto en theme.css que esté sobrescribiendo tu box-shadow con un !important o una mayor especificidad.

Para el móvil, prueba a inspeccionar con las herramientas de desarrollador del navegador. Mira cómo se comportan los div de checkout-step y step-number y step-title. A veces, un simple display: block o white-space: nowrap mal aplicado puede generar ese recorte.

Milo

Hola @patricia_es87, gracias por compartir tu código y el problema. Es un detalle estético que mejora mucho la experiencia de usuario. Estás en el camino correcto usando custom.css.

Para conseguir un efecto de resplandor más pronunciado y resolver los problemas de visualización en móvil, podemos ajustar tu CSS. PrestaShop 8.2.2 con el tema Classic usa un buen sistema de clases, lo que facilita la personalización.

Aquí tienes una propuesta de CSS para themes/classic/assets/css/custom.css:

/* Mejora del efecto de resplandor para el paso activo del checkout */
.checkout-step.current .step-title {
    background-color: #007bff; 
    color: white;
    /* Múltiples sombras para un efecto de resplandor más profundo */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.7), 0 0 20px rgba(0, 123, 255, 0.5);
    border-radius: 4px; /* Un poco más de redondeo */
    padding: 12px 18px; /* Ajuste del padding para el resplandor */
    transition: all 0.3s ease-in-out; /* Transición suave */
}

Explicación de los cambios:

box-shadow mejorado: He añadido dos sombras (box-shadow) con diferentes spread-radius y opacidades. Esto crea una sensación de resplandor más rica y visible. También he ajustado el padding y border-radius para que el resplandor se vea mejor alrededor del título.
transition: Añadimos una transición suave para que el efecto de cambio de paso sea más agradable.
@media (max-width: 767.98px): Este es un punto de ruptura común para móviles. Es más preciso que 768px para evitar conflictos con dispositivos de borde.
step-title y step-number en móvil: He ajustado el padding-left del título y he reducido ligeramente el font-size para ambos elementos. Lo más importante es el min-width y line-height del step-number que asegura que el número tenga suficiente espacio y esté bien centrado, evitando el recorte. El margin-right en el número lo separa un poco del título, dándole más aire.

Con estos cambios, el paso activo debería tener un resplandor mucho más notable y la barra de progreso se adaptará mejor a las pantallas pequeñas sin que los elementos se solapen o se recorten.

patricia_es87

¡Mil gracias, @Milo! He aplicado tus cambios en custom.css y el efecto de resplandor es justo lo que buscaba, se ve muchísimo mejor y más profesional. Además, los ajustes para móvil han funcionado a la perfección, ya no hay recortes ni desbordamientos en los números de los pasos.

¡Problema resuelto! Gracias también a @gonzaloshop y @mariaweb por vuestras sugerencias. Me ha sido de gran ayuda.