Trechos de CSS são blocos pré-escritos de código CSS que você pode inserir diretamente no editor Custom CSS no Document360 com um único clique. Em vez de escrever CSS do zero, você seleciona o trecho que precisa, insere no editor e modifica os valores para corresponder aos seus requisitos. O Document360 fornece sete trechos pré-carregados cobrindo as customizações de sites mais comuns na base de conhecimento.
Quando usar trechos de CSS
Use trechos de CSS quando quiser fazer uma mudança visual comum no site da sua base de conhecimento rapidamente, sem escrever CSS do zero:
- Mude a tipografia – atualize a fonte do corpo ou do título em todos os artigos para corresponder às diretrizes da sua marca.
- Personalize estilos de tabela – aplique bordas, cores de fundo e preenchimento consistentes em todas as tabelas da sua base de conhecimento.
- Alinhar imagens - centralizar imagens no conteúdo do artigo em todo o site usando um único trecho.
- Modificar as cores dos callouts - altere as cores do fundo e das bordas dos callouts de Informação, Aviso, Erro e Sucesso para combinar com a paleta da sua marca.
- Mude o fundo do herói da página inicial - atualize a cor ou o gradiente do fundo da seção do herói usando CSS.
- Desative o botão de voltar para cima - esconda o botão flutuante para voltar para cima se ele conflitar com o design do seu site.
Trechos de CSS são um atalho para as personalizações mais comuns. Para mudanças não cobertas pelos trechos pré-carregados, você pode escrever seu próprio CSS diretamente no editor de código. Veja CSS personalizado para orientação.
Como acessar trechos de CSS
- Navegue até Configurações () > Site da base de conhecimento na barra de navegação esquerda do portal da base de conhecimento.
- No painel de navegação à esquerda, navegue até Personalização do Site.
- Clique em CSS & JavaScript Personalizados.
- Selecione a aba CSS .
- Clique em Adicionar trechos de código no canto superior direito do editor de código. O painel de fragmentos aparece.
O painel contém sete trechos pré-carregados:
| Trecho | O que ele faz |
|---|---|
| Alterar a fonte do texto do corpo | Atualiza a família de fontes e a cor do conteúdo do corpo do artigo |
| Alterar fonte de cabeçalho | Atualiza a família de fontes e a cor das tags de cabeçalhos H1–H4 |
| Alterar estilos de tabela | Aplica bordas, preenchimento de cores, cores de fundo e cores alternadas de linhas nas tabelas |
| Imagens de alinhamento ao centro em artigos | Centraliza todas as imagens no conteúdo do artigo |
| Alterar o background da seção de heróis do construtor de página inicial | Muda o estilo de fundo da seção de heróis da página inicial |
| Mude as cores do chamado | Atualiza as cores de fundo e das bordas dos quatro tipos de chamada |
| Desative o botão 'voltar ao topo' | Esconde o botão flutuante de voltar para cima no site |
- Clique em qualquer trecho para inseri-lo no editor CSS.
- Modifique os valores no código inserido para corresponder aos seus requisitos.
- Pressione Ctrl + S ou clique em Salvar para aplicar suas alterações.
Você também pode escrever seu próprio código CSS diretamente na área de texto sem usar os trechos pré-carregados. Qualquer CSS válido inserido no editor se aplica globalmente ao site da base de conhecimento.
Guias de trechos disponíveis
Para guias detalhadas de cada trecho – incluindo o código CSS, exemplos de saídas e dicas de modificação – veja os artigos individuais abaixo:
- Personalização de chamadas
- Personalização da fonte do corpo
- Personalização da fonte do cabeçalho
- Personalização de estilos de tabela
- Personalização do alinhamento de imagens
Melhores práticas
- Sempre faça uma visualização após salvar – mudanças nos trechos se aplicam globalmente. Verifique como a mudança é em diferentes tipos de artigos, tabelas e indicações antes de seguir em frente.
- Modifique um trecho de cada vez - insira e teste um trecho antes de adicionar o próximo. Isso facilita identificar qual trecho causou o problema caso algo pareça errado.
- Remova trechos antigos antes de adicionar um novo trecho de alinhamento – se você adicionar um novo trecho de alinhamento de imagem enquanto um antigo ainda está ativo, ambos vão rodar e podem entrar em conflito. Apague o trecho anterior primeiro.
- Use o trecho como ponto de partida – os valores pré-carregados são padrões sensatos. Substitua nomes de fontes, códigos de cores e valores de tamanho por valores específicos da sua marca.
FAQ
Posso adicionar meus próprios trechos CSS personalizados além dos pré-carregados?
Sim. Você pode escrever e colar seu próprio código CSS diretamente na área de texto da aba CSS. Os trechos pré-carregados e seu código personalizado coexistem no mesmo editor — basta adicionar seu código abaixo ou junto com os trechos inseridos.
As mudanças de trechos afetam todos os espaços de trabalho?
Sim. O CSS é configurado no nível do projeto e se aplica universalmente em todos os espaços de trabalho. Não há como escopar um trecho para um workspace específico pelo editor CSS.
Como faço para remover um pedaço que não preciso mais?
Selecione o código do trecho no editor CSS e pressione Delete no seu teclado para removê-lo. Clique em Salvar para aplicar a alteração.