# Air Theme
**URL:** https://meta.discourse.org/t/air-theme/197703
**Category:** Theme
**Tags:** air-theme
**Created:** [July 20, 2021, 8:24pm UTC](https://meta.discourse.org/t/air-theme/197703 "2021-07-20T20:24:30Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [July 20, 2021, 8:24pm UTC](https://meta.discourse.org/t/air-theme/197703/1 "2021-07-20T20:24:31Z")
| | | |
| --- | --- | --- |
| :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](https://discourse.theme-creator.io/theme/Discourse/air-theme) |
| :hammer_and_wrench: | **Repository Link** | [https://github.com/discourse/discourse-air](https://github.com/discourse/discourse-air) |
| :open_book: | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme
### Features
**Light Mode**
**Dark Mode**
**Categories Page**
This theme includes a couple of components to enhance your forum as well.
- Clickable Topics
- 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
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.
* * *
## Welcome Banner
Go to **Admin \> Welcome banner** (`/admin/config/welcome-banner`) page.
- in **Enabled on themes…** dropdown select `Air Theme`
- in **Location** dropdown select `Below site header`
* * *
## 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.**
> :discourse2: **Hosted by us?** Themes are available to use on our Standard, Business, and Enterprise plans.
> Last edited by @Moin 2026-04-04T16:17:47Z
>
> > **Check document**
> >
> > Perform check on document:
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [July 20, 2021, 8:48pm UTC](https://meta.discourse.org/t/air-theme/197703/2 "2021-07-20T20:48:13Z")
That is just amazing Jordan! :heart_eyes: I love it!
---
### Author:  [@th21](https://meta.discourse.org/u/th21)
#### Post date: [July 20, 2021, 11:01pm UTC](https://meta.discourse.org/t/air-theme/197703/5 "2021-07-20T23:01:10Z")
It will be helpful if the welcome message can be hide when left locale field empty :+1:
---
### Author:  [@oshyan](https://meta.discourse.org/u/oshyan)
#### Post date: [July 21, 2021, 12:36am UTC](https://meta.discourse.org/t/air-theme/197703/6 "2021-07-21T00:36:53Z")
Oh wow, this looks really nice! Thank you for the share. :slight_smile:
---
### Author:  [@itsbhanusharma](https://meta.discourse.org/u/itsbhanusharma)
#### Post date: [July 21, 2021, 2:40am UTC](https://meta.discourse.org/t/air-theme/197703/7 "2021-07-21T02:40:01Z")
This theme gives discourse the modern look it deserves. Very well done @jordan.vidrine
---
### Author:  [@Ahmed\_Gagan](https://meta.discourse.org/u/Ahmed_Gagan)
#### Post date: [July 21, 2021, 4:19am UTC](https://meta.discourse.org/t/air-theme/197703/8 "2021-07-21T04:19:48Z")
Theme looks amazing. Awesome work :heart_eyes:
---
### Author:  [@thegurjyot](https://meta.discourse.org/u/thegurjyot)
#### Post date: [July 21, 2021, 5:09am UTC](https://meta.discourse.org/t/air-theme/197703/9 "2021-07-21T05:09:26Z")
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:
---
### Author:  [@frold](https://meta.discourse.org/u/frold)
#### Post date: [July 21, 2021, 1:53pm UTC](https://meta.discourse.org/t/air-theme/197703/11 "2021-07-21T13:53:32Z")
Thanks it is nice…
First time I install a new theme. I really like this one!!
> **[Studmed.dk](https://studmed.dk/)**
>
> Studmed.dk er et online forum og fællesskab for lægestuderende i Danmark
---
### Author:  [@Jeremie\_Leroy](https://meta.discourse.org/u/Jeremie_Leroy)
#### Post date: [August 3, 2021, 3:24pm UTC](https://meta.discourse.org/t/air-theme/197703/79 "2021-08-03T15:24:52Z")
Hi @jordan-vidrine regarding the # of views column, what kind of code shall i add in the component to override that column being hidden ?
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [August 3, 2021, 3:54pm UTC](https://meta.discourse.org/t/air-theme/197703/80 "2021-08-03T15:54:34Z")
I believe this should work:
```scss
.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;
}
```
---
### Author:  [@ggurbet](https://meta.discourse.org/u/ggurbet)
#### Post date: [August 25, 2021, 2:12pm UTC](https://meta.discourse.org/t/air-theme/197703/106 "2021-08-25T14:12:40Z")
Refreshingly beautiful. Great work @jordan.vidrine!
---
### Author:  [@ShubhayanS](https://meta.discourse.org/u/ShubhayanS)
#### Post date: [January 17, 2022, 12:39am UTC](https://meta.discourse.org/t/air-theme/197703/182 "2022-01-17T00:39:44Z")
Is there any possibility to change the header text “Welcome to the forum”
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [January 17, 2022, 3:04pm UTC](https://meta.discourse.org/t/air-theme/197703/183 "2022-01-17T15:04:49Z")
Yes, this can be edited in the `Discourse Search Banner` component :+1:
---
### Author:  [@Jerdeman](https://meta.discourse.org/u/Jerdeman)
#### Post date: [January 17, 2022, 3:34pm UTC](https://meta.discourse.org/t/air-theme/197703/184 "2022-01-17T15:34:15Z")
A while back I posted an issue with not seeing the categories on a mobile view ([Air Theme - #172](https://meta.discourse.org/t/discourse-air-theme/197703/172)). 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](http://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?
---
### Author:  [@Hyeonji\_Kim](https://meta.discourse.org/u/Hyeonji_Kim)
#### Post date: [January 23, 2022, 8:15am UTC](https://meta.discourse.org/t/air-theme/197703/185 "2022-01-23T08:15:01Z")
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](https://meta.discourse.org/t/google-fonts-theme-component/143720) , 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:
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [January 24, 2022, 3:35pm UTC](https://meta.discourse.org/t/air-theme/197703/186 "2022-01-24T15:35:31Z")
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?
---
### Author:  [@hequaye](https://meta.discourse.org/u/hequaye)
#### Post date: [January 26, 2022, 5:24am UTC](https://meta.discourse.org/t/air-theme/197703/187 "2022-01-26T05:24:27Z")
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?
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [January 26, 2022, 4:04pm UTC](https://meta.discourse.org/t/air-theme/197703/188 "2022-01-26T16:04:52Z")
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:
> [@jordan-vidrine](#):
>
> ## 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.**
---
### Author:  [@Nerd\_Alert](https://meta.discourse.org/u/Nerd_Alert)
#### Post date: [January 31, 2022, 2:31pm UTC](https://meta.discourse.org/t/air-theme/197703/189 "2022-01-31T14:31:06Z")
is there any way to make the background an image? i’d rather have an image than colors. using
```plaintext
body {
background-image: url("image url here");
background-color: #cccccc;
}
```
makes the top of the color thing the image, but not the bottom.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [January 31, 2022, 3:02pm UTC](https://meta.discourse.org/t/air-theme/197703/190 "2022-01-31T15:02:57Z")
What you did is fine to add the image, but you will also want to remove the clipping path that is created to give that overlay affect.
```css
html .background-container {
clip-path: unset;
}
```
[Next page](https://meta.discourse.org/t/air-theme/197703.md?page=2)