Cómo cambiar el color del enlace de las opciones del encabezado

Por defecto, los enlaces de navegación de cabecera en tu base de conocimientos no muestran cambio de color cuando los lectores pasan el cursor sobre ellos. Añadir un color flotante da a los lectores una señal visual clara de que las opciones de cabecera son enlaces interactivos, mejora la usabilidad de la navegación y te permite alinear el efecto de vuelo con la paleta de tu marca.

Cuándo usar esto

Utiliza esta personalización cuando quieras:

• Haz que los enlaces de navegación de encabezado respondan visualmente al pasar el cursor para que los lectores los reconozcan como clicables.
• Aplica un color de hover coherente con la marca a la navegación de encabezado en toda tu base de conocimientos.
• Sustituye el comportamiento de flotación de un tema por defecto que no se ajuste a tus requisitos de diseño.

Antes de que empieces

• Necesitas acceso a Configuración (
  ) > Sitio de la base de conocimiento > Personalización del sitio > CSS y JavaScript personalizados en el portal de la base de conocimiento.
• Ten preparado el código de colores HEX que deseas. El fragmento predeterminado se usa red como marcador de posición; sustituye esto por tu valor de color real.

Cómo cambiar el color del cabecero del cursor

1. Navega a Configuración (

   ) > Sitio de la base de conocimiento > personalización del sitio > CSS y JavaScript personalizados en el portal de la base de conocimiento.

   

2. Desde el panel de navegación izquierdo, selecciona la pestaña CSS y pega el siguiente fragmento.

a[role="menuitem"]:hover {
    color: red !important;
    text-decoration: none;
}

3. Sustituye red por el color de hover que quieras, por ejemplo, un valor HEX como #0077cc o un valor RGB.

4. Haz clic en Guardar.

   

Resultado

Antes

Cuando los lectores pasan el cursor sobre las opciones de navegación del encabezado, no hay cambio de color y los enlaces aparecen estáticos.

Después

Cuando los lectores pasan el cursor sobre las opciones de navegación del encabezado, el color del enlace cambia al color especificado, proporcionando una clara retroalimentación visual de que el elemento es interactivo.

Mejores prácticas

• Usa un valor de color HEX o RGB en lugar de un nombre de color. Los nombres de colores CSS red son imprecisos y rara vez coinciden exactamente con paletas de marcas. Sustituye red por tu código HEX específico para obtener resultados precisos y consistentes.
• Asegúrate de que el color del hover contraste con el fondo del encabezado. Un color de flotación demasiado cercano al color de fondo del encabezado será imperceptible. Prueba el cambio visual en tu base de conocimientos en vivo después de guardar.
• Mantener !important. El sitio de la base de conocimiento aplica sus propios estilos de tema que pueden anular la especificidad estándar de CSS. Eliminarlo !important puede hacer que el color flotante no se aplique en algunas configuraciones de temas.
• Prueba después de guardar. Abre tu sitio de base de conocimientos y pasa el cursor sobre cada elemento de navegación de cabecera para confirmar que el cambio de color es visible y consistente en todos los enlaces.