Versões comparadas

Versão Versão antiga 28 Nova versão Atual
Alterações feitas por

Paulo Henrique Paixão

Paulo Henrique Paixão

Gravado em

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

Aqui você aprenderá como realizar todas as customizações necessárias para o novo padrão visual e funcional do Help Center.

...

Nota

Antes de

começar

iniciar

Certifique-se de que você tem as informações e os acessos necessários:

  1. Cores do produto

    • Obtenha os códigos hexadecimais das cores primária, secundária e terciária do produto.

    • Consulte o time de UX ou acesse o NDS (Design System) para localizar as cores oficiais.

  2. Acesso ao repositório de ícones

    • Confira o repositório do produto para com os ícones atualizados.

    • Caso não encontre um ícone necessário, solicite acesso ao Figma para criar ou ajustar os ícones.

  3. Aviso ao administrador

    • O administrador do Help Center deve ser avisado com antecedência sobre a mudança, enviando as cores para que os scripts sejam gerados.

Neste artigo

Índice
minLevel2
maxLevel2
outlinefalse
styledisc
typelist
printabletrue

...

Passo 1: Alteração dos ícones dos documentos

...

Como atualizar:

  1. Baixe os ícones no repositório do produto.

  2. Substitua os ícones antigos pelos novos nos documentos.

  3. Se necessário, crie novos ícones no Figma e exporte-os para o formato PNG.

...

Passo 3: Personalização do tema do Help Center

  1. Na barra superior do Confluence, clique na aba Aplicativos

  2. Clique em Scroll Viewport

  3. Na lista, selecione o Help Center que deseja editar o tema

  4. Clique no botão Edit theme > Templates

Header

  • Logo: Substitua pelo logotipo oficial do Help Center.

Painel
panelIconId1f609
panelIcon:wink:
panelIconText😉
bgColor#E3FCEF

Não esqueça do contraste:

Group 8713-20241212-163634.pngImage Added

  • Cor de fundo: Altere para a cor secundária do produto.

  • Cor do texto: Configure como branco #FFFFFF.

...

Dica

O logo e o banner você encontra no repositório do produto.

Categorias (Tiles ordering)

Crie categorias para organizar o conteúdo de forma intuitiva:

...

Bloco de código
languagecss
@import url("https://confluencendd.github.io/public/app-hc-[produto].css”css")

Custom JS

Insira o script abaixo para carregar funcionalidades adicionais:

...

  • Ícones foram atualizados?

  • Descrições dos documentos foram revisadas?

  • Categorias estão organizadas?

  • Scripts CSS e JS foram incluídos corretamente?

...

Dica

Por fim, atualize o Help Center (Update site).