☁️ Discourse Air Theme

Theme looks amazing. Awesome work :heart_eyes:

4 Likes

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:

6 Likes

Thanks it is nice…

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

6 Likes

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

2 Likes

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;
}
4 Likes

Refreshingly beautiful. Great work @jordan-vidrine!

3 Likes

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

1 Like

Hi there, Love the theme.

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

1 Like

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

2 Likes

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

1 Like

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?

1 Like

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:

1 Like

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

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?

1 Like

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:

4 Likes

is there any way to make the background an image? i’d rather have an image than colors. using

body {
    background-image: url("image url here");
    background-color: #cccccc;
}

makes the top of the color thing the image, but not the bottom.

2 Likes

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.

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

thank you! i knew i was missing something simple.

3 Likes

Great theme! Please, explain how your theme works in terms of speed and weight - does all your theme works by replacing (instead of) default html/style/CSS Discourse theme or when users load Discourse pages at their browsers your them include all default Discourse html/style/CSS and work over it as higher CSS etc?

1 Like

We try to get our themes working pretty seamlessly with Discourse. I do not believe I override any core components or HTML in this theme and its included components. Most of these visual changes are achieved with SCSS as per usual in our themes.

Feel free to browse through the git repos of the theme and it’s included components to see how they were implemented :+1:

4 Likes