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.
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é
- Alteração da cor do plano de fundo do cabeçalho e rodapé
- Alteração da altura do cabeçalho e rodapé
- Alteração do espaço acima ou abaixo do cabeçalho ou rodapé
- Alteração da aparência do idioma selecionado
- Alteração da aparência do link Enviar uma solicitação
- Ocultação do link Enviar uma solicitação
- Alteração da aparência do link Entrar
- Alteração das dimensões do logotipo
Pesquisa
- Alteração da altura ou largura do campo de busca
- Alteração da cor do plano de fundo do campo de pesquisa
- Alteração da aparência do texto da pesquisa
- Alteração da aparência do cabeçalho da página de resultados
- Alteração da aparência do destaque de palavras-chave nos resultados de pesquisa
- Alteração da aparência da base de conhecimento e cabeçalhos da Comunidade
- Alteração do espaçamento entre os resultados
- Alteração da aparência do texto dos resultados
- Alteração da cor dos links dos resultados
Navegação estrutural
Listas de artigos
Artigos da base de conhecimento
- Alteração da aparência dos títulos do artigo
- Alteração da aparência do texto do artigo
- Alteração da cor dos links do artigo
- Alteração da aparência do nome do autor
- Alteração da aparência da última cadeia de caracteres atualizada
- Alteração da aparência de "Esse artigo foi útil?"
- Alteração da aparência do contador de votos
- Alteração da aparência de "Tem mais dúvidas? Enviar uma solicitação"
- Alteração da aparência do título “Comentários”
- Alteração da aparência do texto do comentário
Perguntas e respostas da comunidade
- Alteração da aparência dos títulos da pergunta
- Alteração da aparência do texto da pergunta
- Alteração da cor dos links da pergunta
- Alteração da aparência do nome do autor da pergunta
- Alteração da aparência do tempo decorrido desde a publicação da pergunta
- Alteração da aparência do link de compartilhamento de pergunta
- Alteração da aparência do cabeçalho de respostas
- Alteração da aparência do texto da resposta
- Alteração da aparência do nome do autor da resposta
- Alteração da aparência do tempo decorrido desde a publicação da resposta
- Alteração da aparência do link de compartilhamento da resposta
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.
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;
}