Avisos
Vaciar todo

Cambiar botones en prestashop

10 Respuestas
2 Usuarios
0 Reactions
234 Visitas
Respuestas: 203
Estimable Member
Topic starter
 

Hola a todos!

Tengo los botones de amaltea echos un "cristo" me salen diferentes unos de otros y también distintos en la versión movil.

El caso es que necesito que el boton de añadir a la cesta sea uniforme ya que ahora cuando pasa el ratón por encima cambia de color parcialmente no de manera conjunta.

También en el botón de "añadir al carrito" de los accesorios el color tampoco es uniforme y cuando pasa el ratón por encima no cambia de color para indicar que se puede pulsar. Tambíen me sería muy util si me indicatis cómo quitarlo...

Hay otro botón más, el de "Manual de uso", donde se descarga el documento, que el texto no se ve y que me gustaría cambiar el color de fondo también por el que yo elija.

También quiero que estos botones sean responsive, que funciones bien también en móviles.

Alguien me puede dar una solución?
Adjunto pantallas.

Gracias anticipadas al FENÓMENO que me resuelva esto.

Buen dia a todos!
Jose.

Alguien me puede dar una solución?
Adjunto pantallas.

URL del sitio: Contenido solo visible a usuarios registrados


 
Respondido : 27/11/2018 2:20 pm
Jhon
 Jhon
Respuestas: 44989
Illustrious Member Moderator
 

Hola

Con respecto al botón de añadir al carrito prueba con el siguiente código CSS:

.box-cart-bottom #add_to_cart button:before{
	transition:all 0.3s;	
}

.box-cart-bottom #add_to_cart:hover button:before {
	background:black;
}

Puedes añadir este código al final del archivo:
/themes/Amaltea/css/customuser.css

Refresca tu navegador para ver los cambios.

Saludos


 
Respondido : 27/11/2018 5:25 pm
Respuestas: 203
Estimable Member
Topic starter
 

Hola Jhon!

Así queda perfecto pero me gustaría que el fondo fuese verde: #66cc00

Me puedes indicar cómo poner el botón entero el color indicado cuando pasa el ratón por encima?

Sobre lo demás me puedes dar solución?

Gracias anticipadas.

Buena tarde!


 
Respondido : 27/11/2018 6:39 pm
Jhon
 Jhon
Respuestas: 44989
Illustrious Member Moderator
 

Hola

Prueba agregando adicionalmente el siguiente código que cambia el aspecto de todos los botones de agregar al carrito

ul.bxslider .button.ajax_add_to_cart_button,
.button.ajax_add_to_cart_button span,
.box-info-product .exclusive:before,
.box-info-product .exclusive span{
	background-color:#66cc00;
}

ul.bxslider .button.ajax_add_to_cart_button:hover,
.button.ajax_add_to_cart_button:hover span{
	background-color:black;
}

Saludos.


 
Respondido : 27/11/2018 8:37 pm
Respuestas: 203
Estimable Member
Topic starter
 

Hola John!

Este último código me funciona perfectamente! GRACIAS!

Lo único que el botón de "agregar al carrito" de la página del producto me sigue apareciendo igual. He intentado cambiar el color al verde del código #66cc00 y sólo me cambia la parte donde aparece el gráfico del carrito, el resto me aparece con el fondo negro cuando paso el ratón por encima, te adjutno pantalla

También verás que hay un borde negro sólamente debajo que me gustaría que fuese en todo el perímetro para que dé la sensación de botón "presionado"

Quedo a la espera de tus valiosas soluciones.

Saludos cordiales.
Jose.


 
Respondido : 28/11/2018 1:28 pm
Jhon
 Jhon
Respuestas: 44989
Illustrious Member Moderator
 

Hola

Prueba con el siguiente código CSS en lugar del último que te envié, básicamente se agrego al final .box-info-product .exclusive:hover span

ul.bxslider .button.ajax_add_to_cart_button,
.button.ajax_add_to_cart_button span,
.box-info-product .exclusive:before,
.box-info-product .exclusive span{
	background-color:#f78f1e;
}

.box-info-product .exclusive:hover span,
ul.bxslider .button.ajax_add_to_cart_button:hover,
.button.ajax_add_to_cart_button:hover span{
	background-color:#66cc00;
}

Saludos.


 
Respondido : 28/11/2018 5:28 pm
Respuestas: 203
Estimable Member
Topic starter
 

Así funciona perfectamente pero me he dado cuenta que en la versión movil no aparece el dibujillo del carrito en el botón ni tampoco el símbolo "check" cuando se ha añadido y tampoco se pone en verde.

Me puedes seguir ayudando con esto?

Miles de gracias.
Buena tarde!

Saludos.
Jose


 
Respondido : 29/11/2018 5:49 pm
Jhon
 Jhon
Respuestas: 44989
Illustrious Member Moderator
 

Hola

Puedes probar añadir el siguiente código CSS:

.box-info-product .exclusive:before {
	display: block!important; 
}

Saludos.


 
Respondido : 29/11/2018 6:29 pm
Respuestas: 203
Estimable Member
Topic starter
 

Nada lo he cambiado y no funciona...


 
Respondido : 29/11/2018 6:45 pm
Jhon
 Jhon
Respuestas: 44989
Illustrious Member Moderator
 

Hola

No veo que hayas agregado el código
Contenido solo visible a usuarios registrados

Saludos.


 
Respondido : 29/11/2018 6:57 pm