☁️ Discourse Air Theme

It was very simple. The Air Theme had the Discourse Search Banner installed as part if the complete theme.

As stated running Test-Passed.

Once the Chat Plugin is enabled the Wrlcome banner if the Discourse Search Banner no longer displays the Welcome message.

Turn Chat plugin off. The Welcome banner is displayed.

Chat plugin Disabled

You can see in this ss the Chat plugin icon is gone from the header. You can also see tge other effects that the chat plugin is sermingly doing to the background creating a white empty rectangle ignoring the blue background.

Now looking at it might it be interfering with Air Thene’s blue wallpaper? as text is white in the banner. So I might be on the wrong track with the Discourse Search banner. It might be a conflict with part of the Air theme… ??

Confirmed. my apologies it seems ti be a conflict with Air theme background. Jist tried a preview of just Discourse Search Banner with Chat plugin.

see below

Sorry for the incorrect duiagnosis… :facepalm:

Taking a further look in the Air Theme the blue part of the background is blocked in that center column when scrolling the blue is just on the outer edges. When chat disabled the blue part of the background connects from left to right through the center.

vs

Just giving this a bump. It seems to be actually the Air Theme background having a central white column. see pics above.

Just wondering if the team has been able to reproduce as have isolated to the Air Theme background and not an issue with search banner.

Hello Dan,

It seems your Search Banner plugin outlet is on the default above-main-container? I think you need to change this to place the Search Banner out from the #main-outlet :arrow_down_small:


However the theme has a chat custom style when enabled on the #main-outlet which I think only need to be active on chat pages.
This is adding the background with !important to the #main-outlet which override the theme background transparency on #main-outlet etc…

Screenshot 2023-02-08 at 7.49.56

I think this is would be better with restrict this to .has-full-page-chat so only appears on chat pages?


With above-main-container setting :arrow_down_small:

With below-site-header setting :arrow_down_small:

3 Likes

Okay that fixes the primary display. What would be the code to fix the chat? As it still has the white column under the search banner header on the categories as per your last screen shot.

Thank you for your help.

1 Like

I’m adding “category logo” Images to some, but not all, of my categories.

expected behavior: When I add a logo image to a category, the size of the label remains the same as those of other categories.

observed behavior: When I add a logo image to a category, the square is comparatively larger than the squares in the labels of categories without logo images. Beyond not lining up with categories in the same column, rows with categories with logo images are taller than rows with categories without logo images.

This happens on mobile and desktop

How can I fix this?

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.

1 Like

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.

2 Likes

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

2 Likes

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.

1 Like

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! :fire:

Screenshot 2023-03-03 at 20.56.22@2x

3 Likes

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

Thanks.

2 Likes

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 …

3 Likes

you did not, the themes syntax just needs to be updated a bit :+1:

3 Likes

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

2 Likes

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!