☁️ Discourse Air Theme

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?

2 Likes

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 :thinking:

1 Like

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?

1 Like

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.

3 Likes

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.

3 Likes

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

1 Like

The problem seems to be here:

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.

1 Like

Appreciate you looking into this, thank you :smiley:

1 Like

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

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?

2 Likes

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.

1 Like

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.

3 Likes

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

2 Likes

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:


1 Like

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

1 Like

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.

1 Like

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

2 Likes

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

2 Likes

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.


2 Likes

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.

1 Like

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

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

2 Likes