El índice (TOC) en el sitio de la Base de Conocimientos utiliza enlaces grises por defecto, con el encabezado actualmente activo resaltado en azul. Puedes cambiar ambos colores usando Custom CSS para mejorar la visibilidad o alinear la TOC con tu marca. El cambio se aplica a nivel global en todos los artículos del sitio.
Cuándo usar un color personalizado de TOC
- Alineación de marca: haz coincidir el color del enlace de TOC con el color principal de tu producto para que la barra lateral se sienta parte del mismo diseño visual.
- Mejora la visibilidad: aumenta el contraste entre los enlaces TOC y el fondo de la barra lateral para facilitar la lectura de la navegación.
- Distingue el estado activo: utiliza un color distinto para el encabezado activo que ayuda a los lectores a seguir su posición en un artículo largo.
Estos cambios en CSS se aplican globalmente al índice de contenidos de todos los artículos de tu Base de Conocimiento.
Referencia rápida
Utiliza los fragmentos para la versión de tu base de conocimientos. Sustituye los valores de color por los códigos hexadecimales o los nombres de color CSS que quieras.
Todos los enlaces de los TOC e iconos de alternación:
d360-table-of-content .toc-item .toc-toggle-icon,
d360-table-of-content .toc-item a {
color: red !important;
}
Solo encabezado seleccionado actualmente (activo):
d360-table-of-content .toc-item.selected a {
color: blue !important;
}
Cómo cambiar el color del índice
- En el portal de la Base de Conocimiento, ve a Configuración > sitio de la Base de Conocimientos > CSS y JavaScript personalizados.
-
Selecciona la pestaña CSS y pega el fragmento correspondiente.
Pega ambos fragmentos para controlar el color predeterminado del enlace y el color activo del encabezado de forma independiente. Si solo quieres cambiar uno, pega solo el fragmento relevante. -
Sustituye los valores de color por los colores deseados — usa un código hexadecimal (por ejemplo,
#1a73e8) o un nombre de color CSS (por ejemplo,steelblue). -
Haz clic en Guardar.
Resultado
Antes
Por defecto, los enlaces TOC aparecen en gris y el encabezado activo actualmente está resaltado en azul.
Después
Tras guardar el CSS, los enlaces TOC inactivos cambian al color especificado (rojo en este ejemplo). El color activo del encabezado se controla por separado y permanece azul a menos que también actualices el fragmento de encabezado seleccionado.
