Hola comunidad !
Quiero comentaros un problema que tengo en la modificacion del tema classic de prestashop. Se que hay que modificar codigo para solucionarlo pero saber cual de ellos se me va un poco de las manos.
He cambiado el tamaño de mis imagenes ( principalmente home-default ) y todo va bien, pero resulta que ahora el tamaño del producto se sale fuera de los margenes de su " espacio ", adjunto imagen. ¿ me podriais decir que el codigo css que debo modificar para que se ajuste y se quede en su sitio ?
URL del sitio: Contenido solo visible a usuarios registrados
Hola José Manuel.
Puedes cambiar el tamaño de las imágenes pero luego tendrás que adaptar la caja donde se muestra las imágenes de los productos para que se adapte.
Prueba añadir lo siguiente a tu archivo :
.product-miniature img { max-width:60%; }
Puedes cambiar los tamaños por defecto de las imágenes si accedes a Preferencias -> Imagenes
Si optas por esta ultima opción acuérdate que tienes que regenerar las imágenes, en la misma pagina al final veras el botón para regenerarlas:
Un Saludo
Gracias por su respuesta,
¿ Donde debo añadirlo ? ¿ En theme.css ?
Si es ahí donde debo añadirlo, actualmente lo está y no surge efecto. el producto sigue siendo mayor que la caja
Hola Juan Discúlpame que antes te cambie el nombre :ohmy:
Veo que si se modifico:
Es posible que sea por cache, si ves que en algún momento no te funcionan las modificaciones, recarga la pagina con la tecla ( f5 ) para que recargue la cache.
¿ Esta solucionado y podemos cerrar la entrada ?
Un saludo
Perdone por la torpeza mia, justo en el momento que usted comprobaba mi web yo estaba haciendo de nuevo los ajustes... pero sigo con el problema como le dije en el mensaje anterior. Introduje el codigo que usted me proporciono en theme.css y sigue todo igual.
Puede comprobarlo de nuevo en mi web.
Hola Juan.
Edita el archivo custom.css que encontraras en themes/classic/assets/css/custom.css y añade lo siguiente:
.product-miniature img { max-width: 60%!important; }
Lo que no entiendo es por que quieres modificarlo si antes se veía bien.
Si empiezas a realizar modificaciones de tamaños o celdas de tu web, poco a poco empezaras a reportar errores por otros sitios ya que igual lo que modificas en una parte de la web, para otra sección puede que no sea bueno.
Piensa que muchos códigos y mas los de tamaños, son globales y afectan a otras partes de tu web.
Un saludo
Hola de nuevo.
He seguido tus pasos y el codigo funciona, pero no a la perfeccion.
Está claro que si dejo el tema tal los productos se ven bien como usted dice, pero mi intencion era cambiar el tamaño de las imagenes home-default ( 250px 250px ) a el tamaño que yo deseo de 350px 525px.
Cuando hago este proceso y regenero las imagenes, el producto no cabe en su caja, como te demostre en el adjunto.
Al modificar el archivo custom.css como usted me dijo, el producto si cabe dentro de su caja ( aunque pisando un poco las palabras " todos los productos ") pero su tamaño disminuye respecto al que yo deseo.
Debe de haber otra solucion que adapte el box de los productos a ellos sin que las medidas de mis imagenes varien ya que en otros temas las utilizan.
Hola Juan.
Ok, lo que quieres es que la caja se adapte a la imagen, no la imagen a la caja.
Añade lo siguiente al archivo custom.css que encontraras en themes/classic/assets/css/custom.css
#products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container, .product-miniature .thumbnail-container { height: 640px; width: 370px; }
Un saludo
Perfecto!! solucionado el tema.
Solo me queda saber si en la versión movil puedo visualizar los productos como si no fuese hecho ninguna modificación y aun tuviese home-default en 250px250px ya que ahora la imagen aparece casi a pantalla completa y me gusta mas como viene de forma predeterminada.
Para bien decir que esta modificación que hemos realizado no influya en la versión movil
Hola
Prueba envolviendo el código en un media query, es decir
@media (min-width:768px){ #products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container, .product-miniature .thumbnail-container { height: 640px; width: 370px; } }
El código sólo tendrá efectos para tamaños de pantalla > 768px
Saludos
Hola Juan Manuel.
Añade lo siguiente:
@media (max-width: 768px) { #products img, .featured-products img, .product-accessories img, .product-miniature img { height:400px } #products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container, .product-miniature .thumbnail-container { height: 475px; width: 300px; } }
Un saludo
GENIAL ! todo está quedando tal y como deseaba.
Si os fijais tanto en la version web como en la version movil, tanto en la parte superior como en la inferior sale como un margen en la imagen, tambien en la vista previa y en la pagina de producto.
He probado con margin-top y algo mas pero nada surge efecto, y no tengo ni idea de a que de debe.
¿ se puede hacer desaparecer ese margen ?