☁️ Discourse Air Theme

Oh cool, yes, just updated and can see the page breakout is fixed. Thank you Jordan :slight_smile: Love the update feature!

The different link experience behaviour is still there though. Illustrated here:

Purple goes to last read post - normal behaviour
Yellow goes to first post

4 Likes

Ah I see, yes I can understand your issue.

Though, this uses Discourse core’s code to render the topic preview, which always has had the function of clicking through to the actual topic being previewed, not the latest post in that topic. Sorry for the confusion there!

4 Likes

Actually, I think Discourse has it sort of (the latest), but not in a structured way. For instance, in the groups page, when selecting activity for a certain group, the listing shows a preview of the latest post. Would be nice if the feature could be used in a regular topic listing, though :grin:.

4 Likes

It can, it just needs to be done via: How to add topic excerpt to all my topics

2 Likes

Really wonderful theme @jordan-vidrine! I would like to ask you if it is possible through css to make the thread posts to be divided like the topics are here… With this design.

5 Likes

So glad you like the theme!

With CSS, what you want to do is possible, but there are a lot of points to target on the topic view there so it may not be super straightforward. I personally decided against this as it didn’t look great (to me) so I left that out.

I would look into creating a theme component and installing it on your forum to apply your custom code to this theme.

Here are some sources for you if you are unfamiliar with making these types of customization.

6 Likes

Thanks for the reply. For a start by applying a bit of css (with inspect element), it seems to me that it will look like this.

I will try it more in the following days and I will let you know of its progression.

4 Likes

Hi Jordan,

Thanks for the fantastic theme. I’m also wanting to make a small adjustment with the background, as someone mentioned above, and to just allow the tertiary color to take up the entire background instead of having the split effect with that as a gradient and then the gray beneath it.

I created a theme-component and added in the following CSS:

body {
 background: #009688 !important;
}

And that did successfully change the color of the lower part of the background to my desired hue.

But what ends up happening is that the top part of the background is still shadowed and darker, particularly on the left side of the screen — which leads to that curved-line division still being present instead of just having the single consistently solid background color with that one value:

I’m assuming I’m probably just missing one obvious piece of the puzzle here. Do you know how I could get around this and have the single consistent color all throughout the background?

I really appreciate your help!

3 Likes

Thank you for creating this beautiful theme. I am creating a new forum and using this theme. But one problem with self-made pages (enabled page publishing) is that the header covers the content:

You could solve the problem with this CSS code:

.published-page-content-body {
  position: relative;
  background-color: #ffffff;
}

After: Imgur: The magic of the Internet (needed to upload this to imgur due to upload restriction for new users)
I have not worked on the styling. But I hope that you understand what the problem is :+1:

1 Like

Hi, thank you for creating such a beautiful theme! Question for you or anyone able to help. I created some category headings in the Modern Category + Group Boxes component and would like to 1) make the font size smaller, 2) remove the underline but keep the bold, and 3) left align the headings. How do I do this?

Thanks!

4 Likes

To change that split effect, you will want to target html .background-container in your css.

html .background-container {
background: set your color here,
clip-path: unset,
}
4 Likes

To specifically do what you requested you would want to do something like so:

.category-boxes {
    justify-content: unset;
}
.custom-category-header {
    font-size: "set your font size here";
    border-bottom: unset;
}

1 Like

This should now be fixed.

If you want to change the color of the background oval on this page, I have added that code here:

.published-page {
  .background-container {
    display: none;
  }
  &::before {
    background: linear-gradient(90deg, var(--tertiary-hover) 0%, var(--tertiary) 100%);
    clip-path: ellipse(148% 70% at 91% -14%);
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    z-index: 0;
  }
}
4 Likes

Worked like a charm. Thanks a million, Jordan.

4 Likes

It seems the user card is disabled. How can i enable this feature? Thanks!

1 Like

Are you speaking of this:

I could be wrong, but it may be an issue with another component installed + enabled on your website?

I have tested on multiple browsers, as well as mobile, and clicking on the user avatar has always brought up the user card.

3 Likes

Yes, i found it. It’s the discourse-username-localization Plugin.
It may causes conflict with the new setting allowed unicode username characters, I have enabled them both.
Thanks for your reminder! :wave:

4 Likes

What font do you use for categories and posts? Thanks.

1 Like

This is the font family setting:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4 Likes

Refreshingly beautiful. Great work @jordan-vidrine!

3 Likes