Air Theme

[jordan-vidrine]

@Nick-Permaculture

First, the dark mode toggle is also not appearing on my site, even with the 2 color pallets selected. I’m using the sidebar so perhaps that’s part of the issue?

Have you made sure to follow all of the steps outlined in that component? You also need to enable a dark theme needs to be at: /admin/site_settings/category/basic?filter=dark

I haven’t had an issue with this, even with sidebar enabled.

---

@Nick-Permaculture

Second, I’m wondering if it’s possible to adjust the Category Box text. In my instance, I have 14 modules, and once I get to Module 10, it shows M1. The same is true for Modules 11, 12, 13, and 14. This would be confusing for users. Can I edit these specifically?

Unfortunately no, there isn’t a way to change this. Would it be possible for you to label them as 01, 02, and so on? Without the world module attached?

---

@Nick-Permaculture

Third, what is the pixel size for the Category Boxes? Now that I’ve switched, all of the category images are squished trying to fit to the dimensions. I’ll need to resize everything to fix this.

The dimensions are 132x132.

---

@Nick-Permaculture

Fourth, can I adjust how much of the search banner background image is shown? It seems a recent update has reduced the size of the image that displays here dramatically.

Would you mind sharing a screenshot of what is happening here? I havent noticed this on my demo site.

[Nick-Permaculture (Nick J)]

Thanks for the explanations and help here! I didn’t realize there was an extra component for the Dark/Light. I can figure out a way to make the module numbers more clear, perhaps adding an image to replace the text default. Your suggestion of 01 is good too.

For the search banner:

Before, I was able to see at least 2x more of this image. When I started the day (even before adjusting the theme) the image was reduced in size, so it seems it was an update that caused it? Even if I upload a file per your suggested dimensions in another post above (1920x1080) it still does this stretching thing.

[jordan-vidrine]

Have you also followed the instructions on how to set the search banner? I dont see any text there, but maybe you removed that?

Also, to add this image, did you do this in a theme component?

Discourse Air Theme

Sure! You would just want to target this element like so: html .background-container { position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; background: url(https://d11a6trkgmumsb.cloudfront.net/original/3X/8/3/8352b68….jpeg); background-size: cover; /* background: linear-gradient(90deg, var(--tertiary-hover) 0%, var(--tertiary) 100%); */ clip-path: ellipse(148% 70% at 91% -14%); Here is how that looked locally when editing through Chrome’s inspect…

[Nick-Permaculture (Nick J)]

I did follow all the instructions on how to set the search banner. It is set below site header as required. I removed the text, yes. But previously there was also no text and it showed much more. It still only shows a sliver of the image. I uploaded the image as background to the search banner, not in the theme component.

This is how I had it setup before I made any changes, and even this morning before I changed everything the image appeared much more cut off than it had previously, which is why I suspect an update has caused it. At this point, I’m only seeing maybe 1/4 of the image at most.

I also tried editing the theme component to recreate this, but the image was very pixelated when I did that. Not sure why it starting doing this today. I also noticed today many of my other theme details were off, so perhaps it’s just a buggy day. That’s what prompted me to try a new theme, this one. In the end, not a big deal I can make a new image that works better. Just curious as to why there’s such a big difference all of a sudden.

[kynic]

There is a bug in the theme with the mobile view when the reply count value increases the layout gets messy and does not remain aligned anymore.

See

[kynic]

After the update, it gets better but still has alignment issues with the date and reply count.

[kynic]

Please put this in the theme I created a component and added the code as you said but still views column does not appear.

Edit:

Discourse Air Theme

How to add the “View” column in the topics list. I am in no way a developer, or programmer. I spent a few hours playing around with the CSS code using the Inspect Element feature in Google Chrome. I was able to get the view column to display correctly, and also did some re-sizing of every column to my preferred liking. You are more than welcome to adjust the width in the CSS code below. I have also added comments in the code so you can easily tell which code is for which column. For each column…

I was trying to add the view column with Jordan-provided code but dunno why it was not working I applied your code and it works Thank you

[imgh05t]

Hey guys! Beautiful theme, been enjoying it very much.

Does anyone know how to display subcategories here instead of category description? I use layout Categories + Latest Topics for homepage.

Thank you in advance

a

[jordan-vidrine]

Installing your own theme-component and attaching it to the theme should work. You will want to add this line into the css of the theme component.

.custom-category-boxes .description {
    display: none;
}

To install a custom theme component you will go to /admin/customize/themes click Install then click Create New.

From there you will be taken to the new component’s page, where you will select which theme you want it to be included on.

You can then click Edit CSS + Html and add the code I sent you above to the common.scss file.

[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;
}

[kynic]

Can you tell me how you added those icons for the categories?

[imgh05t]

1. Click on the category you want to edit
2. Go to settings (tool icon)
3. Images → Category Logo Image

[kynic]

I see, Thanks

[Steve_Emerson]

This theme would be near perfect if the issue was sorted that appears to have been raised many times in this thread by multiple users.

• ☁️ Discourse Air Theme - #370 by UnitedFreedom
• ☁️ Discourse Air Theme - #368 by BH10
• ☁️ Discourse Air Theme - #342 by juiceer

I’m experiencing the same where the background on mobile is inconsistent with the desktop, making things unreadable. It basically makes it unusable on mobile under certain scenarios.

Mobile Example:
Light theme:

Dark Theme:

Desktop Example:

Light Theme:

Dark Theme

I appreciate the effort and work on this theme however it’s a shame this inconsistency is being treated as some sort of feature rather than a bug despite it being raised many times. I will certainly start using it if this can be sorted out.

UPDATE

I think it’s just the discourse-docs plugin that has the above issue. I’m not sure how this can be sorted out though, ideally it would be nice to have the discourse docs working well with theme this as they’re both nice features for the forum.

[simon]

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]

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]

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]

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]

@Steve_Emerson

Just to confirm were you using a mobile?

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.

@Steve_Emerson

maybe this issue is limited to the ‘discourse-docs’ plugin.

I think you found it!

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