Jump to content

Recommended Posts

¡Hola! Estoy buscando qué tipo de código tengo que modificar en el CSS para que en la página de producto se puedan mostrar todas las miniaturas de producto. Por defecto sólo se muestran 4 miniaturas, y en Android ni siquiera aparecen las flechas de previo y siguiente para desplazarse por las imágenes. Creo que lo mejor es que se muestren todas las miniaturas para poder hacer click sobre ellas. ¿Alguien me puede indicar qué tipo de código tengo que incluir o modificar en CSS? ¡Gracias!

Captura de pantalla 2019-03-22 a las 14.13.28.png

Share this post


Link to post
Share on other sites

Hola,

Necesitas compartir la URL para ver cómo está estructurado.

 

Saludos!

Share this post


Link to post
Share on other sites

Hola, he encontrado que una de las formas para que se puedan visualizar todas las miniaturas es dando más ancho al espacio donde aparecen.

En el inspeccionador de Google veo el cambio enseguida. Pero este cambio se relaciona con un element.style que no puedo editar en CSS y en el product tpl tampoco me sale resultado.

925972839_Capturadepantalla2019-04-01alas10_42_22.thumb.png.2246047f94db5fdcf326e8736b1b38fc.png

Cuando modifico el valor del element.style sí veo las miniaturas despegadas, o cuando deselecciono el valor width y lo dejo sin valor también puedo ver las miniaturas desplegadas como en la siguiente captura:

1099882435_Capturadepantalla2019-04-01alas10_56_14.thumb.png.3e32b0627a8909430ba02d1b4a69dabb.png

 

¿Podría editarlo dando estilos en CSS a pesar de no poder modificar el product tpl? ¿Alguna idea? Porque no sé ni en qué línea tendría que modificar los cambios.

 

¡Gracias!

 

 

 

Share this post


Link to post
Share on other sites

En este archivo https://abiebrown.es/themes/pf_floristy/css/product.css en la línea 249 cambia esto

#thumbs_list ul#thumbs_list_frame {
    list-style-type: none;
    padding-left: 0;
    overflow: hidden;
    margin: 0;
}

por esto

#thumbs_list ul#thumbs_list_frame {
    list-style-type: none;
    padding-left: 0;
    overflow: hidden;
    margin: 0;
	width: 100% !important;
	padding-top: 10px; /* esto opcional para que haya más espacio entre la imagen grande y las miniaturas */
}

te recomiendo también en la línea 263 añadir padding-bottom: 10px; para que haya espacio entre las miniaturas.

Y si quieres ocultar la flecha en la línea 317 pon esto

#view_scroll_right {
    right: 0;
    display: none !important;
}

 

  • Thanks 1

Share this post


Link to post
Share on other sites

Muchísimas gracias por toda la explicación, he copiado el código tal cual me indicas pero no se produce ningún cambio 😢

¿qué puede estar impidiendo que pueda ver el cambio?

Share this post


Link to post
Share on other sites

refresca cache en rendimiento en el back office

  • Like 1

Share this post


Link to post
Share on other sites

¡Genial! Se han aplicado todos los cambios 👏

Me surge una duda, en el responsive para visualizarlo en dispositivos móviles, ¿puedo también ver todas las miniaturas visibles? porque este cambio lo veo únicamente en ordenador pero no en el móvil. ¿Será otra línea de código?

¡Muchas gracias!

Share this post


Link to post
Share on other sites

seria otra modificacion.

si passas la url sera mas facil q te podamos ayudar ya q podremos mirar direfctamente.

suerte

Share this post


Link to post
Share on other sites

he ido a la url y yo si las veo. eliimina la cache del nmavegador tambien por si acaso o prueba en otro movil q no haya ido a la web

suerte

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More