Air Theme

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

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

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.

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.

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

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

Hello,

How can I change the size of the welcome message please ?

If find it we have just to modify the CSS with a suitable size:

.custom-search-banner-wrap h1 {
    font-size: 3em;
}

Hello @jordan.vidrine
I use Air Theme with Topic List Thumbnails Theme Component - theme - Discourse Meta with the list mode & Air Theme. It works good but I’ve an issue I didn’t find how to resolve it.
I filled in the field desktop category page style to :
categories and recent topics

On the home page I have the categories ok but under the categories, the recent topics appear with a default template. And I would like to have the thumbnails with list mode instead.
How can I proceed please ?

For information the thumbnails with list mode works well inside the categories.

I do not believe that component is compatible with the topic list generated on the categories with recent topics page. All of the “Categories with…” pages are their own special template that this component will not affect.

Hello,

I have an issue with [Double boxes bug “Modern Category + Group Boxes” Subcategories]. Any ideas how to fix ? (Double boxes bug "Modern Category + Group Boxes" Subcategories)

This has been fixed

Can we edit the Category abbreviations in the boxes (as circled in this image)?

We’d really like to be able to update those abbreviations, as we have many categories with similar names (the names are iterations based on class/grade years), so they’re getting similar abbreviations. Also the abbreviations aren’t very meaningful for our community.

You can replace the abbreviations with images:
Click the category → wrench icon → Images

And if you want to hide just abbreviations, you could create a component and apply something like the following css:

.custom-category-boxes:not(.above-discovery-categories-outlet) .category-box .category-box-inner {
    .category-logo.no-logo-present {
        display: none;
        
        & + .category-details {
            grid-column: 1/3;
            padding: 1em 1.5em;
            width: 100%;
        }
    }
}

Before:

After:

Hi @jordan.vidrine How can I show subcategories in the modern category box? I selected boxes and sub categories but I don’t see it showing up? Was this option not added to the component?

They are hidden by default, to show them, you will need to unhide them via custom CSS in a theme component.

Thanks, I found that out after I forked the repo. My issue is resolved.

Hello @jordan.vidrine, first of all congratulations for your theme which is very nice to use, however I’m new to discourse and I don’t know it very well but I want to add css but I can’t find the button to add custom css? Should I add a plugin to do this because on the default theme I could do it directly in the theme? Thank you in advance

You can find info on how to customize your Discourse here → Beginner's guide to using Discourse Themes

I’m one more person who likes the theme, and starts my question by saying “thanks” and “well done”!

My question is: Is there a way to set default dark mode colour pallet?

Here’s what it looks like (with some bad Norwegian translation, sorry) where I’ve set the default theme, which is a light mode:

I’ve made custom pallets for light and dark mode (which are enabled as user selectable, and that works), but I can’t deactivate Air-Light and Air-Dark. And when I go to the site in Incognito with dark mode enabled on the device, I get served Air-Dark.

Oh, and another question: Where is the Dark Light Scheme Toggle supposed to be?

Clicking the profile pic top right gives me this when I’m logged into a test user:

Here’s a link to my site, which is very much not done, if it helps to take a look. Thanks!

Did you follow these guidelines?

This topic is for the dark light toggle component installed on the air theme. It should help you there. You can set it to be in the sidebar or the header.

Yes, the user can choose light and dark mode fine. What I’m working on is what a new user would see. The default before choosing.

If a new user comes to the site, and has light mode on the device, they get the pallet I’ve set in the screenshot. But if they have dark mode on the device, they get Air-Dark. That’s what I want to change.

Thanks for the link to the component! I didn’t realise it was a separate component.

What do you want to show for users in dark mode?

Ok, so I have four pallets installed/activated:

• Mine-Light
• Mine-Dark
• Air-Light
• Air-Dark

(I’d like to be able deactivate the last two, but that’s a separate issue. They’re nice! But I’m making a forum for a football (soccer) team, and have made pallets that correspond to the kit colours. )

I have been able to set Mine-Light as the default pallet - so if a new user goes to the site with light mode on their device, they get served that.

But here’s the problem: If a new user goes to the site with dark mode on their device, they get served Air-Dark. And I want it to be Mine-Dark. (To get that now, they must manually select it in settings.)

What scheme do you have set here? → admin/site_settings/category/all_results?filter=dark%20mode

Ooh, setting my preferred scheme there worked - thanks!

A bit weird that I could only set default dark mode there (Site settings ➔ Basics), though - and only set default light mode in the theme settings.

I’d consider adding a little note, preferably with a link, under where you set the light mode in your theme settings. Something like:

This sets the default light mode pallet for your theme. Click here to set default dark mode./Go to Site settings ➔ Basics, to set default dark mode.

BTW., I’ve been having some fun with some transparecy and blur and your theme. (It gave me some z-index troubles, though - probably due to my noobness, which I’m still working out kinks with.) I especially liked how it gave the background swoosh some more weight!

Take a look if you want! (Still early days, though - as I assume you can see.)

Hi there, this is Wayne Hsu from Niantic, Inc.
We are building our forum for 8thwall.com with Discourse Air Theme with custom color palette. And for some reason in the mobile view, the background of the main content container for the categories page (div id: main-outlet) is completely transparent and alpha is set to 0. I don’t see a way to update the color/alpha of the background.
I saw someone has a similar issue before
☁️ Discourse Air Theme - #187 by hequaye

And a suggestion was to change “desktop category page style” to something else in the settings (currently it’s set to Categories and Latest Topics), but I don’t see it’s helping as it’s setting for desktop view only.
Any thoughts on a solution on this?
Thanks!

Looks pretty nice!

I think the Air Theme is so nice, however, the option to edit (or add) CSS is not there when I visit ADMIN > CUSTOMIZE > Air Theme. Am I missing something? https://www.communiteq.com/ is hosting my site. This is what I see:

You have to add your own component

@Moin! I’m brand new to Discourse, but WOW! This just keeps getting better and better! Thank you so much!

Also, please accept my apologies, as I see that when reading through this thread, this question has been asked and answered about 5,000 times.

No need to apologize. It may not be commonly known that you can do that!

Here’s a guide if you want to explore the theme/components:

Thank you for the theme. I would like to use adobe fonts. do i have to edit the theme file? or what is the smartest way to do that?

I have also seen the header logo is kinda small and the ri%ght hand side search bar can and login can look more like a button than icon… is that a plugin/compontent or css

I believe you can create a new theme-component and override the fonts

This computer bent maybe able to be modified or you might find fonts in google fonts to your liking

.Google Fonts

The header you can target and adjust with CSS I believe

Maybe not quite what your looking for. But maybe of interest.

Hi all

Thanks for such a great theme!
I’m just struggling with something. I’ve noticed on mobile that some of the Profile Preferences tabs don’t have a solid background, causing it to look a bit strange. See image below for reference:

The error page on mobile version does the same thing. They’re all fine on desktop/tablet view, but mobile version seems to have different CSS?

Does anyone perhaps know how/where I can change this? I don’t have any coding background, so would I need to get a developer to do this for me?

Here is an example of what it looks like on tablet/mobile and also what most of the other tabs look like:

Welcome to Meta!

I don’t think so. This is an official theme so it is maintained by the Discourse team. But even other themes which are shared here are often fixed by the maintainer when you report a problem.

I can reproduce your problem here. It looks even worse than your screenshot because the message preview is wider than my screen.

Does anyone know how to hide td-class?

You can try this CSS:

.topic-list {
    .topic-list-header .posts,
    .topic-list-body .posts {
        display: none !important;   
    }
}

Yes, I tried to hide them this way. regular divs are hidden, but it doesn’t work with td. I tried several options:

.td.num.posts... {
        display: none;
}

.td:num.posts... {
        display: none;
}

I tested my CSS, and it works for me. Did you test it?

It misses the !important for this theme.

Thank’s @chapoi

.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts,
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.age,
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posters {
	display: none;
	
}

There is some empty space at the top. Is there any way to remove it? I can’t find anything using the element inspector.

And I would like to increase the width of the block with the topic content

@jordan.vidrine

There’s a margin-top in the main-outlet class

You should add this:

html body #main-outlet {
  margin-top: 0;
}

I’ve never used this yet, but there is a topic-width settings in the css, in a root element.

Add this, it should adapt everything else:

:root {
  --topic-body-width: 750px;
}

This is something not right

At the same time it looks normal. Thank you

.container.posts {
    grid-template-columns: 90% 10%;
}

Thanks for sharing! Will take a look at this soon.

This has been fixed in the latest merging of a PR

Please tell me how to crop the background image like this, with symmetrically rounded corners.

Now the code looks like this:

html .background-container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: url(https://site/uploads/default/original/2X/2/26d48362654a9e03c716eeaff4a176cbbd01d6b8.png);
    background-size: cover;
  
}

You are going to want to edit the clip path properties. You can learn more about that on sites like css tricks.

When I use the theme here at Meta, the icons in front of Quote, Edit, Copy Quote, and Ask AI are invisible.

Hmm, what color scheme are you using? The bg for that isnt what the theme uses.

WCAG Light definitely has the problem, but I changed to “theme default”

and it was still the same. I did refresh to check that the color scheme was saved so I hope it is not affected by my problem with changing color schemes. The blue in the background was lighter after I changed to the default color scheme.