Personalize a marca do seu site

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

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

Quer personalizar a identidade do seu site, mas não sabe por onde começar? Continue lendo para descobrir!

O Assistente de Configuração

O Discourse é altamente personalizável! Um bom lugar para começar com as personalizações do site é fazer login na 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 seu site, o idioma padrão e as configurações de acesso (público ou privado, cadastro ou apenas por convite, e se os usuários precisam ser aprovados). Estes são os primeiros passos essenciais para colocar seu site em funcionamento.

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

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

Temas do Site

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

Os temas são personalizações abrangentes que alteram múltiplos elementos do estilo do design do seu fórum e, muitas vezes, também incluem recursos adicionais de front-end. Os temas têm a capacidade de mudar significativamente a aparência e o layout do seu fórum.

A categoria Customization > Theme no Meta hospeda uma variedade de temas pré-criados que você pode usar no seu site para personalizar a aparência do mesmo. Este é o melhor lugar para procurar um tema para usar no seu site. Sinta-se à vontade para escolher um tema que você gostaria de usar para o seu site nesta categoria.

Depois de decidir qual tema usar para o seu site, você pode adicionar o tema ao seu 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 o 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 esquema padrão claro ou escuro 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 cores:

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

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

A categoria Customization > Theme component no Meta contém todos os componentes de tema oficiais e não oficiais do Discourse. Analise os componentes de tema listados lá e, se quiser instalar algum deles no seu site, basta seguir as instruções aqui: A Interface do Tema 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 definido 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 de como fazer com ideias para personalizar ainda mais o seu site com Componentes de Tema.

Identidade Visual do Site

O Discourse possui uma página dedicada à configuração do 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. O tamanho recomendado é 600 × 80 pixels.
  • Logotipo principal escuro - Alternativa para o modo escuro do logotipo principal. O 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. O 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 quando você rola para baixo. Se deixado em branco, será exibido um glifo de casa. O tamanho recomendado é 120 × 120 pixels.
  • Logotipo pequeno escuro - Alternativa para o modo escuro do logotipo pequeno. O tamanho recomendado é 120 × 120 pixels.

Na seção Mobile:

  • 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 de aspecto maior que 3:1.
  • Logotipo móvel escuro - Alternativa para o modo escuro do logotipo móvel. Use uma imagem retangular larga com altura de 120 e uma proporção de aspecto maior que 3:1.
  • Ícone do Manifest - Imagem usada como logotipo/imagem de abertura no Android. Se deixado em branco, large_icon será usado. O tamanho recomendado é 512 × 512 pixels.
  • Capturas de tela do Manifest - Capturas de tela que destacam os recursos e a funcionalidade da sua instância em sua 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 Apple - Ícone usado para dispositivos de toque da Apple. Se deixado em branco, large_icon será usado. O tamanho recomendado é 180 × 180 pixels. Um fundo transparente não é recomendado.

Na seção Email:

  • Logotipo do resumo - A imagem do logotipo alternativo usada no topo do resumo de 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 padrão opengraph, usada por muitos aplicativos e plataformas para visualizações de links quando uma página não tem outra imagem adequada. Se deixado em branco, large_icon será usado.
  • Imagem grande de resumo do X - Imagem de resumo grande do cartão X. Se deixado em branco, os metadados regulares do cartão são gerados usando o OpenGraph_image, desde que este também não seja um arquivo .svg. O tamanho recomendado é de 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ê terminou todas as personalizações básicas do site! :tada:

Se você ainda estiver procurando por mais maneiras de personalizar seu site Discourse, recomendamos ler qualquer um dos seguintes tópicos que possam interessar a você:

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