☁️ Discourse Air Theme

simon · September 15, 2023, 6:38pm

I just tried installing the Air Theme on a new Discourse site. On my site there is a background color being set for various elements that fixes the readability issue you are finding:

Is there any custom CSS on your site that could be overriding the Air Theme’s CSS?

Steve_Emerson · September 15, 2023, 6:52pm

Interesting, I have no custom CSS. I also removed all theme components to see if anything was interfering but the issue persisted.

I have no idea then

Steve_Emerson · September 15, 2023, 6:59pm

Just to confirm were you using a mobile?

If I use a desktop browser and reduce the screen size I can see my layout is consistent with yours, whereas on a mobile device browser, I don’t have the same structure. For example, it only shows ‘latest’ as a dropdown… which makes me think yours isn’t being detected as a mobile which is why the theme isn’t being ‘buggy’ like my mobile examples above?

Steve_Emerson · September 15, 2023, 7:04pm

Ah tbh it seems fine on the majority of the site - maybe this issue is limited to the ‘discourse-docs’ plugin. The don’t seem to work well together.

simon · September 15, 2023, 7:17pm

Yes. I’m testing mobile mode on my desktop by adding the ?mobile_view=1 parameter to the URL. The results should be the same as what you get on a mobile device. I’m definitely being served the mobile view in the screenshot.

I think you found it!

The issue only seems to affect doc topics on mobile, desktop seems fine.

Steve_Emerson · September 15, 2023, 7:20pm

Yeah just the mobile docs, so not too much of an issue. Would be nice if it was fixed eventually though.

Thanks for digging into this

simon · September 15, 2023, 8:33pm

The problem seems to be here:

github.com

discourse/discourse-air/blob/main/mobile/mobile.scss#L14


      
            h1 {
              font-size: 2.5em !important;
            }
            p {
              font-weight: normal;
              font-size: $font-up-1;
            }
          }
          
          html
            body:not(.static-tos):not(.static-faq):not(.static-privacy):not(.about-page):not(.static-faq):not(.badges-page):not(.tags-page):not(.archetype-banner):not(.archetype-regular):not(.archetype-private_message):not(.admin-interface):not(.edit-category):not(.user-summary-page):not(.user-activity-page):not(.user-invites-page):not(.user-preferences-page)
            #main-outlet {
            width: calc(100% - 1em);
            padding: 0em 0.5em 1em 0.5em;
            box-shadow: none;
            background-color: transparent;
          }
          
          html body.static-tos #main-outlet,
          html body.static-privacy #main-outlet,
          html body.about-page #main-outlet,

I thought it might be possible to fix the issue by just adding some CSS to a theme component, but it’s turning out to be a tricky problem because the main docs page doesn’t add a CSS class to the body tag. That means that it’s not enough to just use this. It fixes the issue on individual docs topics, but not on the docs topic list:

html body.archetype-docs-topic #main-outlet {
  border-radius: 0px !important;
  width: calc(100% - 3em) !important;
  background-color: var(--secondary) !important;
  margin-bottom: 0px !important;
}

I suspect the fix will require small changes be made to both the docs plugin and the air theme. I’ll follow up on this with the team. It should get fixed fairly soon.

Steve_Emerson · September 15, 2023, 8:49pm

Appreciate you looking into this, thank you

simon · September 19, 2023, 7:35pm

Just adding a note here that the Loading Slider and Dark Light Scheme Toggle have been removed from the theme component:

github.com

discourse/discourse-air/blob/main/about.json#L5-L9


      
          "components": [
            "https://github.com/jordanvidrine/discourse-category-group-boxes.git",
            "https://github.com/discourse/discourse-clickable-topic.git",
            "https://github.com/discourse/discourse-search-banner.git"
          ],

I’ve removed the reference to the Loading Slider from the OP. Should the Dark Light Scheme toggle be removed as well, or is there a similar component that works with the sidebar that should get added?

jordan-vidrine · September 25, 2023, 8:06pm

I believe this component works with the sidebar now. There is a setting to set it to be either in the header, or in the sidebar.

erikds · October 2, 2023, 11:40pm

Hi folks, great theme. I have a minor nit with the border radius on the .nav-pils:not(.user-nav)>li>a selector, causing an inconsistent pointy border on the active tab:

setting the bottom border radii to 0 fixes this. would you be open to a PR, or am I missing something?

Edit: since it was only a few lines I went ahead and made a PR here.

erikds · October 3, 2023, 2:55pm

Sorry, one more nit - wondering if this is a similar issue using the events plugin:

cmahns · October 4, 2023, 12:45pm

Looks like there’s a slight CSS hangnail when opening up the Threads pane in Chat when using it in full screen. Right hand side by the X button for threads:

jenmck · October 11, 2023, 12:22am

imgh05t:

Thanks, that worked! But what about displaying sub-categories? This code isn’t working for some reason
.category-boxes .subcategories {
    display: flex !important;
    flex-flow: wrap;
}

Wondering if anyone might have a solution for this, to show the subcategories in the category box?

Heliosurge · October 13, 2023, 2:18am

Hi @jordan-vidrine modern category boxes said update was available. Now displays blank page after update.

Tests Passed

Fixed after upgrading Docker & Discourse. Though update was not showing required.

wizible · October 13, 2023, 4:31pm

I would like to remove the gradient from the background discourse-search-banner so that it is only one color.
I have already read the article Beginner's guide to using Discourse Themes.
However, I am missing the Edit HTML/CSS button. I get the message “If you want to edit this theme, you must submit a change on its repository”.

How can I make CSS/HTML changes to the Air theme + components?

Thanks

jordan-vidrine · October 13, 2023, 4:49pm

This post describes how you would add/edit your own CSS to affect the theme.

wizible · October 13, 2023, 4:53pm

First of all I wish you a happy birthday.
Secondly, I would like to thank you for your answer.

I have looked at it again. But as I said before. I don’t have a button “Edit HTML/CSS” in the Air Theme. In the default theme I have the button.

jordan-vidrine · October 13, 2023, 5:04pm

You’re very welcome!

You first need to create your own theme component from the theme component menu. Then you need to enable that theme component on the air theme.

From there, the css/html changes you make in your new theme component will apply to the air theme.

wizible · October 13, 2023, 5:10pm

Aaah ok. Now I understand. So like WordPress, it’s a child theme, right?

I have to keep all the original components too, right?