Air Theme

[yekta]

can someone tell me how to change the background of this theme?

[Heliosurge (Dan DeMontmorency)]

Can you be more specific? There are a few places you can modify th background with a pic.

[Heliosurge (Dan DeMontmorency)]

Hi @jordan-vidrine I have noticed in a couple of spots there is no container around the content.

I would prefer to bubble these elements. As it makes it hard to read when some text for example moves from white background to blue.

This is badges. But also does it in “Earned …”

I would prefer the bubble vs the straight say white column as I think it has a Nicer effect. This would also be good for other floating elements and even the modern category group headers.

[Heliosurge (Dan DeMontmorency)]

Mod for Air Theme support who’s online plugin

Create theme-component

Edit common CSS and add this code

// Whis Online Customization
.discovery-list-container-top-outlet.online_users_widget {
      display: flex;
      padding-top: .38em;
      background-color: var(--secondary);
      border: 1px solid rgba(var(--primary-rgb), 0.2);
      border-radius: 0.65em;
      transition: box-shadow 100ms ease-in-out;
      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05);
}

Enable Component in air theme

Result previous this displayed without background color or border making it hard to see read

There are a few areas would like to fix up that have this issue.

Example shown in my previous post.

---

EDiT New additional fix for Global banner problem

Additional info on Global Banner Specs:

@awesomerobot

Global pinned banner you can fit a 1050px x 150px image in there without hitting any scrollbars.

---

@awesomerobot

Note that as you narrow the browser the image won’t fit, and scroll will return. You can avoid this with a little custom CSS added to your theme to re-scale the image… but the image will start getting really small once you’re down to the size of a mobile device, so it’s not perfect

//global banner image fix
#banner img {
    width: 100%;
    height: auto;
}

Special thanks @awesomerobot for providing this code snippet

[dviedma (Daniel Viedma)]

Hi everybody, I was just trying to add some custom CSS to this theme but the option is not there together with the other theme customization options. What am I missing?

[Heliosurge (Dan DeMontmorency)]

Did you create a new theme component & add it to in this case the air theme?

You have seen my mods above. Are you trying to override parts of the theme settings or like my post above add mod/fixes?

[dviedma (Daniel Viedma)]

Thank you Dan! I was able to figure out the adding a new component and then add custom CSS there.

[Heliosurge (Dan DeMontmorency)]

If you’re wanting to Override a setting. Use “!important”
Ie

.some-selector {
    padding-top: 2.5em !important;
{

Still learning myself. Discourse is quite diverse.

[musicmaker3112]

Thanks for the great theme. it all works. But I have the question how I can change the background image ?
Thanks for the help

[Vaping_Community]

Create a theme component and add this with your background image

html .background-container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-image: url();
    background-size: cover;
    opacity: 1;
    /* background: linear-gradient(90deg, var(--tertiary-hover) 0%, var(--tertiary) 100%); */
    clip-path: unset;
    background-color: var(--secondary) !important;
}

Beginner's guide to developing Discourse Themes

So, you want to create Discourse themes? Not sure where to start? Or maybe you have created Discourse themes before, but want to learn how to do even more cool things. Well, you’ve come to the right place Developer’s guide to Discourse Themes Subjects include a general overview of Discourse themes, creating and sharing Discourse themes, theme development examples, searching for and finding information / examples in the Discourse repository, and best practices. Prerequisites: …

[Liseré]

Hello guys,

Is there a way to add some external links in the header close to the logo?

Thank you!

[Heliosurge (Dan DeMontmorency)]

There is this one

Custom Header Links (icons)

Summary Custom Header Links (icons) will allow you to easily add linked icons to the Discourse header. Preview Preview on Discourse Theme Creator Repository Link https://github.com/discourse/discourse-icon-header-links New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features Screenshots Desktop [Capture3] Mobile [Capture] Settings This component includes a …

And

Dropdown Header

Overview This theme component allows you to add links with text, icons, and dropdowns to the native header of your Discourse site. [image] Bug reports, feature requests, and PRs are most welcome; sponsorship enables work on this component to be prioritised by the Pavilion team. Code View the GitHub Repo Settings There are a variety of settings you can configure to customize the component, including link customizations, icon sourcing, adding link security, positioning…

There is also one that adds a bar with dropdowns below site header

Header Submenus

Nice update Joe, I’ve only run into two problems on mobile. You can no longer scroll side to side if you have a lot of menu items. When you tap an item in the dropdown, the dropdown stays open

[Liseré]

Hi,

Thank you very much for taking the time to reply.

I was using this one but was not entirely satisfied : Custom Top Navigation Links

Your second suggestion is exactly what I need, I am really happy with the result.

Thank you very much for your help!

[Liseré]

Hello all,

Sorry for this double message but is there a way to show the subcategories on both desktop and mobile and in the same time display the full category titles on mobile when they are a bit long?

My config is CATEGORY BOXES WITH SUBCATEGORIES but without using Modern Category + Group Boxes.

The result is great on desktop and mobile when I use the desktop version. But with the mobile version you cannot read the end of some category titles.

Thanks a lot for your help!

[Heliosurge (Dan DeMontmorency)]

Can you post a ss?

[Liseré]

Sure please find attached 2 SS with my iPhone one mobile version and one desktop version.

[Heliosurge (Dan DeMontmorency)]

I see subcategories showing in both ss. Are you looking to have category description in both? Or mirror desktop with no desc?

[Liseré]

Sorry if I was not clear.

I would like to see the full category titles

For example on the desktop version you have «Discussions Générales sur la mode » but on the mobile version you have only « Discussions Générales »

[Heliosurge (Dan DeMontmorency)]

I am not sure the CSS code off hand. But you should be able to have the category title wrap like in the first pic you posted.

Maybe try inspect element on desktop to see if you can identify the CSS used to wrap the category name to use 2 lines.

[Liseré]

I tried some CSS with ChatGPT and Claude for example:

.category-box-heading,
.category-box-heading a,
.category-box-heading h3 {
max-width: 100%;
width: 100%;
display: block;
word-break: break-word;
overflow-wrap: break-word;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.4;
padding: 5px 0;
}

.parent-box-link {
display: block;
width: 100%;
}

@media screen and (max-width: 767px) {
.category-box-heading h3 {
font-size: 16px; /* Ajustez cette valeur selon vos besoins */
}
}

But it’s not working .

Is there a way to force the desktop view on mobile? It will be perfect to have description and subcategories.

Thanks!