Cómo cambiar el color de los menús en una plantilla

En este artículo se va a explicar como cambiar el color de la letra en una plantilla de WordPress utilizando el inspector de elementos de un navegador. Para este cambio no va a ser necesario instalar ningún plugin. Se va a modificar el código en la plantilla que se utiliza en WordPress y será un cambio manual. No es necesario saber programar, se va a trabajar con las herramientas que nos proporciona el navegador.

Trabajando con la plantilla TwentyTwenty

Para esta demostración se ha trabajado con la plantilla TwentyTwenty de WordPress. Es una plantilla oficial que proporciona el propio gestor de contenidos WordPress.

En el navegador Mozilla Firefox nos vamos a Herramientas > Desarrollador web > Inspector. Lo que vamos a hacer es cambiar el menú superior horizontal, el meú principal de la página web para que en vez de tener el color que viene por defecto tenga otro que nosotros elegimos.

Una vez abierto el inspector pulsamos en la flecha situada en la parte superior izquierda para seleccionar un elemento. Una vez seleccionado el elemento vemos la información siguiente:

El código de ese bloque es en donde viene el color #cd2653 tal como se ve en el inspector.

body:not(.overlay-header) .primary-menu > li > a, body:not(.overlay-header) .primary-menu > li > .icon, .modal-menu a, .footer-menu a, .footer-widgets a, #site-footer .wp-block-button.is-style-outline, .wp-block-pullquote::before, .singular:not(.overlay-header) .entry-header a, .archive-header a, .header-footer-group .color-accent, .header-footer-group .color-accent-hover:hover {
    color: #cd2653;
}

Cambiar el color a otro que elijamos en la plantilla

Una vez localizado el bloque que maneja el color de ese menú ya podemos ir a nuestra plantilla dentro de la administración de nuestra página WordPress. Nos movemos hasta Apariencia y en la plantilla que queremos modificar pulsamos en Personalizar.

Una vez dentro de la personalización elejimos la opción de Additional CSS.

Ahora utilizamos el código que vimos en la Fig. 3 y es ahí donde cambiamos el color y ponemos el que queramos, por ejemplo el color # utilizando éste código:

.overlay-header .header-inner.is-sticky {
    background-color: #4C3C35;
}

#site-footer {
 background-color: #4C3C35;
}


body:not(.overlay-header) .primary-menu > li > a, body:not(.overlay-header) .primary-menu > li > .icon, .modal-menu a, .footer-menu a, .footer-widgets a, #site-footer .wp-block-button.is-style-outline, .wp-block-pullquote:before, .singular:not(.overlay-header) .entry-header a, .archive-header a, .header-footer-group .color-accent, .header-footer-group .color-accent-hover:hover {
    color: #BC967A;
}

.color-accent, .color-accent-hover:hover, .color-accent-hover:focus, :root .has-accent-color, .has-drop-cap:not(:focus):first-letter, .wp-block-button.is-style-outline, a {
    color: #BC967A;
}

El resultado final se puede ver en la siguiente figura:

La hoja de estilos CSS

Se modifica por tanto la hoja de estilos de la plantilla que está activa en WordPress. Las hojas de estilo CSS son una serie de órdenes que situamos en el código fuente de plantilla para decirle al navegador como queremos que se vea nuestra página. Es como un guión, un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado.

La plantilla que utilices en WordPress tiene varios ficheros uno de los cuales se llama style.css. Es ese fichero quien define la presentación del documento. Para cambiar el color de ese menú estuve buscando en los ficheros justamente el número del código de color. Ese número no está en el fichero style.css y fue necesario hacerlo de otra forma. Por tanto, fue necesario ir al código fuente de la página, encontrar el elemento y definir en el CSS adicional las características necesarias para cambiar el color.

Resumen

Se quiere cambiar el color del menú horizontal superior de la plantilla Twentytwenty de WordPress. Utilizamos el inspector de elementos del navegador web para localizar ese elemento. Copiamos el código con el código de color que viene en la plantilla. Se accede a la apariencia de la plantilla y en CSS adicional se inserta de nuevo el código. Se cambia únicamente el código de color y ya está hecho.