Personalize a marca do seu site

:bookmark: Este é um tutorial não técnico que o guiará na personalização da marca e da aparência do seu site Discourse.

:person_raising_hand: Nível de usuário necessário: Administrador

Deseja personalizar a marca do seu site, mas não sabe por onde começar? Leia mais para descobrir!

O Assistente de Configuração

O Discourse é altamente personalizável! Um bom ponto de partida para as personalizações do site é fazer login com sua conta de administrador no site e executar o assistente de configuração do site. :mage:

O assistente de configuração permite que você configure o título do site, o idioma padrão e as configurações de acesso (público vs. privado, cadastro vs. apenas por convite e se os usuários precisam ser aprovados). Essas são as etapas essenciais iniciais para colocar seu site no ar.

Assim que o assistente for concluído, você poderá personalizar ainda mais a aparência do seu site — logotipos, cores, fontes e muito mais — pelo painel de administração.

Você pode visualizar as opções disponíveis diretamente nesta página. Clique no botão “Próximo” quando tiver encontrado as configurações que funcionam para você. Não se preocupe, você sempre poderá alterar essas configurações mais tarde se decidir que elas não são o que você procura.

Temas do Site

Depois de ter uma configuração básica em vigor, é hora de personalizar seu site ainda mais! :sparkles:

Temas são personalizações abrangentes que alteram vários elementos do estilo do design do seu fórum e, frequentemente, incluem recursos adicionais de front-end. Os temas têm a capacidade de alterar significativamente a aparência e o layout do seu fórum.

A categoria #theme no Meta abriga uma variedade de temas pré-criados que você pode usar no seu site para personalizar sua aparência. Este é o melhor lugar para pesquisar um tema para usar no seu site. Vá em frente e escolha um tema que você gostaria de usar para o seu site nesta categoria.

Depois de decidir qual tema usar no seu site, você pode adicioná-lo ao site na página Admin -> Personalizar -> Temas (localizada em /admin/config/customize/themes). Você também pode fazer alterações no tema do seu site ou até mesmo criar um tema completamente novo a partir desta página.

O Guia para iniciantes sobre o uso de Temas do Discourse é um curso intensivo sobre os fundamentos dos temas do Discourse e fornece uma visão geral de como instalar temas no seu site Discourse. Leia este guia para obter instruções sobre como instalar o tema que você escolheu.

tipping_hand_woman: Você também pode encontrar mais informações sobre como usar, criar e compartilhar seus próprios temas em:

Paletas de Cores

Você pode personalizar ainda mais seu site ajustando sua paleta de cores na página Admin -> Config -> Cores (localizada em /admin/config/colors). :art:

A partir daqui, você pode criar uma nova paleta de cores, selecionar uma paleta existente para personalizar e atribuir paletas como o esquema claro ou escuro padrão para o seu tema.

Selecione um esquema de cores existente para basear seu novo esquema de cores e, em seguida, personalize as cores do seu novo esquema clicando na cor ao lado de cada seção de cor:

Não se esqueça de nomear seu novo esquema de cores e salvar suas alterações quando terminar!

tipping_hand_woman: Precisa de ajuda para decidir sobre as cores? Uma ferramenta de seleção de cores, como Paletton - The Color Scheme Designer, pode ser muito útil para isso!

Para informações adicionais sobre como você pode usar paletas de cores dentro do Discourse, consulte:

Componentes de Tema

Assim como os temas, o Discourse também possui “Componentes de Tema” que você pode usar para alterar elementos de superfície do design do seu fórum ou adicionar recursos adicionais de front-end. Menores e mais direcionados do que temas completos, eles geralmente (embora nem sempre) podem ser combinados com outros componentes de tema para criar um design de fórum sob medida para sua comunidade. :gear:

A categoria #theme-component no Meta contém todos os componentes de tema oficiais e não oficiais do Discourse. Confira os componentes de tema listados lá e, se quiser instalar algum deles no seu site, basta seguir as instruções aqui: A Interface de Temas do Discourse e Como Instalar Componentes de Tema

Alguns dos Componentes de Tema do Discourse mais populares incluem:

tipping_hand_woman: O Discourse também possui um alternador de modo escuro/claro integrado, controlado pela configuração do site interface_color_selector, que pode ser configurado para mostrar o alternador no rodapé da barra lateral ou no cabeçalho.

tipping_hand_woman: A tag theme-guides no Meta também possui muitos guias práticos com ideias para personalizar ainda mais seu site com Componentes de Tema.

Marca do Site

O Discourse possui uma página dedicada de configuração de logotipo em Admin -> Aparência -> Logotipo (localizada em /admin/config/logo), onde você pode gerenciar todos os logotipos e ícones do seu site.

  • Logotipo principal - Aparece na navegação superior do site, bem como no topo das Notificações por E-mail do site. Tamanho recomendado: 600 × 80 pixels.
  • Logotipo principal escuro - Alternativa para modo escuro do logotipo principal. Tamanho recomendado: 600 × 80 pixels.
  • Ícone quadrado - Uma versão quadrada da imagem do logotipo que aparece no topo do site e também é o logotipo do aplicativo móvel. Tamanho recomendado: 512 × 512 pixels.
  • Favicon - O logotipo aparecerá como o ícone na aba do navegador e nos favoritos/marcadores do navegador.
  • Logotipo pequeno - A imagem do logotipo pequeno no canto superior esquerdo do seu site, visível ao rolar para baixo. Se deixado em branco, um glifo de casa será exibido. Tamanho recomendado: 120 × 120 pixels.
  • Logotipo pequeno escuro - Alternativa para modo escuro do logotipo pequeno. Tamanho recomendado: 120 × 120 pixels.

Na seção Móvel:

  • Logotipo móvel - O logotipo usado na versão móvel do seu site. Se deixado em branco, a imagem da configuração logo será usada. Use uma imagem retangular larga com altura de 120 e uma proporção maior que 3:1.
  • Logotipo móvel escuro - Alternativa para modo escuro do logotipo móvel. Use uma imagem retangular larga com altura de 120 e uma proporção maior que 3:1.
  • Ícone do manifesto - Imagem usada como logotipo/imagem de splash no Android. Se deixado em branco, large_icon será usado. Tamanho recomendado: 512 × 512 pixels.
  • Capturas de tela do manifesto - Capturas de tela que destacam os recursos e a funcionalidade da sua instância na página de prompt de instalação (exibida ao usar “Adicionar à tela inicial” no Android). Todas as imagens devem ser uploads locais e ter as mesmas dimensões.
  • Ícone de toque da Apple - Ícone usado para dispositivos de toque da Apple. Se deixado em branco, large_icon será usado. Tamanho recomendado: 180 × 180 pixels. Fundo transparente não é recomendado.

Na seção E-mail:

  • Logotipo do resumo - A imagem alternativa do logotipo usada no topo do resumo por e-mail do seu site. Se deixado em branco, a imagem da configuração logo será usada. Use uma imagem retangular larga. Não use uma imagem SVG.

Na seção Redes sociais:

  • Imagem OpenGraph - Imagem opengraph padrão, usada por muitos aplicativos e plataformas para pré-visualizações de links da web quando uma página não possui outra imagem adequada. Se deixado em branco, large_icon será usado.
  • Imagem grande de resumo do X - Imagem grande de resumo do cartão X. Se deixado em branco, metadados de cartão regular são gerados usando o OpenGraph_image, desde que este também não seja um arquivo .svg. Tamanho recomendado: pelo menos 280 × 150 pixels. Não use uma imagem SVG.

tipping_hand_woman: Para obter os melhores resultados, recomendamos seguir as diretrizes de tamanho listadas acima para cada tipo de logotipo e ícone.

Personalizações Adicionais

Agora que você adicionou um tema personalizado, uma paleta de cores, alguns logotipos de marca e talvez alguns componentes de tema ao seu site, você concluiu todas as personalizações básicas do site! :tada:

Se você ainda está procurando mais maneiras de personalizar seu site Discourse, recomendamos ler qualquer um dos seguintes tópicos que possam interessá-lo:

8 curtidas

Então, o que Manifest screenshots realmente faz? Onde essas capturas de tela são usadas? É quando alguém instala sua comunidade como um aplicativo local através do navegador? As imagens são o que aparecem se você tornar sua comunidade detectável com o Discourse Discover?

Vejo essas capturas de tela quando uso a opção “adicionar à tela inicial” no Chrome no meu dispositivo Android

2 curtidas

Interessante! Pensei que era isso que eles faziam, mas não os vi quando instalei no meu desktop (Chrome, Windows). Mas talvez eu não tenha dado tempo suficiente para eles carregarem/se propagarem em algum lugar.

Ainda bem que eu estava certo sobre o que eles fazem!

1 curtida

Parece que esta seção foi omitida por engano,

1 curtida

Depois de ler duas vezes, acho que entendi. As diretrizes de tamanho estão incluídas acima. Por exemplo:

Acho que, em geral, este guia está bastante desatualizado. Você não pode mais adicionar um logotipo ou configurar a aparência no assistente. A página de administração de temas agora tem uma aparência totalmente diferente, e os esquemas de cores foram renomeados para paletas de cores.
O componente de tema de alternância de modo escuro/claro foi movido para o núcleo. E a marca tem uma nova página de configuração em /admin/config/logo.
Só me pergunto por que o tamanho mencionado na página de configuração é diferente da descrição quando olho a configuração do site.


600×80 é diferente de min. 360×120.

2 curtidas

Este tópico está um pouco desatualizado, pois essas coisas foram recentemente reformuladas.

Aqui estão minhas ideias sobre algumas sugestões de melhoria menores (mas valiosas):

4 curtidas