Este é um tutorial não técnico que guiará você na personalização da identidade visual e da aparência do seu site Discourse.
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. ![]()
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! ![]()
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.
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). ![]()
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!
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. ![]()
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:
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.
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çãologoserá 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_iconserá 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_iconserá 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çãologoserá 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_iconserá 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.
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! ![]()
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ê:





