Manual de CSS da Central de Ajuda

Disponível nos planos Suite Growth e superiores Disponível em todos os planos do Guide

Você pode personalizar facilmente a aparência da central de ajuda usando folhas de estilo em cascata (CSS). Este manual foi projetado para ajudar você a deixar sua central de ajuda com a aparência que você quiser.

Observação: os usuários da avaliação recebem o plano Professional, que inclui opções de edição de código, mas perdem o acesso a esse recurso se compram o Suite Team.

Para acessar e editar o CSS no Guide, consulte Personalização do CSS ou do JavaScript.

Se você não tem experiência com CSS ou se suas habilidades estão um pouco enferrujadas, consulte os tutoriais a seguir para obter ajuda:

Introduction to CSS é o tutorial de CSS mais completo voltado para iniciantes. Ele o guia pelos recursos básicos da linguagem com exemplos práticos que você pode experimentar.
CSS Beginner Tutorial fornece o suficiente para que você possa começar.

Também é possível personalizar a aparência da central de ajuda usando a linguagem de modelos ou JavaScript:

Sumário

O manual está organizado em seções que cobrem elementos da central de ajuda. Cada seção inclui códigos CSS que você pode colar diretamente na folha de estilos do seu tema. Use o código como está ou edite para personalizá-lo.

O manual não é extenso. Modificando modelos HTML e folhas de estilo CSS, você pode fazer muitas coisas. O único limite é o da imaginação.

Cabeçalho e rodapé

O cabeçalho exibe o logotipo e outros componentes, dependendo do tema e das funções de usuário. Você também pode usar o rodapé para exibir links relacionados, informações sobre a sua empresa ou avisos legais.

Voltar para o sumário.

Alteração da cor do plano de fundo do cabeçalho e rodapé

Altere ou adicione a propriedade background-color nos seletores a seguir:

Cabeçalho:

.header {
  background-color: #666;
}

Rodapé:

.footer {
  background-color: #333;
}

Alteração da altura do cabeçalho e rodapé

Altere ou adicione a propriedade height nos seletores a seguir:

Cabeçalho:

.header {
   height: 70px;
}

Rodapé:

.footer {
   height: 20px;
}

Alteração do espaço acima ou abaixo do cabeçalho ou rodapé

Altere ou adicione as propriedades margin-bottom e margin-top nos seletores a seguir:

Cabeçalho:

.header {
     margin-bottom: 20px;
}

Rodapé:

.footer {
     margin-top: 10px;
}

Alteração da aparência do idioma selecionado

Adicione o seletor a seguir e a propriedade:

.language-selector .dropdown-toggle {
  color: green;
}

Alteração da aparência do link Enviar uma solicitação

O modelo header.hbs tem uma versão do cabeçalho para computador e outra para celular no mesmo modelo para torná-lo responsivo. A versão para computador está contida em um div com uma classe chamada nav-wrapper-desktop e a versão para celular está em um div com uma classe chamada nav-wrapper-mobile. Cada div contém um link Enviar uma solicitação separado. Para alterar a aparência do link, você precisa criar versões para computador e para celular da regra CSS e aumentar a especificidade dos seletores.

Adicione os seguintes seletores no arquivo style.css e modifique as propriedades de texto:

.nav-wrapper-desktop a.submit-a-request {
  font-size: 14px;
  color: green;
}

.nav-wrapper-mobile a.submit-a-request {
  font-size: 12px;
  color: green;
}

Ocultação do link Enviar uma solicitação

Adicione os seguintes seletores no arquivo style.css:

.nav-wrapper-desktop a.submit-a-request {
  display:none;
}

.nav-wrapper-mobile a.submit-a-request {
  display:none;
}

Alteração da aparência do link Entrar

Adicione ou modifique as propriedades do texto no seletor a seguir:

.login {
  font-size: 14px;
  color: green;
}

Alteração das dimensões do logotipo

Embora o tamanho de imagem de logotipo recomendado seja 200px por 50px, você pode substituir esse padrão se necessário.

Observação: para usar um logotipo maior do que o tamanho recomendado, você precisa hospedar a imagem do logotipo em algum lugar fora de sua instância do Zendesk Support.

Como alterar o tamanho do logotipo

No Guide, clique no ícone Painel de personalização () na barra lateral.
Clique em Editar tema.
Clique em CSS para abrir a folha de estilos CSS e, em seguida, pesquise pela regra a seguir:
```
.logo img {
  max-height: 37px;
}
```
Para pesquisar, clique dentro do editor de código e pressione Control+F (Windows) ou Cmd+F (Mac).
Modifique a propriedade height no seletor ".logo img" para corresponder à altura da imagem.
Clique em Salvar.

Pesquisa

A caixa de pesquisa faz uma busca por conteúdo na base de conhecimento e na comunidade e exibe links em uma página de resultados. Se você desejar, pode remover a caixa de pesquisa. Para obter mais informações, consulte o auxiliar de pesquisa no guia de modelos da Central de Ajuda.

Voltar para o sumário.

Alteração da altura ou largura do campo de busca

Altere os valores de width ou height nos seletores a seguir:

Caixa de pesquisa grande:

.search input[type=search] {
  height: 50px;
  width: 90%;
}

Caixa de pesquisa pequena:

.search-small input[type=search] {
  height: 50px;
  width: 320px;
}

Alteração da cor do plano de fundo do campo de pesquisa

Altere a propriedade background nos seletores a seguir:

Caixa de pesquisa grande:

.search input[type=search] {
  background: #999;
}

Caixa de pesquisa pequena:

.search-small input[type=search] {
  background: #999;
}

Alteração da aparência do texto da pesquisa

Adicione ou modifique as propriedades do texto nos seletores a seguir:

Caixa de pesquisa grande:

.search {
  font-size: 12px;
  font-family: Tahoma, Arial, sans-serif;
}

Caixa de pesquisa pequena:

.search-small {
  font-size: 12px;
  font-family: Tahoma, Arial, sans-serif;
}

Alteração da aparência do cabeçalho da página de resultados

O cabeçalho da página de resultados de pesquisa consiste de um número de resultados retornado para o termo de pesquisa. Exemplo: 9 resultados para "número de série".

Adicione o seletor a seguir se ele já não estiver na folha de estilos e altere ou adicione propriedades de texto:

.search-results-heading {
  font-size: 36px;
  font-family: Tahoma, Arial, sans-serif;
}

Alteração da aparência do destaque de palavras-chave nos resultados de pesquisa

Termos em destaque nos resultados de pesquisa ficam dentro do elemento embutido <em>, no contêiner .search-result-description. Se você desejar que os termos em destaque sejam exibidos em negrito com fundo amarelo, faça o seguinte:

.search-result-description em {  
  font-weight: bold;
  background-color: #FFF3CA;
  padding: 0px 3px 2px;
  border-radius: 3px;
}

Alteração da aparência da base de conhecimento e cabeçalhos da Comunidade

Adicione ou modifique as propriedades do texto no seletor a seguir:

.search-results-subheading {
  font-size: 24px;
  font-family: Tahoma, Arial, sans-serif;
}

Alteração do espaçamento entre os resultados

Adicione uma propriedade margin-bottom no seletor a seguir:

.search-result {
  margin-bottom: 20px;
}

Alteração da aparência do texto dos resultados

Altere ou adicione propriedades de texto no seletor a seguir:

.search-result {
  font-size: 105%;
  font-family: Arial, Helvetica, sans-serif;
}

Alteração da cor dos links dos resultados

Adicione ou modifique a propriedade color no seletor a seguir:

.search-result a {
  color: #484;
}

Navegação estrutural

A navegação estrutural ajuda os usuários a navegarem pelo conteúdo da central de ajuda. Se você desejar, pode remover a navegação estrutural. Para obter mais informações, consulte o auxiliar de navegação estrutural no guia de modelos da Central de Ajuda.

Voltar para o sumário.

Alteração do espaço acima e abaixo da navegação estrutural

Adicione ou modifique as propriedades padding no seletor a seguir:

.breadcrumbs {
  padding-top; 20px;
  padding-bottom: 16px;
}

Alteração da aparência do texto da navegação estrutural

Altere ou adicione propriedades de texto no seletor a seguir:

.breadcrumbs li {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

Alteração da cor dos links da navegação estrutural

Adicione o seletor a seguir e a propriedade:

.breadcrumbs li a {
  color: #484;
}

Alteração do caractere de ponteiro (>) na navegação estrutural

Altere as propriedades color e content no seletor a seguir:

.breadcrumbs li + li:before {
  color: #158EC2;
  content: ">>";
}

Listas de artigos

Dependendo do tema, listas de artigos são usadas na página inicial e nas páginas iniciais das categorias e seções.

Voltar para o sumário.

Alteração do espaço ao redor da lista de artigos

Adicione ou modifique o seletor a seguir e as propriedades padding:

.article-list {
  padding-left: 16px;
  padding-right; 20px;
}

Alteração do espaçamento entre os artigos

Altere a propriedade margin-bottom no seletor a seguir:

.article-list > li {
  margin-bottom: 10px;
}

Alteração da aparência dos links do artigo

Altere ou adicione propriedades de texto no seletor a seguir:

.article-list > li {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

Alteração da cor dos links do artigo

Adicione o seletor a seguir e a propriedade:

.article-list li a {
  color: #FFF;
}

Artigos da base de conhecimento

Você pode alterar a aparência dos artigos na sua base de conhecimento.

Voltar para o sumário.

Alteração da aparência dos títulos do artigo

Adicione ou modifique o seletor e as propriedades a seguir:

.article-header h1 {
  color: #993;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 20px;
}

Alteração da aparência do texto do artigo

Adicione ou modifique o seletor e as propriedades a seguir:

.article-body {
  color: #666;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

Alteração da cor dos links do artigo

Adicione ou modifique o seletor e a propriedade a seguir:

.article-body a {
  color: #930;
}

Alteração da aparência do nome do autor

Adicione ou modifique o seletor e as propriedades a seguir:

.article-author a {
  color: #669;
  font-family: Georgia, Times New Roman, serif;
  font-size: 16px;
}

Alteração da aparência da última cadeia de caracteres atualizada

Adicione ou modifique o seletor e as propriedades a seguir:

.article-updated {
  color: #CCC;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 13px;
}

Alteração da aparência de "Esse artigo foi útil?"

Adicione ou modifique o seletor e as propriedades a seguir:

.article-vote-question {
  color: #763;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

Alteração da aparência do contador de votos

Exemplo: "6 de 8 acharam isso útil". Adicione ou modifique o seletor e as propriedades a seguir:

.article-vote-count {
  font-family: Georgia, Times New Roman, serif;
  font-size: 10px;
}

Alteração da aparência de "Tem mais dúvidas? Enviar uma solicitação"

Adicione ou modifique o seletor e as propriedades a seguir:

.article-more-questions {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 105%;
}

Alteração da aparência do título “Comentários”

Adicione ou modifique o seletor e as propriedades a seguir:

.article-comments h2 {
  color: #666;
  font-family: Georgia, Times New Roman, serif;
  font-size: 130%;
}

Alteração da aparência do texto do comentário

Adicione ou modifique o seletor e as propriedades a seguir:

.comment-body  {
  color: #666;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
}

Perguntas e respostas da comunidade

Você pode alterar a aparência do conteúdo na sua comunidade.

Voltar para o sumário.

Alteração da aparência dos títulos da pergunta

Adicione ou modifique o seletor e as propriedades a seguir:

.question-title {
  color: #484;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 120%;
}

Alteração da aparência do texto da pergunta

Adicione ou modifique o seletor e as propriedades a seguir:

.question-text {
  color: #666;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
}

Alteração da cor dos links da pergunta

Adicione ou modifique o seletor e a propriedade a seguir:

.question-text a {
  color: #484;
}

Alteração da aparência do nome do autor da pergunta

Adicione ou modifique o seletor e as propriedades a seguir:

.question-author {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Para alterar a cor do link, adicione ou modifique o seletor e a propriedade a seguir:

.question-author a {
  color: #484;
}

Como o nome do autor da pergunta, o tempo decorrido desde a sua publicação e o link de compartilhamento geralmente estão agrupados em uma página, faz sentido, em termos de design, definir a mesma aparência para os três elementos. Para fazer isso, use o seletor combinado abaixo:

.question-author, .question-published, .question-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Alteração da aparência do tempo decorrido desde a publicação da pergunta

Adicione ou modifique o seletor e as propriedades a seguir:

.question-published {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Alteração da aparência do link de compartilhamento de pergunta

Adicione ou modifique o seletor e as propriedades a seguir:

.question-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Alteração da aparência do cabeçalho de respostas

Adicione ou modifique o seletor e as propriedades a seguir:

.answer-list-heading {
  color: #4CC;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 105%;
}

Alteração da aparência do texto da resposta

Adicione ou modifique o seletor e as propriedades a seguir:

.answer-text {
  color: #333;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 105%;
}

Alteração da aparência do nome do autor da resposta

Adicione ou modifique o seletor e as propriedades a seguir:

.answer-author {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Para alterar a cor do link, adicione ou modifique o seletor e a propriedade a seguir:

.answer-author a {
  color: #484;
}

Como o nome do autor da resposta, o tempo decorrido desde a sua publicação e o link de compartilhamento geralmente estão agrupados em uma página, faz sentido, em termos de design, definir a mesma aparência para os três elementos. Para fazer isso, use o seletor combinado abaixo:

.answer-author, .answer-published, .answer-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Alteração da aparência do tempo decorrido desde a publicação da resposta

Adicione ou modifique o seletor e as propriedades a seguir:

.answer-published {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Alteração da aparência do link de compartilhamento da resposta

Adicione ou modifique o seletor e as propriedades a seguir:

.answer-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}