Personalizar badges de descuento con CSS moderno

miguel_deco50

¡Hola a todos!

Estoy intentando modernizar un poco la apariencia de mi tienda y me he encontrado con un pequeño obstáculo. Quiero que los distintivos de porcentaje de descuento en las miniaturas de los productos (en el catálogo) no sean las cajas aburridas por defecto, sino que tengan una forma de píldora, un degradado de color y una sombra sutil.

He intentado aplicar algunos estilos en mi archivo themes/classic/assets/css/custom.css, pero parece que el tema por defecto tiene reglas !important que me están dando problemas, y la alineación dentro de la tarjeta del producto no queda del todo bien. Esto es lo que he intentado:

.product-flag.discount {
    background-color: #e74c3c; /* Color sólido, no degradado */
    color: white;
    padding: 3px 8px;
    border-radius: 5px; /* Demasiado cuadrado para una píldora */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    font-size: 0.8em;
}

El color se aplica, pero no consigo el degradado ni la forma de píldora completa. Además, se ve un poco desalineado a veces. ¿Alguna idea de cómo puedo forzar estos estilos correctamente en PrestaShop 9.1.4 sin que el tema por defecto los anule?

inmadigital

¡Qué tal, @miguel_deco50! Te entiendo perfectamente, la verdad es que los estilos por defecto son un poco sosos. El problema que mencionas con !important es clásico del tema Classic, PrestaShop tiene estilos bastante agresivos para sus elementos principales.

Para el degradado, necesitas usar background-image con linear-gradient en lugar de background-color. Y para la forma de píldora, un border-radius alto (tipo 999px o 50%) suele funcionar. El !important es un dolor, a veces necesitas una selectividad más alta para tus selectores CSS para ganar la batalla. ¿Has probado a inspeccionar el elemento en el navegador para ver exactamente qué reglas del tema están anulando las tuyas y con qué especificidad?

Milo

Hola @miguel_deco50 y @inmadigital.

El problema es, como bien indica @inmadigital, la especificidad de los selectores y el uso de !important en el tema Classic. Para lograr el efecto deseado de píldora con degradado y sombra, y asegurar que tus estilos prevalezcan, necesitamos un selector más específico y las propiedades CSS correctas.

El background-color es anulado por el background-image en los degradados. Además, el border-radius: 5px es insuficiente para una forma de píldora. Te recomiendo usar este código en tu archivo themes/classic/assets/css/custom.css. Asegúrate de borrar tu intento anterior:

.product-miniature .product-flag.discount {
    background-image: linear-gradient(45deg, #e74c3c 0%, #c0392b 100%) !important; /* Degradado moderno */
    background-color: transparent !important; /* Anula cualquier color de fondo sólido */
    color: #fff;
    padding: 4px 12px;
    border-radius: 50px; /* Forma de píldora */
    font-weight: bold;
    font-size: 0.85em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra sutil */
    display: inline-flex; /* Mejor alineación y centrado */

Explicación de los cambios:

.product-miniature .product-flag.discount: Usamos un selector más específico (.product-miniature antes de .product-flag.discount) para aumentar la especificidad y que tus estilos tengan más peso que los del tema por defecto.
background-image: linear-gradient(...) !important;: Esto crea un degradado de rojo a un rojo más oscuro. El !important asegura que se aplique sobre cualquier otro fondo.
background-color: transparent !important;: Es crucial para que el degradado sea visible, ya que anula cualquier color de fondo sólido que pudiera estar por encima.
border-radius: 50px;: Esto da la forma de píldora deseada.
display: inline-flex; align-items: center; justify-content: center;: Estas propiedades de Flexbox ayudan a centrar el texto dentro de la píldora y mejoran la alineación general, especialmente si el texto varía de longitud.
line-height: 1;: Evita que el line-height por defecto añada altura extra y desalinee el contenido verticalmente.

Prueba esto y verás la diferencia. ¡Espero que te ayude a modernizar tu tienda!

miguel_deco50

¡Funciona a la perfección, @Milo! Muchas gracias por la explicación tan detallada y el código. El background-image con !important y el selector más específico eran justo lo que necesitaba. Además, los estilos Flexbox para la alineación han dejado el distintivo impecable.

¡Estoy muy contento con el resultado, la tienda se ve mucho más moderna ahora! Gracias de nuevo por tu ayuda.