Então, você está interessado em criar seu próprio tema para o Discourse? Você chegou ao tópico certo 
Este guia terá mais foco nos aspectos de SCSS/CSS ao trabalhar com temas no Discourse. Se você também tem conhecimento em JS/EmberJs/Handlebars, pode aprofundar ainda mais consultando este guia.
Vou descrever para você meus métodos pessoais de design e tematização no Discourse. Como na maioria das coisas, existem MUITAS maneiras de implementar seus próprios designs. Gosto de usar bastante as ferramentas de inspeção ao criar temas e mostrarei algumas vezes como faço isso neste post.
Configuração para Temas
Por favor, leia o Guia para Iniciantes no Uso de Temas do Discourse, bem como a Estrutura de Temas… antes de continuar. Um conhecimento profundo não é necessário neste ponto, mas esses artigos darão um pouco mais de familiaridade antes de começar.
Para trabalhar da melhor forma com temas no Discourse, sugiro se configurar com o seguinte para oferecer a si mesmo o processo de design mais rápido e fluido. Essas etapas permitirão que você veja suas alterações conforme as faz, sem precisar ‘salvar’ e atualizar a partir de um painel de administração do site Discourse.
É totalmente possível trabalhar através deste guia usando o console de administração (desde que você tenha acesso de nível de administrador a um fórum Discourse.)
- Instale o Discourse Theme CLI e leia esse tópico para entender o que ele pode fazer.
- Obtenha uma Chave de API em https://discourse.theme-creator.io/
- Faça login com sua Conta Meta
- Clique em Meus Temas
- Clique em Chave de API
- Na janela de diálogo, clique em Gerar Chave de API e copie a chave gerada para você (usaremos isso em breve)
Executando o Discourse Theme CLI
Com o Discourse Theme CLI instalado e sua Chave de API pronta, abra seu editor de texto ou janela de terminal preferida e mude seu diretório de trabalho para onde você gostaria que a pasta do seu tema fosse configurada.
Lá, execute o seguinte comando discourse_theme new your_theme_name e preencha os prompts da seguinte forma:
-
Como você gostaria de chamar seu tema? Escolha o nome do seu tema
-
Gostaria de começar a observar este tema? Sim
-
Qual é a URL raiz do seu Site Discourse?
https://discourse.theme-creator.io/ -
Gostaria que o nome deste site fosse armazenado em…? Sim
-
Qual é a sua Chave de API? insira a chave de API que você obteve no theme creator
-
Gostaria que esta chave de API fosse armazenada…? Sim
-
Escolha Criar e Sincronizar com um novo tema quando solicitado
-
Escolha Não Fazer Nada quando solicitado sobre componentes de tema filho
Se tudo funcionou corretamente, você agora deve ser capaz de navegar para Meus Temas em https://discourse.theme-creator.io/ e ver seu novo tema na lista de temas à esquerda.
Para visualizar essas alterações em tempo real, clique no nome do seu tema e, em seguida, na parte inferior da área de informações, clique em Pré-visualizar
O Theme CLI também está agora observando qualquer alteração no diretório recém-criado e salvará, bem como atualizará o tema no theme-creator a cada mudança.
Primeiros Passos
O Discourse Theme CLI criou um esqueleto de tema para nós dentro da pasta de nome que especificamos no comando que executamos anteriormente. Muitos arquivos são gerados que não usaremos, então vamos em frente e apagar tudo, exceto o seguinte:
common/common.scss
desktop/desktop.scss
mobile/mobile.scss
about.json
Dentro do diretório, execute rm -rf .git também para remover o controle de versão git, ele não será necessário para este guia.
Seu diretório de tema deve agora se parecer com isto:
Vale a pena notar que os estilos que adicionamos a esses arquivos serão renderizados em seus respectivos casos de uso. Os estilos em common.scss serão aplicados a desktop + mobile, enquanto os estilos em desktop.scss serão aplicados apenas à navegação em desktop, e aqueles em mobile.scss se aplicarão apenas às visualizações mobile.
Hello World (em cor)
O Discourse usa SCSS para seu estilo, então, para aproveitar melhor os estilos, você pode querer se familiarizar com SASS, mas, se não, ainda será capaz de acompanhar este guia.
Ok, agora vamos ao que todos estavam esperando… TEMATIZAÇÃO!
No momento, nosso about.json não tem nenhum color_schemes definido, então cole o seguinte código naquela seção e salve.
{
"name": "my theme",
"about_url": null,
"license_url": null,
"assets": {},
"color_schemes": {
"Default": {
"primary": "222222",
"secondary": "ffffff",
"tertiary": "0088cc",
"quaternary": "e45735",
"header_background": "ffffff",
"header_primary": "333333",
"highlight": "ffff4d",
"danger": "e45735",
"success": "009900",
"love": "fa6c8d"
}
}
}
Se você tiver seu navegador aberto, não verá nenhuma alteração com efeito, porque este é o esquema de cores padrão usado quando nenhum esquema está presente.
Visão Geral do Tema
Para ter algo para realmente implementar neste guia, vou guiá-lo na criação de um tema simples baseado nesta paleta de cores.
Alterando a Cor de Fundo + Cor do Texto Primário
Vamos fazer algo muito simples. Vamos em frente e alterar o valor "Secondary" do nosso esquema de cores atual. Vamos alterá-lo para "secondary": "EEF4F7" (isso altera a cor de fundo.) Vamos também alterar o valor "primary" para "203243".
Com apenas aquela linha, já alteramos a aparência e a sensação do nosso fórum. Muitas personalizações podem ser feitas apenas editando as cores no esquema de cores.
Uso do Esquema de Cores
Todas as seguintes chaves são definidas no arquivo about.json sob o nome correspondente do esquema de cores. Essas descrições são uma boa referência para ajudar você a entender qual é o objetivo principal de cada nome de variável:
| Cor | Descrição |
|---|---|
| primary | A maioria dos textos, ícones e bordas |
| secondary | A cor de fundo principal e a cor do texto de alguns botões |
| tertiary | Links, alguns botões, notificações e cor de destaque |
| quaternary | Links de navegação |
| header_background | Cor de fundo do cabeçalho do site |
| header_primary | Textos e ícones no cabeçalho do site |
| highlight | A cor de fundo de elementos destacados na página, como posts e tópicos |
| danger | Cor de destaque para ações como excluir posts e tópicos |
| success | Usado para indicar que uma ação foi bem-sucedida |
| love | A cor do botão de curtir |
Cada uma dessas variáveis está disponível para uso dentro dos nossos arquivos SCSS da seguinte forma.
body {
background-color: var(--primary);
}
Outras versões de cada cor também são criadas para nosso uso. Coisas como var(--primary-medium) ou var(--primary-very-low) podem ser usadas para obter diferentes tons da mesma cor.
Vamos alterar as outras cores do nosso esquema de cores “Default” para corresponder a isto:
"Default": {
"primary": "203243",
"secondary": "EEF4F7",
"tertiary": "416376",
"quaternary": "5E99B9",
"header_background": "FaFaFa",
"header_primary": "EEF4F7",
"highlight": "86BDDB",
"danger": "8F393E",
"success": "70DB82",
"love": "FC94CB"
}
Você pode ver todas as variáveis disponíveis para uso em seus arquivos SCSS se clicar no link Guia de Estilos enquanto pré-visualiza seu tema no theme creator e, em seguida, clicar em Cores no menu à esquerda.
O Guia de Estilos é uma seção muito útil para observar quando você está criando um tema personalizado. Cada Átomo mostrará como certos elementos do Discourse parecerão com seus estilos aplicados.
Aprofundando
Com a seção anterior debaixo de nosso braço, acho que é hora de aprofundarmos um pouco no que pode ser feito no Discourse apenas com SCSS. (Dica: MUITO!)
Estilizando o Cabeçalho
Você notará que nossas alterações anteriores no esquema de cores deixaram algo a desejar em nosso cabeçalho. Os ícones são mal visíveis!
O Cabeçalho do Discourse inclui um contêiner (com uma cor de fundo) para segurar um logotipo do site, bem como os ícones de navegação à direita. Todos esses podem ser personalizados.
A classe alvo para personalizar o cabeçalho é .d-header.
Em nosso arquivo common/common.scss, vamos adicionar o seguinte:
.d-header {
box-shadow: none;
border-bottom: 1px solid var(--primary-low-mid);
height: 5em;
}
Isso removerá a sombra padrão da caixa no cabeçalho, dará um pouco mais de altura, bem como definirá uma borda inferior para nos dar alguma separação.
Para os ícones – Dentro dos colchetes SCSS de .d-header, vamos adicionar este código aninhado.
.d-header {
// ...código anterior
.d-icon {
color: var(--primary-low-mid);
}
}
Isso está ficando bom, mas um olhar atento notará que a altura aumentada do cabeçalho nos deu menos espaço entre ele e o restante dos elementos do fórum Discourse!
O espaçamento entre a área principal e o cabeçalho é controlado pelo alvo #main-outlet. Vamos aumentar esse espaçamento um pouco adicionando o seguinte à parte inferior do seu arquivo common/common.scss.
#main-outlet {
padding-top: 6.5em;
}
Contêiner de Navegação
O contêiner de navegação inclui as seguintes peças.
A área mais à esquerda são os menus suspensos de filtro de categoria/tag, seguidos pelos links de navegação, terminando com o botão Novo Tópico.
Menu Suspenso de Categoria / Tag
Vamos fazer algumas alterações nesta área. Para isso, adicione o seguinte ao seu arquivo common.scss.
.navigation-container {
.select-kit.combo-box {
.select-kit-header {
border-radius: 0.9em;
background-color: var(--header_background);
}
}
}
Aqui, visamos o .select-kit-header para dar a cada um um border-radius idêntico, bem como uma cor de fundo mais clara.
Clicando em qualquer um deles, abre um menu suspenso.
Atualmente, ele também tem cantos duros, então vamos adicionar alguns estilos para arredondá-los e também alterar a cor de fundo para ser a mesma do cabeçalho.
.navigation-container {
.select-kit.combo-box {
// ...código anterior
&.category-drop,
&.tag-drop {
.select-kit-body {
border-radius: 0.9em;
background-color: var(--header_background);
.select-kit-collection {
background-color: var(--header_background);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
}
}
}
}
Isso resulta na seguinte aparência…
Se você olhar de perto, pode ver que nossas alterações deixaram uma pequena borda visível no canto superior direito da área de pesquisa.
Vamos corrigir isso olhando no inspetor do nosso navegador. Esta é sempre uma ferramenta super útil para aprender quais classes/IDs precisamos visar para aplicar estilos corretamente.
Com o menu suspenso visível, clique com o botão direito na área de pesquisa e ‘Inspecione’ o elemento no seu navegador.
Podemos ver que esta entrada está localizada dentro de um div com uma classe de select-kit-filter.
Se olharmos para as regras aplicadas a este seletor, podemos ver que ele atualmente tem uma borda superior e inferior, bem como algum padding aplicado. Queremos alterar apenas o estilo da borda superior.
Adicione o seguinte código aninhado no scss .select-kit-body de antes.
.select-kit.combo-box.category-drop,
.select-kit.combo-box.tag-drop {
.select-kit-body {
// ...código anterior
.select-kit-filter {
border-top: 0px;
}
}
}
Com isso, nosso código para estilizar o contêiner de navegação deve se parecer com isto.
.navigation-container {
// Menu Suspenso de Categoria + Tag
.select-kit.combo-box {
.select-kit-header {
border-radius: 0.9em;
background-color: var(--header_background);
}
&.category-drop,
&.tag-drop {
.select-kit-body {
border-radius: 0.9em;
background-color: var(--header_background);
.select-kit-collection {
background-color: var(--header_background);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.select-kit-filter {
border-top: 0px;
}
}
}
}
}
Links de Navegação
Vamos adicionar alguns estilos para fazer esses links de navegação parecerem semelhantes a isto:
Vamos usar nosso inspetor novamente para descobrir o que devemos visar aqui.
Podemos ver que nossos elementos de navegação estão dentro de um UL com uma classe de "nav nav-pills ..."
De volta ao nosso arquivo common.scss, abaixo da seção anterior, mas ainda aninhado dentro de navigation-container, vamos adicionar o seguinte:
.nav-pills {
& > li a {
&.active {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--tertiary);
}
}
}
Esta mudança visará apenas nossos links com a classe active que são filhos de nav-pills. Esta mudança deve fazer nosso link ativo parecer assim:
Isso está bem, mas eu gostaria que a borda inferior se estendesse apenas até o texto. Para fazer isso, acima da linha &.active {, vamos adicionar o seguinte, que afetará todos os links A dentro das tags <li> de navegação.
// ...outro código
.nav-pills {
& > li a {
padding: 0;
margin-right: 20px;
color: var(--tertiary-high);
border-bottom: 4px solid transparent;
&.active {
// ...mais código
}
}
}
Agora, precisamos estilizar o efeito “hover” para ser o mesmo que o efeito “active”.
Abaixo do nosso &.active anterior, vamos adicionar
&:hover {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--primary);
}
Então, todo o nosso código de navegação deve agora se parecer com isto:
// Nav Pills
.nav-pills {
& > li a {
padding: 0;
margin-right: 20px;
color: var(--tertiary-high);
border-bottom: 4px solid transparent;
&.active {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--tertiary);
}
&:hover {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--primary);
}
}
}
Botões
Os botões no Discourse vêm em muitas formas e tamanhos. Você pode ver uma variedade deles na seção Botões do Guia de Estilos.
Eu gostaria de alterar a maioria dos botões neste tema para serem arredondados com alguns estilos personalizados. Isso alterará o botão + Novo Tópico, bem como outros botões em todo o site.
Na parte inferior do nosso arquivo common.scss, vamos adicionar o seguinte:
.btn {
background-color: var(--header_background);
color: var(--primary);
border-radius: 1.2em;
border: 1px solid var(--primary-low-mid);
.d-icon {
color: var(--primary);
}
&:hover {
background-color: var(--quaternary-low);
color: var(--primary);
.d-icon {
color: var(--primary);
}
}
&.btn-default,
&.btn-primary {
padding: 10px 12px;
}
}
Isso fará nossos botões parecerem assim:
Agora que nossos botões estão estilizados, eu gostaria de apontar algo sobre o estilo de botões e por que é importante testar todos os seus designs.
Vá em frente e clique para um Tópico na pré-visualização do seu site, em seguida, pressione o botão responder em uma resposta de tópico, ou a partir do botão de resposta na parte inferior do fluxo do tópico. Você verá que nosso estilo de botão afetou algumas coisas que talvez não tivéssemos em mente.
Eu não quero que esses botões de edição de texto sejam afetados pelo meu estilo anterior. Isso requer um pouco mais de SASS/CSS complexo, mas podemos fazer nosso código não afetar esses botões com :not(). 
Vamos adicionar esta linha de código, à frente do nosso alvo .btn atual. Isso dirá aos nossos estilos para se aplicarem apenas a botões que não são filhos de .d-editor-button-bar.
:not(.d-editor-button-bar) > .btn
Ok, isso funcionou muito bem… mas espere! Agora há este rebelde estranho fazendo as coisas do seu jeito.
Inspecionando isso no navegador, posso ver que este botão tem uma classe de .select-kit-header porque ao clicar nesta engrenagem, mais opções aparecerão.
Agora que sabemos que NÃO queremos visar este botão, vamos adicionar mais funcionalidade :not() ao nosso código.
:not(.d-editor-button-bar) >
.btn:not(.single-select-header)
Isso selecionará todos os botões que NÃO são filhos de .d-editor-button-bar e não têm a classe .single-select-header. Sei que isso é um pouco confuso, mas dentro do Discourse, há muitas peças em movimento, então às vezes o estilo precisa ser muito específico para afetar os elementos corretamente.
Também notei que nosso estilo atual afeta o botão de fechamento do modal de forma estranha. Clicando em qualquer coisa que abra um modal permitiria que você visse isso, ou, mais fácil, podemos navegar para a seção de modais do Guia de Estilos.
Para corrigir isso, adicionarei outro alvo ao nosso código.
:not(.d-editor-button-bar) >
.btn:not(.single-select-header):not(.modal-close)
Seguindo em frente…
Vejo mais um botão que não parece ter sido afetado pelo nosso código. É o botão Tracking localizado na parte inferior de um fluxo de posts de tópico.
Adicionarei a seguinte linha, após uma vírgula, ao nosso código .btn atual.
:not(.d-editor-button-bar) >
.btn:not(.single-select-header):not(.modal-close),
.topic-notifications-button > .select-kit > .btn
Isso visará corretamente o botão que aparece nesta seção e, por enquanto, terminamos com a estilização da área superior do nosso fórum.
Para onde ir a partir daqui
Este guia tinha a intenção de rascar a superfície de como você pode personalizar seu próprio tema para o Discourse. Espero que você agora tenha mais insights sobre como visar áreas do app para suas próprias personalizações.
Lembre-se MUITAS coisas podem ser personalizadas usando apenas SCSS. Se você gostaria de aprofundar ainda mais seu desenvolvimento, eu recomendaria ler os artigos vinculados no topo deste post.
Sinta-se à vontade para fazer qualquer pergunta e eu ficarei feliz em tentar ajudá-lo ou apontá-lo na direção certa.
Este documento é controlado por versão - sugira alterações no github.