Personalize a marca do seu site

[Discourse]

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

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 é 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.

A opção “Configurar Mais” do assistente de configuração permite que você selecione um logotipo do site, esquema de cores, fonte e estilo da página inicial para o site:

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ê está procurando.

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 expansivas que alteram vários 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 alterar 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 em seu site para personalizar a aparência dele. Este é o melhor lugar para procurar um tema para usar em 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 em seu site, você pode adicioná-lo ao seu site na página Admin -> Customize -> Themes (localizada em .../admin/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 no uso de temas Discourse é um curso intensivo sobre os conceitos básicos de temas do Discourse e fornece uma visão geral de como instalar temas em 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:

• Guia do Designer para Temas Discourse
• Guia do Desenvolvedor para Temas Discourse

Esquemas de Cores

Você pode personalizar ainda mais seu site ajustando o esquema de cores na página “Admin → Customize → Colors” (localizada em /admin/customize/colors).

Vamos criar um novo esquema de cores para usar em seu site clicando no botão “+ Novo” nesta página:

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!

Precisa de ajuda para decidir as cores? Uma ferramenta de seleção de cores como http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF pode ser muito útil para isso!

Depois de ficar satisfeito com seu esquema de cores, você pode atribuí-lo ao seu tema atual e visualizá-lo para ver as alterações em seu site refletidas ao vivo.

Suas alterações também serão aplicadas automaticamente ao site assim que você atualizar a página.

Para informações adicionais sobre como você pode usar esquemas de cores no Discourse, veja:

Create and share a color scheme

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 temas completos, eles geralmente (embora nem sempre) podem ser combinados com outros componentes de tema para criar um design de fórum personalizado para sua comunidade.

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

• Dark/Light Mode Toggle
• Brand Header
• DiscoTOC - automatic table of contents
• Custom Header Links
• Versatile Banner

A tag theme-guides no Meta também tem muitos guias de como fazer com ideias para personalizar ainda mais seu site com Componentes de Tema.

Marca do Site

Além dos logotipos que você escolheu no assistente de configuração do site, o Discourse também tem várias outras configurações relacionadas à marca do site na página “Admin → Settings → Branding” (localizada em /admin/site_settings/category/branding) que você pode usar para adicionar imagens e logotipos personalizados ao seu site.

Nesta página, você pode adicionar os seguintes tipos de logotipos ao seu site:

• logo - A imagem do logotipo no canto superior esquerdo do seu site. Use uma imagem retangular larga com uma altura de 120 e uma proporção maior que 3:1. Se deixado em branco, o texto do título do site será exibido.
• logo small - A pequena imagem do logotipo no canto superior esquerdo do seu site, vista ao rolar para baixo. Use uma imagem quadrada de 120 × 120. Se deixado em branco, um glifo de casa será exibido.
• digest logo - A imagem alternativa do logotipo usada no topo do resumo de e-mail do seu site. Use uma imagem retangular larga. Não use uma imagem SVG. Se deixado em branco, a imagem da configuração logo será usada.
• mobile logo - O logotipo usado na versão móvel do seu site. Use uma imagem retangular larga com uma altura de 120 e uma proporção maior que 3:1. Se deixado em branco, a imagem da configuração logo será usada.
• logo dark - Alternativa de esquema escuro para a configuração do site logo.
• logo small dark - Alternativa de esquema escuro para a configuração do site logo small.
• large icon - Imagem usada como base para outros ícones de metadados. Idealmente, deve ser maior que 512 x 512. Se deixado em branco, logo_small será usado.
• manifest icon - Imagem usada como logotipo/imagem de splash no Android. Será redimensionada automaticamente para 512 × 512. Se deixado em branco, large_icon será usado.
• manifest screenshots - Capturas de tela que mostram os recursos e a funcionalidade da sua instância na página de prompt de instalação. Todas as imagens devem ser uploads locais e das mesmas dimensões.
• favicon - Um favicon para o seu site, veja Favicon - Wikipedia. Para funcionar corretamente sobre um CDN, deve ser um png. Será redimensionado para 32x32. Se deixado em branco, large_icon será usado.
• apple touch icon - Ícone usado para dispositivos Apple touch. Será redimensionado automaticamente para 180x180. Se deixado em branco, large_icon será usado.
• opengraph image - Imagem padrão do opengraph, usada por muitos aplicativos e plataformas para pré-visualizações de links quando uma página não tem outra imagem adequada. Idealmente, deve ser quadrada. Se deixado em branco, large_icon será usado.
• twitter summary large image - Cartão do Twitter ‘summary large image’ (deve ter pelo menos 280 de largura e 150 de altura, não pode ser .svg). Se deixado em branco, metadados de cartão regulares são gerados usando o opengraph_image, desde que este também não seja um .svg

Para melhores resultados aqui, recomendamos seguir as diretrizes de tamanho para cada tipo de logotipo.

Personalizações Adicionais

Agora que você adicionou um tema personalizado, esquema 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 está procurando mais maneiras de personalizar seu site Discourse, recomendamos ler qualquer um dos seguintes tópicos que possam lhe interessar:

• Personalize qualquer texto no Discourse
• Customizing the Discourse outer email template
• Creating and configuring custom user fields
• Configure custom emoji

[jordan-violet]

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?

[Moin]

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

[jordan-violet]

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!

[calebhearth]

@Discourse

Para obter os melhores resultados aqui, recomendamos seguir as diretrizes de tamanho para cada tipo de logotipo.

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

[Moin]

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

@Discourse

• logo - A imagem do logotipo no canto superior esquerdo do seu site. Use uma imagem retangular larga com altura de 120 e uma proporção maior que 3:1. Se deixado em branco, o texto do título do site será exibido.

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.

[nathank (Nathan Kershaw)]

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

Some additional tweaks for Logos and Icons in the core settings

I’ve just set up a new site, and hit a few hiccoughs. First, I love the new admin settings (/admin/config/logo) - they are a vast improvement and visually very nice. Suggestion 1 That the new term “Square icon” be used instead of large_icon in the text explainers. The old name has been changed, but this hasn’t been followed through with in the text. Suggestion 2 That there is a separate Android icon under Mobile, as there is for iOS. At present, the Square Icon is used for the Android home …