Avisos
Vaciar todo

Solucionado - Modificar el color de botones PrestaShop mediante custom CSS  

 
Oriol
 Oriol
Usuario experto

Buenos dias,

Quiero modificar los colores de todos los botones de PrestaShop del azul actual al rojo. Mi tema actual trae un panel de administracion donde modificar colores de botones, textos y efectos hover, pero no estan todos los botones.

Los botones que he detectado de momento son los siguientes:

Tengo un campo donde poner Custom CSS así que creo que quizás se podrían modificar desde aquí, pero carezco de conocimiento en lenguajes de programación asi que no se ni lo que tengo que poner ni a que tiene que hacer referencia

Cualquier ayuda será bien recibida 🙂
Gracias!
Saludos

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 29/04/2017 3:38 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Moderator

Hola Oriol,

Lo que aportas afecta a varios (casi todos) los contenidos de tu tema PrestaShop que incluyen algún botón o similar y no aportas una pregunta específica en la que digas ¿que elemento exactamente quieres cambiar de color y a que color? para poder indicarte con exactitud ya que aportarte cambios de estilos genéricos, si como comentas no tienes idea de CSS, solo servirá para liarte más y los cambios incorrectos en PrestaShop es fácil que te desmonten tu tema y la web pase a visualizarse incorrectamente.

Agradezco que concretices para ayudarte mejor. Gracias

ResponderCitar
Respondido : 29/04/2017 11:04 pm

Oriol
 Oriol
Usuario experto

Hola Luis,

Muchas gracias por tu ayuda,

Intentaré explicarme lo más exacto posible, con mi plantilla, por defecto, hay elementos que se comportan de maneras diferentes, pero todos están configurados por defecto para que el comportamiento sea con un color azul.

Por ejemplo, a parte de los botones azules que se ven en las imágenes anteriores, en la página de producto ( http://onlysush-cp56.webprestashop.com/postres/67-mochi-de-chocolate.html) hay un botón para compartir el producto en redes sociales.

El icono está en azul y si pones el cursos encima de las redes sociales, aparece un círculo azul tambien

Lo que quiero es modificar este color azul para que sea rojo,
Si necesito saber información mas exacta, no la sé. También puedo pagar asistencia tecnica al desarrollador de la plantilla para que me indique como realizar el cambio, pero me interesa saber si podria hacerlo yo mismo.

Muchas gracias por la ayuda!
Saludos

ResponderCitar
Respondido : 01/05/2017 12:01 am
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Moderator

Hola Oriol,

Accedo a Contenido solo visible a usuarios registrados y no veo los iconos de redes sociales que citas.

¿Donde puedo localizarlos para revisar el CSS?

Saludos

ResponderCitar
Respondido : 01/05/2017 2:03 am

wpdoctor-revisa-la-salud-de-tu-wordpress

Oriol
 Oriol
Usuario experto

Hola Luis,

En la pantalla que comentas, si pones el ratón encima del texto para compartir el producto "share this", sin hacer click apareceran los logos de las diferentes redes sociales.

Gracias!

ResponderCitar
Respondido : 01/05/2017 9:17 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Puedes agregar el siguiente código CSS al final de algún archivo CSS.

.socialsharing_product button:hover{
  border-color:red;
}

por ejemplo:
/themes/magnium/css/global.css

Documenta tus cambios porque en una actualización los perderás.

Saludos.

ResponderCitar
Respondido : 01/05/2017 11:35 pm

Cursos Gratuitos WordPress

Oriol
 Oriol
Usuario experto

Hola Jhon,

Podrias explicarme un poco esto de "documentar los cambios" para no perderlos al realizar una actualización?

Muchas gracias!

ResponderCitar
Respondido : 02/05/2017 2:42 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Oriol.

Lo que te comenta jhon es que tengas una copia de los archivos que realizas las modificaciones ya que al actualizar prestashop o la plantilla es posible que se sobrescriban esos archivo y perderías todas las modificaciones que tuvieras realizadas.

Al tener una copia por ejemplo en tu equipo puedes volver a subir el archivo.

Un saludo

ResponderCitar
Respondido : 02/05/2017 3:03 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Oriol
 Oriol
Usuario experto

Gracias por la ayuda a todos!

Estoy optando por no añadir ni quitar lineas a los archivos .css de momento.

Estoy trabajando los archivos "global.css" y "style.css" intentando respetarlos al máximo posible

He localizado que el color azul de mi web es el #4686CC y yo quiero usar un rojo #BA2222

Estoy abriendo los dos archivos con editores de texto sin formato y en todos los sitios dónde encuentro el codigo de color azul (#4686CC) lo estoy sustituyendo por el codigo de color rojo (#BA2222)

De momento me está funcionando, no se si hay una manera mas "respetuosa" pero no me gusta añadir código si no es absolutamente necesario.

Si me estoy equivocando agradeceré que me lo hagan saber
Muchas gracias
Saludos

ResponderCitar
Respondido : 04/05/2017 2:52 pm
Julen
 Julen
Miembro Admin

Hola Oriol,

No te preocupes, la forma en la que estas realizando las modificaciones es correcta.

No obstante, antes de modificar cualquier archivo es recomendable descargarte una copia del fichero a tu ordenador, para que tengas un respaldo.

ResponderCitar
Respondido : 04/05/2017 2:58 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Oriol
 Oriol
Usuario experto

Muchas gracias por su ayuda,

Voy buscando el codigo de color por los diferentes archivos .css y haciendo copia de seguridad por si acaso,
Pueden cerrar el hilo

Saludos

ResponderCitar
Respondido : 06/05/2017 6:24 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Oriol.

ok, me alegar que lo solucionaras 😉
Cerramos el tema.

Un saludo

ResponderCitar
Respondido : 06/05/2017 8:12 pm