wolfita Posted July 20, 2014 Share Posted July 20, 2014 (edited) Hola de nuevo chicos, estoy intentando modificar el color de los botones de mi tienda online y no hay manera... El archivo que estoy tocando es el global.css del tema que viene por defecto con prestashop 1.6, ya lo hice en su día con versiones anteriores y lo conseguí fácilmente pero... o hace ya tanto que no recuerdo el cómo o con esta versión el archivo global.css cambia mucho! Esto es lo que he modificado... alguien que me diga si es lo correcto? button.ajax_add_to_cart_button { font: 700 17px/21px Arial, Helvetica, sans-serif; color: white; text-shadow: 1px 1px rgba(0, 0, 0, 0.2); padding: 0; border: 1px solid; border-color: #0079b6 #006fa8 #012740 #006fa8; } .button.ajax_add_to_cart_button span { border: 1px solid; border-color: #06b2e6; padding: 10px 14px; display: block; background: #009ad0; background: -moz-linear-gradient(top, #009ad0 0%, #007ab7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #009ad0), color-stop(100%, #007ab7)); background: -webkit-linear-gradient(top, #009ad0 0%, #007ab7 100%); background: -o-linear-gradient(top, #009ad0 0%, #007ab7 100%); background: -ms-linear-gradient(top, #009ad0 0%, #007ab7 100%); background: linear-gradient(to bottom, #009ad0 0%, #007ab7 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009ad0', endColorstr='#007ab7',GradientType=0); } .button.ajax_add_to_cart_button:hover { border-color: #01314e #004b74 #0079b6 #004b74; } .button.ajax_add_to_cart_button:hover span { filter: none; background: #0084bf; } Lo que intento conseguir es cambiar el color del botón "Añadir al carrito" de la página del producto. Gracias de antemano! Edited July 22, 2014 by wolfita (see edit history) Link to comment Share on other sites More sharing options...
AlexProgramador Posted July 21, 2014 Share Posted July 21, 2014 Lo ideal es que vayas probando con el Firebug a ver donde hace falta poner/cambiar el background. Sino pasa el link de la web y le hago una ojeada. Link to comment Share on other sites More sharing options...
wolfita Posted July 21, 2014 Author Share Posted July 21, 2014 Lo ideal es que vayas probando con el Firebug a ver donde hace falta poner/cambiar el background. Sino pasa el link de la web y le hago una ojeada. Gracias Barcelonawinesonline! La verdad que el tema me lleva loca, más que nada porque sé que no es algo difícil que además ya hice... pero se me ha atravesado! El link de mi tienda es: tgustasmodaycomplementos.es Gracias por la ayuda Link to comment Share on other sites More sharing options...
AlexProgramador Posted July 21, 2014 Share Posted July 21, 2014 Bueno, el problema es que los estilos de al menos los botones de añadir al carrito, no están en el global.css, están en la siguiente ruta: modules/themeconfigurator/css/theme5.css Debes cambiar los backgrounds de la línia 138, encontrarás lo siguiente: .button.ajax add to cart button span { filter: none; border-color: #b04445; background: #b04445; } Y algo muy parecido en la 146 para cuando tienes el ratón encima del botón. Lo he encontrado con el inspector de Google Chrome, en Firebug no sé que pasaba que no me salía bien, te lo digo por si quieres cambiar otros botones. Espero que te sirva ^^. Link to comment Share on other sites More sharing options...
wolfita Posted July 21, 2014 Author Share Posted July 21, 2014 Bueno, el problema es que los estilos de al menos los botones de añadir al carrito, no están en el global.css, están en la siguiente ruta: modules/themeconfigurator/css/theme5.css Debes cambiar los backgrounds de la línia 138, encontrarás lo siguiente: .button.ajax add to cart button span { filter: none; border-color: #b04445; background: #b04445; } Y algo muy parecido en la 146 para cuando tienes el ratón encima del botón. Lo he encontrado con el inspector de Google Chrome, en Firebug no sé que pasaba que no me salía bien, te lo digo por si quieres cambiar otros botones. Espero que te sirva ^^. Muchas gracias! Voy a probarlo y te digo De todos modos yo también utilizo el inspector de google aunque no lo controlo muy bien... la verdad. Ahora estoy mirando y no veo por ningún lado cómo has visto el theme5.css jajaja Puedes pegarme un pantallazo para saber dónde puedo verlo? Es porque me sería muy útil para hacer otros cambios que necesito y así ya no molesto a nadie más! Gracias de nuevo!! Link to comment Share on other sites More sharing options...
wolfita Posted July 21, 2014 Author Share Posted July 21, 2014 Bueno, el problema es que los estilos de al menos los botones de añadir al carrito, no están en el global.css, están en la siguiente ruta: modules/themeconfigurator/css/theme5.css Debes cambiar los backgrounds de la línia 138, encontrarás lo siguiente: .button.ajax add to cart button span { filter: none; border-color: #b04445; background: #b04445; } Y algo muy parecido en la 146 para cuando tienes el ratón encima del botón. Lo he encontrado con el inspector de Google Chrome, en Firebug no sé que pasaba que no me salía bien, te lo digo por si quieres cambiar otros botones. Espero que te sirva ^^. Vale ya entiendo qué pasa... la solución que me has dado también me va genial para cambiar ese botón, pero no es ese al que yo me refería, sino al botón de Añadir al Carrito de la página del producto. El que me has dado es para la lista de productos Ande andará el otro?? Link to comment Share on other sites More sharing options...
AlexProgramador Posted July 22, 2014 Share Posted July 22, 2014 Buenas de nuevo, en este caso lo encontrarás en: themes/default-bootstrap/css/product.css Línea 484, dentro de box-info-product... Debes añadir background: #XXXXXX con el color que quieras, y cambiar el de los bordes. Te dejo la captura de pantalla que me pediste, donde está subrayado debes dejar el puntero y te marca la ruta entera. Link to comment Share on other sites More sharing options...
wolfita Posted July 22, 2014 Author Share Posted July 22, 2014 Buenas de nuevo, en este caso lo encontrarás en: themes/default-bootstrap/css/product.css Línea 484, dentro de box-info-product... Debes añadir background: #XXXXXX con el color que quieras, y cambiar el de los bordes. Te dejo la captura de pantalla que me pediste, donde está subrayado debes dejar el puntero y te marca la ruta entera. Ya está cambiado!! Muchas muchas gracias!! Se queda un borde azul que al menos en mi pantalla apenas se aprecia... pero estoy viendo que todos los bordes los he cambiado y ya no queda ningún estilo azul... pero bueno, lo que quería hacer ya sé al menos de donde Gracias de nuevo!! Link to comment Share on other sites More sharing options...
zebrama Posted November 3, 2014 Share Posted November 3, 2014 Hola, solo quiero complementar el post por si alguien lo requiera. Si se quieren cambiar los bordes del botón en el product.css del theme va perfecto, pero hay una línea azul, la que separa el icono de la cesta del texto que es una imagen: border-1.gif que se encuentra en el directorio img/ del theme. Se puede modificar el color del gif o bien anular la línea que lo enlaza comentándola en el mismo product.css del theme, el estilo está en la posición 475 (aprox): .box-info-product .exclusive:after { background: url(../img/border-1.gif) repeat-y 0 0; position: absolute; top: 0; bottom: 0; left: 51px; content: ""; width: 1px; z-index: 2; } esto lo he visto en el foro inglés firmado por dioniz © Link to comment Share on other sites More sharing options...
Recommended Posts