Vamos a renovar nuestra paleta de colores. El encabezado será verde con un logotipo blanco.
Tengo dificultades para saber cómo cambiar los colores de la lupa y del icono de menú hamburguesa en el encabezado. Actualmente son grises, lo cual se verá terrible sobre un encabezado verde. Los iconos blancos también combinarán con el nuevo logotipo del encabezado.
He revisado el menú de temas y veo una opción llamada “encabezado principal”, que indica en su descripción que cambia el texto y los iconos del encabezado del sitio. Sin embargo, ya lo he configurado en blanco y nada ha cambiado. ¿Hay otra forma de cambiar el color de estos dos iconos?
The icons are a bit transparent, which might be throwing you off (that’s why they look grey instead of white when the header_primary color is set to white).
However, perhaps as we are now on one of the latest releases, now the home, search, and menu icons are greyed out. Can you explain how to make these icons white with opacity of 1? Did any of the selectors change?
Yes, these selectors are a little more specific now and we removed the opacity entirely in favor of using a solid color (there was a bug in Safari where SVG icons were clipped slightly because of the opacity).
You can remove anything you have related to opacity, and do this
I have a similar problem as the OP, probably somewhat simpler: For some reason the colour of the header icons got darker for no apparent reason (I assume it was related to the tidy-up measures on your side). Since my header is a darkish, I want the icons brighter.
I tried this
and am happy with the result. But I can’t seem to figure out how the hover settings work. With only the above css, my hover looks like this:
So the icon turns grey again, which is okay, but I’d like to try some other tints on it. The background seems to turn white (or almost white), which I would like to change to make it coherent with other menus.
Los iconos y el efecto al pasar el cursor se ven así: sea cual sea el color que elija para los iconos o para el efecto al pasar el cursor, no se aplica:
Publico esto por si alguien se encuentra con el mismo problema que yo. Dependiendo de la combinación de colores que utilices para tu encabezado y tus iconos (mi encabezado es de un color oscuro), conseguí las combinaciones de color correctas para mis iconos con el código que proporcionaste:
.d-header-icons .d-icon {
color: white !important;
}
.d-header-icons a:hover {
background-color: #789946 !important;
color: white !important;
}
Sin embargo, cada vez que hacía clic en los iconos del encabezado y sacaba el cursor de ellos, el fondo volvía a un color blanco sólido, lo cual no funcionaba porque mi encabezado es oscuro y mis iconos están configurados en blanco. Así que, al sacar el cursor de ellos (después de un clic), se mostraban como un rectángulo blanco sólido. Para solucionarlo, solo tuve que establecer también el estado para “a”, no solo para “a:hover” como en las publicaciones anteriores (#93bb54 es el mismo color que mi encabezado):
.d-header-icons .d-icon {
color: white !important;
}
.d-header-icons a:hover {
background-color: #789946 !important;
color: white !important;
}
.d-header-icons a {
background-color: #93bb54 !important;
color: white !important;
}
Agregué algunos iconos personalizados en SVG, pero no puedo cambiar su color usando CSS. Siempre aparecen en negro. Puedo cambiar la opacidad, el tamaño, etc., pero nunca el color.
Intenté usar los ejemplos anteriores, pero ninguno devolvió el resultado esperado.
Tengo la misma situación que Sentinelrv. Ajusté header_primary a blanco y también apliqué el CSS personalizado recomendado a cada uno de mis temas, pero el icono de la lupa y el menú hamburguesa siguen apareciendo en gris.
Yo tampoco puedo cambiar los colores del menú hamburguesa/barra, el icono de búsqueda/buscar sí cambió. He probado todos los consejos mencionados y más, inspeccionando cosas en el navegador web, pero (al no ser un desarrollador web) fallé. ¿Alguien ha resuelto esto?
Para los iconos de la cabecera en el lado derecho, en el CSS común de un tema o componente de tema:
.d-header .d-header-icons .d-icon {
color: <color de los iconos de la cabecera> !important;
&:hover {
color: <color de los iconos de la cabecera al pasar el ratón por encima> !important;
}
}
Para el icono de hamburguesa en el modo de menú de la barra lateral:
.d-header .header-sidebar-toggle button .d-icon {
color: <color del icono de hamburguesa> !important;
&:hover {
color: <color del icono de hamburguesa al pasar el ratón por encima> !important;
}
}
<color de los iconos de la cabecera>, <color de los iconos de hamburguesa>, <color del icono de la cabecera al pasar el ratón por encima>, <color del icono de hamburguesa al pasar el ratón por encima> = código hexadecimal, nombre de color o variables de color del tema. También puedes especificar background-color si deseas cambiar el color de fondo del icono.
Nota: Si estás utilizando el modo desplegable de hamburguesa en lugar de la barra lateral, el primer fragmento para los iconos de la cabecera del lado derecho también incluirá el icono de hamburguesa.
