La idea de esta pequeña guía es poder cambiar el color de los enlaces del menú horizontal.
Si nos fijamos en inspeccionar elemento (en Chrome, señalar elemento, botón derecho del ratón => inspeccionar elemento)
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;
}
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:
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.
