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

Quer 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 é muito 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 configurar o título do seu site, o local padrão e as configurações de acesso (público vs. privado, inscrição vs. somente convite e se os usuários precisam ser aprovados). Estas são as etapas iniciais 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 — no painel de administração.

Você pode pré-visualizar as opções disponíveis diretamente nesta página. Clique no botão “Avançar” 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ê estava procurando.

Temas do Site

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

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

A categoria #theme no Meta hospeda uma variedade de temas pré-criados que você pode usar no seu site para personalizar a aparência dele. Este é o melhor lugar para procurar 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 sobre um tema para usar no seu site, você pode adicioná-lo ao seu site na página Admin -> Customize -> Themes (localizada em /admin/config/customize/themes). Você também pode fazer alterações no tema do seu site, ou até mesmo criar um tema totalmente novo a partir desta página.

O Guia para Iniciantes sobre o Uso de Temas do Discourse é um curso intensivo sobre os conceitos básicos de 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 -> Colors (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 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 no Discourse, consulte:

Componentes de Tema

Semelhante aos temas, o Discourse também tem “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 focados do que temas completos, eles geralmente (embora nem sempre) podem ser combinados com outros componentes de tema para criar um design de fórum personalizado adaptado à sua comunidade. :gear:

A categoria #theme-component no Meta contém todos os componentes de tema oficiais e não oficiais do Discourse. Procure pelos componentes de tema listados lá e, se desejar instalar algum deles no seu site, basta seguir as instruções aqui: A Interface de 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 tem um toggle de modo escuro/claro integrado, controlado pela configuração do site interface_color_selector, que pode ser definida para mostrar o toggle no rodapé da barra lateral ou no cabeçalho.

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

Marca do Site (Branding)

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

  • Logo 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.
  • Logo principal escuro - Alternativa de modo escuro para o 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.
  • Logo pequeno - A pequena imagem do logotipo no canto superior esquerdo do seu site, vista ao rolar para baixo. Se deixado em branco, um glifo de casa será exibido. Tamanho recomendado é 120 × 120 pixels.
  • Logo pequeno escuro - Alternativa de modo escuro para o logotipo pequeno. Tamanho recomendado é 120 × 120 pixels.

Sob a seção Móvel:

  • Logo 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 uma altura de 120 e uma proporção maior que 3:1.
  • Logo móvel escuro - Alternativa de modo escuro para o logotipo móvel. Use uma imagem retangular larga com uma altura de 120 e uma proporção maior que 3:1.
  • Ícone Manifest - 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 Manifest - Capturas de tela que exibem os recursos e a funcionalidade da sua instância na página de prompt de instalação (mostrada 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. Um fundo transparente não é recomendado.

Sob a seção E-mail:

  • Logo do Resumo - A imagem de logotipo alternativa 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.

Sob a seção Mídia social:

  • Imagem OpenGraph - Imagem opengraph padrão opengraph, 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 normais são gerados usando a OpenGraph_image, desde que esta também não seja um .svg. Tamanho recomendado é de pelo menos 280 × 150 pixels. Não use uma imagem SVG.

:tipping_hand_woman: Para obter 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 com todas as personalizações básicas do site! :tada:

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

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):

3 curtidas