Air Theme

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

Install this theme

Features

Light Mode

Light Mode
Light Mode2946×1864 459 KB

Dark Mode

Dark Mode
Dark Mode2840×1860 416 KB

Categories Page

Categories Page
Categories Page2568×1590 458 KB

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

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

Dark Light Scheme Toggle
Dark Light Scheme Toggle710×836 57 KB

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.

image
image2336×702 71.7 KB

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.

color schemes
color schemes2424×1188 213 KB

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.

search banner
search banner1338×146 7.34 KB

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.

modern category + group boxes
modern category + group boxes1372×128 16.3 KB

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.

:discourse2: 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 documentPerform check on document:
135 Likes
2

That is just amazing Jordan! :heart_eyes: I love it!

16 Likes
5

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

7 Likes
6

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

9 Likes
7

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

12 Likes
8

Theme looks amazing. Awesome work :heart_eyes:

5 Likes
9

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. :heart:

7 Likes
11

Thanks it is nice…

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

7 Likes
79

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

3 Likes
80

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;
}
6 Likes
106

Refreshingly beautiful. Great work @jordan-vidrine!

4 Likes
169

Have you made sure to go through this part of the theme setup?

2 Likes
176

Hi there, Love the theme.

How does this them work with discourse voting, It seems to be hidden?

2 Likes
182

Is there any possibility to change the header text “Welcome to the forum”

4 Likes
183

Yes, this can be edited in the Discourse Search Banner component :+1:

3 Likes
184

A while back I posted an issue with not seeing the categories on a mobile view (☁️ Discourse Air Theme - #172 by Jerdeman). I messaged a bit with @jordan-vidrine, but we were unable to get to the root of the issue. Hopefully someone else has some ideas.

For the details
Using a clean install of Discourse 2.7.11 on kubernetes with the help of a helm chart from Bitnami, and the latest version of the theme installed and configured as mentioned in the opening post, we do not see any categories on a mobile view and styling is off on the latest page.

What we tried
Besides using a clean install, we attempted to use some older versions of the theme as well. The problem however remained, but we did not exhaustively tried all versions.
We also compared the html on our instance with that of discourse.jordanvidrine.com , and noticed that it is significantly different.

Gut feeling
As we cannot use a ‘beta’ version, my gut feeling tells me this is a compatibility issue between the theme or one of its plugins and Discourse 2.7. I’d love to know if someone has this theme working on 2.7, and if so with which versions of the theme and relevant plugins.

Question
Has somebody got this theme working with 2.7 and/or are there any clues on what we could do to get this working?

2 Likes
185

Hi. first, Thank you for this great theme :smile:

I want to change font-family, How can I do that.

I try this :point_down:

  • download this Theme Google Fonts theme component , and change Font setting on SITE SETTING → Not work

  • add @import{web font link ~~~ } code in Desktop.css, mobile.css → Not work

Which file should I modify to modify the font??? :sob:

3 Likes
186

I believe you should be able to set a customized font without a component here: admin/site_settings/category/all_results?filter=font

If you want more customization, I believe the google fonts theme component you linked would work. Though, the theme uses theme-settings and not a site setting I believe.

Have you brought this issue up in the topic for that font component?

4 Likes
187

Hello everyone, can anyone help me change the sizing and “fixed nature” of the background color on mobile?

The css for mobile is transparent on my end. And I just need a little guidance on changing the fixed background for the background colors.

If I’m not mistaken there’s a header background and a page background correct?

3 Likes
188

This is because the theme and its included components are fairly picky about how the site is set up.

In the OP I shared that:

5 Likes