Air Theme

61993 views 386 replies Created 2021-07-20 20:24

I can confirm that is how it displays on my site. I belirleve it is due to non cat logo uses a very small descriptor vs a cat logo.

I inagine you can likely use css to make non logo categories match box size of logo ones.

Thanks for the confirmation. CSS makes my skin crawl. It’s my kryptonite. I’ve never been less productive then when working on getting margins to look right using CSS.

I hear you still learning. But imagine the author or a team member might help with a css code fix.

Just discovered light/dark toggle. Eorks well. save if you refresh the page it seems discourse will display the light thene logo instead. I suspect that is duue to discourse not detecting the web browser not being in dark mode.


Weird it seems to have fixed itself. lol

I just switched to it and I must say that its very clean, nice theme. I like it very much. Great work whoever designed it. Thanks.

Would it be possible to send me a direct message? I dont feel comfortable with sharing the link publicly. Thanks for your willingness to help! <3

I uninstalled Air Theme and all of its plugins, and re-installed them. I have tried everything I can think if to fix it but cant.

Default Theme - Category Dropdown does not disappear after selecting a different option (On Mobile)

Air Theme - Category Dropdown disappears after selecting a different option. (On Mobile)

I found the issue for the missing “Category” dropdown for mobile using the Air Theme.

In reference to posts…

The code in your repo Common.scss states…

.mobile-view {
  .cm-header-links {
    display: none;
  }
  .list-controls .nav-pills .drop li:first-of-type {
    display: none;
  }
}

I updated the code to

.mobile-view {
  .cm-header-links {
    display: none;
  }
  .list-controls .nav-pills .drop li:first-of-type {
    display: block;
  }
}

And now the Categories dropdown does not disappear after choosing another dropdown option. 🙂

Hello everybody…

I’m trying to customize my self hosted Discourse and I found that theme to be a good starting point!

How do you guys make changes in the CSS (like changing the background)?
Since there’s no “Custom CSS/HTML” section in the Theme page when I select that theme like there is in the default theme.

Hi,

  1. Start with creating a new theme component for your forum.
  2. Include your new component to the theme desired (the one which is used or a “dev” theme for you to check it first)
  3. Find Edit CSS/HTML button in the component settings
  4. Create and expand the horizons! 🔥

Screenshot 2023-03-03 at 20.56.22@2x

Cool… I didn’t thought about a component being just a CSS tweak.

Thanks.

Hello,
I have an alert in the console:

deprecated.js:61 Deprecation notice: PluginOutlet arguments should now be passed using `@outletArgs=` instead of `@args=` (outlet: category-box-below-each-category) [deprecation id: discourse.plugin-outlet-args]
in 

did I forget something in my theme settings?
I looked, I don’t see …

you did not, the themes syntax just needs to be updated a bit 👍

Everything is fine, it’s not a red flag 🙂
I don’t have the skills to help anyway. Thanks again for the beautiful theme!

A member reported an issue with Dark mode color the highlight makes emoji selector text and pm selector text unreadable.

Hi there, I am very new to discourse, so apologies in advances if I am missing something obvious here. After installing the Air Theme there seems to be a couple of issues.

  1. The “welcome to our community” message is invisible as it is the same colour as the background. I have tried updating colours but could not get the colour of this text to change.


    As you can see below, the text is there but only visible when highlighted

  2. Thew welcome text is appearing in the wrong place - i expected this to appear within the colour background however as you can see in the images above, it is not doing this.

Any help or tips would be much appreciated!

This should be fixed if you follow these steps

Hmmm, im not seeing this behavior. Are you using the most up to date version of discourse & theme?

Yes on both. Just completing a new upgrade for discourse available today… Will check again once complete.

You should still have the test account details I sent you. Will update this post shortly.

Mobile on emoji selector using “:” the drop down

Mobile name search dm/pm

After discourse update no change in above the selector in dark mode the highlighted info is blank as above.

How do you disable the air theme’s topic thumbnail/excerpts to default behavior? Only showing topic title unless pinned?

Love the theme 🙏

I want to use the Modern Category + Group Boxes plug-in, but is there a way to rearrange the main page?

My issue is that all the categories appear in boxes on top, and the Latest section is below. While it’s really well designed, it might not be user-friendly for someone who is in the Community for a quick browse. Is there a way to place the category boxes on the left side of the home page (I know it’s possible to use the sidebar, but still) and then the Latest on the right, similar to the Discourse Clickable Topic plug-in?

How would I fix the background? I narrowed it diwn to the Chat plugin.

With the Chat plugin disabled or logged out it displays properly. See pic 1

Logged in with chat plugin enabled

See how there us a white column instead of the background between bubbles and the blue is cut in the center.

Thanks for sharing, this is def. an interesting visual bug. Ill take a look

Hi, everyone! I hope you’re all doing great.

I plan to install the air theme and check it on different devices, but I have an issue with how it looks on iOS.

Is there a way to make the background static so you can only see the blue & grey on top when you’re logged in? What I’m looking for is to have a grey background when scrolling down through categories.

This theme is meant to be used in tandem with the modern category theme component that is also installed with the theme.

Visual Bugs as of 03/31/2023

Update: Most if not all bugs are not caused by Air Theme, but rather a patch update by Discourse.

  • Using the latest version of Discourse (at the time), Air Theme, and Modern Category + Group Boxes.
  • All settings from the OP tips area are matching.
  • All custom CSS has been disabled to rule out any conflicts.

Bug #1 - Categories are displayed as 2 columns.

When logged in, categories display as blocks (1 column) which is correct.

Update: Not related to Air Theme

  • Impacts Android, iOS, and Windows-Chrome using Mobile view when logged out.

Solution: Updating Discourse To: discourse v3.1.0.beta2 +864


Bug #2 - Header is missing. Users cant login.

Update: Not related to Air Theme
Solution: Updating Discourse To: discourse v3.1.0.beta2 +864

  • Impacts Android, iOS, and Windows-Chrome using Mobile view when logged out.

Bug #3 - When logged out, the categories page displays the Air Theme pill shaped categories (good), and also repeats the categories using the original category style native to Discourse (bad).

Update: Not related to Air Theme
Solution: Updating Discourse To: discourse v3.1.0.beta2 +864
Result: This entire are is no longer displayed. Only the Air Themed styles category pills are visable.


Bug #4 - White wrapper around categories missing.

  • Impacts Android, and iOS on mobile view (logged in or out)

Mobile View on Desktop - vs - Mobile View using App

The html body #main-outlet css class does not appear to be compatible on mobile devices.

Hello there,

I really love the template and i use it from maybe 2 weeks, and i would like to add analytics to my forum. But i cant modify the CSS for adding the google tag code from analytics.

Did u know if its possible to add it somewhere ?

thanks a lot for ur anwser !

Hi, welcome back 👋

You don’t need to modify your theme. Unless I misunderstand, you can set up Google Analytics in the admin settings (Basic Setup or type ga in the search bar)

What version of discourse are you using?

My testing site is displaying properly on mobile.

Logged in

Logged out

Do you have any plugins installed?

I am running “Tests passed”

3.1.0.beta3


And as per your screenshot you are also experiencing the bug below…


All plugins disabled, and the issues still occur on multiple devices, cache refreshed, and also tried incognito.

not sure about this theme specifically, but i’m running a live custom theme that uses #main-outlet css to make the white background in a very similar way (with rounded corners too) and it seems to work as expected on mobiles. i’ve set it a dark color and changed other attributes like size and the rounding corners (border radius) and i haven’t found any issues yet with how it looks on mobile.

My screenshot is how it os supposed to display on mobile White bubble around the categories vs a white column pane.

As I reported here and was fixed.

It was partially broken before creating the white wrapped column.

I am sure Jordon might provide some css code possibly to restore the bug if you prefer the white column. Mobile now for me matches mobile.

**EDiT: Looking at Op post you might be right. But the fix imho looks better as it flows properly with background. Perhaps Jordon can add a toggle for desired effect.

I have to locate the fix so my modified Air Lite theme matches. By like rhe Topic excerpts js was removed as it was excerpting all topics instead of just pinned topics.

I added Topic excerpts theme component to put excerpts in categories I want to have it. Unfortunately though it did not restore the pinned topics excerpts but many users wanted a default listing style for more posts per screen.

Thanks for your reply.

It looks like most of the bugs were fixed with a Discourse Update that was released today.

I have update the original post to reflect the first 3 bugs which are not as a result of Air Theme.

The version which I am using now which fixed of the first 3 bugs, is:
Discourse: 3.1.0.beta3 (e014635a12)


Now that those bugs are fixed, all thats left is

Which is not a big deal at all. Although I still believe its a bug since Mobile View on Desktop and Mobile View on App/Browser (which should display the same) do not with the white #main-outlet style. I’m not sure which I prefer now. I’m happy with either outcome.

Hi,

Is it possible to remove the search bar on the homepage? I’ve noticed it’s not displayed on meta.Discourse.org when I switch to this theme but I don’t see any place to edit the css. 😕

@jordan.vidrine is it mandatory to modify directly the code like this :

.background-container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: url(https://i.ibb.co/GCcS8Zw/Abstract-futuristic-Molecules-technology-with-polygonal-shapes-on-dark-blue-background-Illustration.jpg); 
    background-size: cover;
    clip-path: unset;

Or can I just use the form like this:

I try with the form but the picture don’t cover all the blue part as you can see bellow

Do you have any idea to solve this issue please ?

Yep, this is actually a component that you just need to disable in the customization section of your forum.

This theme installs a couple components on install and this is where its coming from. You will want to look for discourse-search-banner in the theme components and disable it.

There is actually, I will push an update to fix this today 😄

Sorry for such a delayed fix for this.

How can I show Sub-Categories in boxes in the Main Category page?

If you mean like this:

Go to the parent / main category page and select the wrench icon to allow you to edit the category.

Click on “settings” and scroll down until you see this area:

“show subcategory list above topics in this category”

Select that option, and choose “boxes” as the dsiplay style.


If you mean on the /categories page, this is not an option. The only option there would be to edit the CSS to unhide the subcategories in order to show them inside the parent’s boxes.

I just installed this theme and the search banner text if I change to dark or light doesnt show. Can anyone guide me as to where I can change this?

Here is a screenshot

@jordan.vidrine thank you so much for this great theme! As a new discourse developer this made everything so easy. We are having two small issues that we cannot seem to find a workaround for, when following your instructions.

  1. the light mode / dark mode toggle is not available, even when selecting two color themes as available to choose from
  2. perhaps not your theme issue, we are trying to add a custom link to the hamburger menu underneath badges, to send to an external zendesk site. We are using this component, which should be compatible, but the default or custom links do not show. Any ideas?

The community site can be found here

Thank you for your help!

Aaron

Hmmm… I’m not sure why that is the case. It is working on my demo instance.

That component is no longer compatible with our new drop down header.

As an admin of your forum though, you should see a pencil in the upper right corner of the drop down.

Clicking this will allow you to edit the links in that menu, and add a custom link as well.

We might have accidentally jumped on the beta version :face_with_spiral_eyes:, so there was no going back! I will update to the latest beta and try again.

Regarding the link addition via admin, that seems to only work for internal links, not external