Buenas de nuevo, me gustaria quitar las etiquetas de los productos que vienen en amaltea, y poner las de calisto, son mas bonitas, y la verdad dan otro aspecto.
Me refiero a las indicadas en las capturas.
Nuevo
rebajado (en amaltea)
Nuevo
oferta (en calisto)
URL del sitio: Contenido solo visible a usuarios registrados
Hola,
Prueba a copiar el siguiente código en el fichero: /themes/Amaltea/css/customuser.css
.new-box, .sale-box { height: 95px; overflow: hidden; position: absolute; text-align: center; top: -4px; width: 85px; z-index: 0; } .sale-label { background: #f13340 none repeat scroll 0 0; color: white; display: block; font-size: 14px; padding: 5px 0; position: absolute; right: -33px; text-align: center; text-transform: uppercase; top: 14px; transform: rotate(45deg); width: 85px; z-index: 1; }
Hola
Prueba con el siguiente código CSS
body:not(.product) .new-box, body:not(.product) .sale-box{ position: absolute; overflow: hidden; height: 85px; width: 85px; text-align: center; z-index: 0; } body:not(.product) .new-box{ top:-11px; left:-1px; } body:not(.product) .sale-box{ top:-11px; right:-1px; } body:not(.product) .sale-label { background: #f13340 none repeat scroll 0 0; color: white; display: block; font-size: 14px; padding: 5px 0; position: absolute; left: 22px; text-align: center; text-transform: uppercase; top: 6px; transform: rotate(45deg); width: 85px; z-index: 1; } body:not(.product) .new-label { font-size: 12px; color: white; background: #0089C3; text-transform: uppercase; padding: 4px 0 4px; width: 130px; text-align: center; display: block; position: absolute; left: -33px; top: 16px; z-index: 1; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .new-label{ background: #0089C3; }
Coloca este código al final del archivo :
/themes/Amaltea/css/customuser.css
Esto cambia el aspecto en el listado ya que en el detalla de producto hay funcionalidad adicional
Saludos.
Perfecto, funciona el ultimo codigo, pero hay un pequeñin problema, y es que la etiqueta roja, es diferente a la azul, y me gustaria que fueran iguales, mas que nada por estetica, si te fijas, la roja y azul que estan juntas en diferentes productos, no concuerdan y la roja es mas pequeña.
He estado trasteando los valores, pero nada, no consigo que queden igual.
Que valores meto?
Hola Oscar,
En el estilo CSS indicado prueba a cambiar el padding:
padding: 1px 0 1px;
Haz copia de seguridad antes de aplicar cambios en estilos, porque luego, después de muchos cambios, si quieres volver atrás ni te acordarás de que estilos nativos tenia el archivo css.
Saludos
Hola Oscar.
Estaba revisando para ver como podíamos solucionarlo y al recargar veo que cambiaste las etiquetas por la que tenia originalmente la plantilla.
Un saludo
No se que quieres decir, no he cambiado nada
Hola Oscar.
Lo que quería decirte es que las etiquetas son las de la plantilla original, las que añadiste con las modificaciones no se muestran:
Las etiquetas están definidas para que el background tenga un tamaño igual al texto por eso la etiqueta del porcentaje es más pequeña que la otra.
Una cosa que se podría probar es aumentar el margen del texto del de etiqueta del porcentaje, si quieres que lo veamos dejalo como estaba y veremos si podemos solucionarlo.
Un saludo
efectivamente, en unos sitios me sale de una manera y en otros como adjuntas.
Hola
El código que te envío sólo funciona en la lista de productos, esto es por la naturaleza de la estructura del theme. En el detalle de producto no funcionará
Para hacerlo un poco más grande la etiqueta roja, cambia el código que te envíe por el código siguiente:
verás que se agregó width y se cambió el top y left
body:not(.product) .sale-label { background: #f13340 none repeat scroll 0 0; color: white; display: block; font-size: 14px; padding: 5px 0; position: absolute; left: -12px; text-align: center; text-transform: uppercase; top: 18px; transform: rotate(45deg); width: 85px; z-index: 1; width:140px; }
Saludos.
Perfecto, cambie unos terminos para ajustarlo, y todo a quedado ajustado.
Gracias.