Tema do Ar

[Discourse]

	Summary	Air Theme is a clean & modern theme with a handful of theme components included to enhance your forum!
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/discourse-air
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme

As this is an official theme maintained by the Discourse team, support issues, bug reports, ux suggestions, and requests for dev advice can be made in the respective categories here on Meta, and tagged with the appropriate theme tag. Click on a link below to get one started.

 Support  Bug  UX  Dev

Features

Light Mode

Dark Mode

Categories Page

This theme includes a handful of components to enhance your forum as well.

• Dark Light Scheme Toggle
• Clickable Topics
• Discourse Search Banner
• Modern Category + Group Boxes

Please read through these tips upon installation, as there are a couple of settings that NEED TO BE ENABLED for this to theme to render properly.

---

Tips

Dark Light Scheme Toggle

For this to work properly, at least 2 color scheme choices need to be enabled in your https://discourse.jordanvidrine.com/admin/customize/colors area. At least two colors need to have color scheme can be selected by users enabled.

Once this is done, users should be able to choose between two color schemes as their light and dark preferences in their user preferences interface menu.

---

Discourse Search Banner

In the options for the discourse-search-banner theme component, the plugin-outlet options needs to be set to BELOW-SITE-HEADER for this theme to render properly.

---

Modern Category + Group Boxes

This theme component requires your categories to use the CATEGORY BOXES WITH SUBCATEGORIES setting in your /admin/site_settings/category/all_results?filter=categories area.

This theme component also allows the forum admin to organize their category page with header titles, and choose which categories appear under each header. To keep things simple, I have only allowed up to 5 headings to be used. If no categories + heading settings are chosen, all categories will render as they do above, this is the default rendering option.

Hosted by us? Themes are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-17T20:44:16Z

Check document

Perform check on document:

[Don]

That is just amazing Jordan! I love it!

[th21]

It will be helpful if the welcome message can be hide when left locale field empty

[oshyan (Oshyan Greene)]

Oh wow, this looks really nice! Thank you for the share.

[itsbhanusharma (Bhanu Sharma)]

This theme gives discourse the modern look it deserves. Very well done @jordan.vidrine

[Ahmed_Gagan]

Theme looks amazing. Awesome work

[thegurjyot (Gurjyot Singh)]

This theme looks so amazing. Hope we can get this category page design as a separate component as well. It is looking way better this way.

[frold]

Thanks it is nice…

First time I install a new theme. I really like this one!!

Studmed.dk

[Jeremie_Leroy]

Hi @jordan-vidrine regarding the # of views column, what kind of code shall i add in the component to override that column being hidden ?

[jordan.vidrine]

I believe this should work:

.full-width .contents .topic-list thead th.posts {
width: 10%;
}

.full-width .contents .topic-list thead th.activity {
width: 10%;
order: 4;
}

th.num.views {
width: 10%;
order: 3;
display: block;
}

.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.posts {
width: 10%;
order: 2;
}

.topic-list .views {
width: 10%;
order: 3;
}

.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.age {
width: 10%;
order: 4;
}

[ggurbet (Gökhan Gurbetoğlu)]

Refreshingly beautiful. Great work @jordan.vidrine!

[ShubhayanS (shubhayan saha)]

Há alguma possibilidade de alterar o texto do cabeçalho "Bem-vindo ao fórum"

[jordan.vidrine]

Sim, isso pode ser editado no componente Discourse Search Banner

[Jerdeman (Jeroen)]

Há um tempo postei um problema sobre não ver as categorias na visualização móvel (Air Theme - #172). Conversei um pouco com @jordan.vidrine, mas não conseguimos chegar à raiz do problema. Espero que outra pessoa tenha algumas ideias.

Para os detalhes
Usando uma instalação limpa do Discourse 2.7.11 no kubernetes com a ajuda de um helm chart do Bitnami, e a versão mais recente do tema instalada e configurada conforme mencionado na postagem inicial, não vemos nenhuma categoria na visualização móvel e a estilização está incorreta na página mais recente.

O que tentamos
Além de usar uma instalação limpa, tentamos usar algumas versões mais antigas do tema também. O problema, no entanto, permaneceu, mas não testamos exaustivamente todas as versões.
Também comparamos o html em nossa instância com o de discourse.jordanvidrine.com e notamos que é significativamente diferente.

Intuição
Como não podemos usar uma versão ‘beta’, minha intuição me diz que isso é um problema de compatibilidade entre o tema ou um de seus plugins e o Discourse 2.7. Eu adoraria saber se alguém tem este tema funcionando em 2.7, e se sim, com quais versões do tema e plugins relevantes.

Pergunta
Alguém conseguiu fazer este tema funcionar com o 2.7 e/ou há alguma pista sobre o que podemos fazer para fazer isso funcionar?

[Hyeonji_Kim]

Olá. Primeiro, obrigado por este ótimo tema

Quero mudar a font-family, como posso fazer isso.

Eu tentei isto

• Baixei este tema Google Fonts, e mudei a configuração de Fonte em CONFIGURAÇÕES DO SITE – Não funcionou

• Adicionei o código @import{link da fonte web ~~~ } em Desktop.css, mobile.css – Não funcionou

Qual arquivo devo modificar para mudar a fonte???

[jordan.vidrine]

Acredito que você deva conseguir definir uma fonte personalizada sem um componente aqui: admin/site_settings/category/all_results?filter=font

Se você quiser mais personalização, acredito que o componente de tema do Google Fonts que você vinculou funcionaria. Embora o tema use theme-settings e não uma configuração do site, acredito.

Você já levantou essa questão no tópico para esse componente de fonte?

[hequaye (Henry Herbert)]

Olá a todos, alguém pode me ajudar a alterar o dimensionamento e a “natureza fixa” da cor de fundo no celular?

O CSS para celular está transparente para mim. E eu só preciso de um pouco de orientação para alterar o fundo fixo para as cores de fundo.

Se não me engano, existe um fundo de cabeçalho e um fundo de página, correto?

[jordan.vidrine]

Isso ocorre porque o tema e seus componentes incluídos são bastante rigorosos quanto à forma como o site é configurado.

Na OP, compartilhei que:

@jordan-vidrine

Caixas de Categoria e Grupo Modernas

Este componente de tema requer que suas categorias usem a configuração CAIXAS DE CATEGORIA COM SUBCATEGORIAS em sua área /admin/site_settings/category/all_results?filter=categories.

Este componente de tema também permite que o administrador do fórum organize sua página de categorias com títulos de cabeçalho e escolha quais categorias aparecem sob cada cabeçalho. Para manter as coisas simples, permiti apenas até 5 cabeçalhos a serem usados. Se nenhuma configuração de categorias + cabeçalho for escolhida, todas as categorias serão renderizadas como fazem acima, esta é a opção de renderização padrão.

[Nerd_Alert]

há alguma maneira de fazer o fundo ser uma imagem? prefiro ter uma imagem em vez de cores. usando

body {
    background-image: url("url da imagem aqui");
    background-color: #cccccc;
}

torna a parte superior da cor a imagem, mas não a inferior.

[jordan.vidrine]

O que você fez está bom para adicionar a imagem, mas você também vai querer remover o caminho de recorte que é criado para dar esse efeito de sobreposição.

html .background-container {
clip-path: unset;
}