Cambiar colores de los enlaces del menú horizontal en Prestashop 1.7

La idea de esta pequeña guía es poder cambiar el color de los enlaces del menú horizontal.

Enlaces de menú horizontal en Prestashop

Si nos fijamos en inspeccionar elemento (en Chrome, señalar elemento, botón derecho del ratón => inspeccionar elemento)

Consola Chrome

Vemos nos muestra la siguiente instrucción:

#header .header-top a[data-depth="0"] {
color: #7a7a7a;
text-transform: uppercase;
}

Situada en el fichero => /themes/classic/assets/css/theme.css

Si bien es cierto que podemos descomprimir la hoja de estilo y editar la línea, es mejor crear la regla en el fichero  /themes/classic/assets/css/custom.css

Depende copiar la regla, pegarla en el fichero custom.css y cambiar el valor de la propiedad color, he preferido por crear una regla nueva del siguiente modo:

#header .header-top #top-menu a[data-depth="0"] {
color:codigo_color;
}

De este modo, nos aseguramos que se aplique a lo que se encuentra debajo del id => top-menu

Vamos a dejarlo con un color “rosa” => #ec006e

#header .header-top #top-menu a[data-depth="0"] {
color:#ec006e;
}
custom.css modificado

Si tras cambiar añadir la regla no ves ningún cambio, recuerda limpiar la caché del navegador. En principio solo la caché del navegador, ya que en principio no es necesario limpiar la caché de Prestashop en la pestaña Parámetros Avanzados -> Rendimiento.

El resultado final es el siguiente:

Color enlaces principales del menú horizontal cambiados en Prestashop

Recordar que solo hemos cambiado el color de los principales, por eso hemos tratado con => data-depth=”0″. Dependiendo del color en el nivel de enlaces que queramos cambiar usaremos el valor 0, 1…

Documento creado bajo Prestashop 1.7.4.2 con la plantilla por defecto.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *