Eliminar efecto hov...
 
Avisos
Vaciar todo

Eliminar efecto hover listado productos

4 Respuestas
3 Usuarios
0 Reactions
2,320 Visitas
Respuestas: 10
Active Member
Topic starter
 

Hola, estoy utilizando Prestashop 1.6 con el tema por defecto.
Me gustaría eliminar el efecto hover de los listados de productos. Pretendo que al pasar el cursor sobre un producto no se produzca ningún efecto y así sólo se vería el título y el precio. ¿Alguna idea para poder hacerlo? Gracias!!!

URL del sitio: Contenido solo visible a usuarios registrados


 
Respondido : 03/07/2016 1:02 pm
Pepe
 Pepe
Respuestas: 42221
Illustrious Member Admin
 

Hola Natalia.
Prueba editando el archivo global.css que se encuentra en ' themes/default-bootstrap/css/global.css ' y añade lo siguiente al final del archivo:

.button-container {
  display: block !important;
}

Después de esto edita el archivo ' product_list.css ' que se encuentra en ' /themes/default-bootstrap/css/product_list.css ' y añade lo siguiente:

ul.product_list.grid > li .product-container .old-price, ul.product_list.grid > li .product-container .price, ul.product_list.grid > li .product-container .price-percent-reduction {
    display: none;
}

ul.product_list.grid > li.hovered .product-container .product-image-container .content_price {
    display: none;
}

Comprueba si este es el efecto que buscabas.

Nota: Recuerda realizar una copia del archivo antes de cualquier modificación, solo con un copia y pega en el block de notas tendrás suficiente para dejarlo como estaba anteriormente.

Un saludo


 
Respondido : 03/07/2016 2:24 pm
Respuestas: 10
Active Member
Topic starter
 

Gracias Pepe,
He aplicado los cambios pero ahora:
1. los botones "añadir carrito" y "más" estan fijos.
2. Cuando paso el ratón por encima, aparece el efecto hover mostrando el precio y los dos botones anteriores :ohmy:


 
Respondido : 03/07/2016 5:03 pm
Johnny Heredia Montiel
Respuestas: 20131
Illustrious Member Moderator
 

Hola,

Prueba a crear un fichero CSS personalizado https://www.webempresa.com/blog/como-modificar-estilos-css-en-plantillas-joomla-wordpress-o-prestashop.html e inserta el siguiente código:

ul.product_list.grid > li .product-container .product-image-container .content_price {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  bottom: -1px;
  display: none;
  left: 0;
  padding: 9px 0;
  position: absolute;
  width: 100%;
}

 
Respondido : 03/07/2016 5:48 pm