O sumário (TOC) no site da base de conhecimento usa links cinza por padrão, com o título ativo atualmente destacado em azul. Você pode mudar essas duas cores usando o CSS personalizado para melhorar a visibilidade ou alinhar o TOC com sua marca. A mudança se aplica globalmente a todos os artigos do site.
Quando usar uma cor personalizada de TOC
- Alinhamento da marca: combine a cor do link do TOC com a cor principal do seu produto para que a barra lateral pareça parte do mesmo design visual.
- Melhorar a visibilidade: aumentar o contraste entre os links TOC e o fundo da barra lateral para facilitar a leitura da navegação.
- Distinga estado ativo: use uma cor distinta para o título ativo para ajudar os leitores a acompanhar sua posição em um artigo longo.
Essas mudanças no CSS se aplicam globalmente ao sumário de todos os artigos do seu site da Base de Conhecimento.
Referência rápida
Use os trechos para a versão do seu site da base de conhecimento. Substitua os valores de cor pelos códigos hexadecimais ou nomes de cor CSS desejados.
Todos os links do TOC e ícones de alternância:
d360-table-of-content .toc-item .toc-toggle-icon,
d360-table-of-content .toc-item a {
color: red !important;
}
Apenas cabeçalhos selecionados atualmente (ativos):
d360-table-of-content .toc-item.selected a {
color: blue !important;
}
Como mudar a cor do índice
- No portal da Base de Conhecimento, acesse Configurações > site da Base de Conhecimento > CSS & JavaScript Personalizados.
-
Selecione a aba CSS e cole o trecho apropriado.
Cole ambos os trechos para controlar a cor padrão do link e a cor ativa do título de forma independente. Se quiser mudar apenas um, cole apenas o trecho relevante. -
Substitua os valores de cor pelas cores desejadas — use um código hexadecimal (por exemplo,
#1a73e8) ou um nome de cor CSS (por exemplo,steelblue). -
Clique em Salvar.
Desfecho
Antes
Por padrão, os links TOC aparecem em cinza, e o título ativo atualmente é destacado em azul.
Depois
Após salvar o CSS, os links TOC inativos mudam para a cor especificada (vermelho neste exemplo). A cor ativa do cabeçalho é controlada separadamente e permanece azul, a menos que você também atualize o trecho de cabeçalho selecionado.
