CSS personalizado

O CSS personalizado no Document360 permite que você aplique seu próprio código CSS para alterar a aparência visual do seu site de base de conhecimento além do que as configurações de personalização do site embutidas. Você escreve as regras CSS diretamente no portal e elas são aplicadas globalmente em todo o seu site de base de conhecimento. Essa é a ferramenta certa quando você precisa de controle preciso sobre tipografia, cores, espaçamento, estilos de tabelas, alinhamento de imagens ou qualquer outro elemento visual que não possa ser configurado pelas configurações padrão.

Quando usar CSS personalizado

Use CSS personalizado quando as opções de estilo embutidas na personalização do site não oferecem o nível de controle que você precisa:

• Sobrepor estilos padrão - altere a aparência de elementos que não estão expostos nas configurações de Personalizar site, como cores de chamado, bordas de tabela ou o botão "voltar para o topo".
• Aplique uma tipografia consistente com a marca – defina uma família de fontes, tamanho ou peso específicos em todos os artigos para corresponder às diretrizes de design do seu produto.
• Corrija problemas de layout ou espaçamento – ajuste margens, preenchimento ou alinhamento para elementos específicos que aparecem diferentes do pretendido.
• Aplique tratamentos visuais às imagens - alinhe imagens ao centro nos artigos, adicione sombras ou defina dimensões consistentes para ilustrações de artigos.

Antes de começar

• Você deve ter uma conta de equipe com acesso administrativo ao portal da Knowledge Base.
• CSS personalizado se aplica globalmente a todo o site da base de conhecimento – as mudanças afetam todas as páginas e todos os leitores.
• O Document360 não valida nem faz lint do seu código CSS, então erros não serão sinalizados automaticamente.
• CSS mal formados ou conflitantes podem quebrar o layout do site. Teste suas mudanças cuidadosamente antes de salvar.
  :::

Como adicionar CSS personalizado

1. Navegue até Configurações () > Site da base de conhecimento na barra de navegação da esquerda do portal da Base de Conhecimento.
2. No painel de navegação à esquerda, navegue até Personalização do Site.
3. Clique em CSS & JavaScript Personalizados.
4. Selecione a aba CSS . O editor de código CSS aparece.
5. Insira seu código CSS na área de texto.

6. Pressione Ctrl + S ou clique em Salvar para aplicar suas alterações.

O CSS agora é aplicado ao seu site de base de conhecimento. Visite o site para visualizar as mudanças.

Como usar trechos de CSS

Trechos de CSS são blocos de código pré-escritos que você pode inserir diretamente no editor CSS. Eles cobrem as tarefas de personalização mais comuns e são projetados para serem modificados de acordo com suas necessidades específicas.

1. Navegue até Configurações () > Site da base de conhecimento > Personalização do site > CSS & JavaScript personalizados.
2. Selecione a aba CSS .
3. Clique em Adicionar trechos de código no canto superior direito do editor de código.
4. No painel de trechos, clique no trecho desejado. O código é inserido no editor CSS.

5. Modificar o código inserido conforme necessário – por exemplo, substituir o nome da fonte, código de cores ou valor de tamanho.
6. Pressione Ctrl + S ou clique em Salvar.

Para guias detalhadas de cada trecho, veja trechos CSS.

Melhores práticas

• Use os trechos pré-construídos como ponto de partida – mesmo que precise personalizar bastante, começar de um trecho garante os seletores e a estrutura corretos para o HTML do Document360.
• Use seletores específicos – evite seletores amplos, como body ou * a menos que seja intencional. Seletores específicos reduzem o risco de sobrepor involuntariamente outros estilos.
• Comente seu código – adicione comentários para explicar o que cada bloco faz, especialmente se vários membros da equipe gerenciam o CSS. Exemplo: /* Centers all article images — added June 2026 */
• Teste tanto no modo claro quanto no escuro – estilos que parecem corretos no modo claro podem ter problemas de contraste ou visibilidade no modo escuro. Sempre faça uma prévia de ambos antes de salvar.
• Mantenha um backup – antes de fazer mudanças significativas, copie o CSS atual para um arquivo de texto. O Document360 não mantém um histórico de versões das alterações personalizadas em CSS.

FAQ