Hola a todos,
Estoy intentando darle un aspecto más moderno y visual a los mensajes de disponibilidad de stock en la ficha de producto y en el listado del tema Classic. La idea es tener como una "insignia" con un color de fondo pastel, un pequeño punto de color al principio y el texto del estado (En stock, Últimas unidades, Bajo pedido).
He estado trasteando con el custom.css pero no consigo que quede bien alineado, sobre todo el icono que trae por defecto PrestaShop y el texto. Además, el fondo se aplica a todo y no consigo el efecto de "pastilla" con un punto de color.
Este es mi intento actual en themes/classic/assets/css/custom.css:
.product-quantities span.product-availability {
background-color: #e0ffe0; /* Verde muy claro para 'En stock' */
padding: 5px 10px;
border-radius: 4px;
display: inline-block;
margin-left: 5px;
font-size: 0.9em;
color: #333;
}
.product-quantities span.product-availability i {
El problema es que el <i> no siempre aparece o no queda integrado como un punto, y la alineación general se me resiste. ¿Alguna idea de cómo enfocar esto correctamente para conseguir ese look de insignia con punto de color?
Gracias!