Luft-Thema

[Discourse]

	Summary	Air Theme is a clean & modern theme with a handful of theme components included to enhance your forum!
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/discourse-air
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme

As this is an official theme maintained by the Discourse team, support issues, bug reports, ux suggestions, and requests for dev advice can be made in the respective categories here on Meta, and tagged with the appropriate theme tag. Click on a link below to get one started.

 Support  Bug  UX  Dev

Features

Light Mode

Dark Mode

Categories Page

This theme includes a handful of components to enhance your forum as well.

• Dark Light Scheme Toggle
• Clickable Topics
• Discourse Search Banner
• Modern Category + Group Boxes

Please read through these tips upon installation, as there are a couple of settings that NEED TO BE ENABLED for this to theme to render properly.

---

Tips

Dark Light Scheme Toggle

For this to work properly, at least 2 color scheme choices need to be enabled in your https://discourse.jordanvidrine.com/admin/customize/colors area. At least two colors need to have color scheme can be selected by users enabled.

Once this is done, users should be able to choose between two color schemes as their light and dark preferences in their user preferences interface menu.

---

Discourse Search Banner

In the options for the discourse-search-banner theme component, the plugin-outlet options needs to be set to BELOW-SITE-HEADER for this theme to render properly.

---

Modern Category + Group Boxes

This theme component requires your categories to use the CATEGORY BOXES WITH SUBCATEGORIES setting in your /admin/site_settings/category/all_results?filter=categories area.

This theme component also allows the forum admin to organize their category page with header titles, and choose which categories appear under each header. To keep things simple, I have only allowed up to 5 headings to be used. If no categories + heading settings are chosen, all categories will render as they do above, this is the default rendering option.

Hosted by us? Themes are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-17T20:44:16Z

Check document

Perform check on document:

[Don]

That is just amazing Jordan! I love it!

[th21]

It will be helpful if the welcome message can be hide when left locale field empty

[oshyan (Oshyan Greene)]

Oh wow, this looks really nice! Thank you for the share.

[itsbhanusharma (Bhanu Sharma)]

This theme gives discourse the modern look it deserves. Very well done @jordan.vidrine

[Ahmed_Gagan]

Theme looks amazing. Awesome work

[thegurjyot (Gurjyot Singh)]

This theme looks so amazing. Hope we can get this category page design as a separate component as well. It is looking way better this way.

[frold]

Thanks it is nice…

First time I install a new theme. I really like this one!!

Studmed.dk

[Jeremie_Leroy]

Hi @jordan-vidrine regarding the # of views column, what kind of code shall i add in the component to override that column being hidden ?

[jordan.vidrine]

I believe this should work:

.full-width .contents .topic-list thead th.posts {
width: 10%;
}

.full-width .contents .topic-list thead th.activity {
width: 10%;
order: 4;
}

th.num.views {
width: 10%;
order: 3;
display: block;
}

.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.posts {
width: 10%;
order: 2;
}

.topic-list .views {
width: 10%;
order: 3;
}

.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.age {
width: 10%;
order: 4;
}

[ggurbet (Gökhan Gurbetoğlu)]

Refreshingly beautiful. Great work @jordan.vidrine!

[ShubhayanS (shubhayan saha)]

Gibt es eine Möglichkeit, den Header-Text „Willkommen im Forum“ zu ändern?

[jordan.vidrine]

Ja, das kann im Discourse Search Banner-Komponenten-Bereich bearbeitet werden

[Jerdeman (Jeroen)]

Vor einiger Zeit habe ich ein Problem gepostet, bei dem ich die Kategorien in der mobilen Ansicht nicht sehen konnte (Air Theme - #172). Ich habe ein wenig mit @jordan.vidrine geschrieben, aber wir konnten die Ursache des Problems nicht ermitteln. Hoffentlich hat jemand anderes ein paar Ideen.

Für die Details
Wir verwenden eine saubere Installation von Discourse 2.7.11 unter Kubernetes mit Hilfe eines Helm-Charts von Bitnami und der neuesten Version des Themas, das wie im Eröffnungsposting erwähnt installiert und konfiguriert wurde. Wir sehen keine Kategorien in der mobilen Ansicht und das Styling auf der neuesten Seite ist fehlerhaft.

Was wir versucht haben
Neben der Verwendung einer sauberen Installation haben wir auch versucht, ältere Versionen des Themas zu verwenden. Das Problem blieb jedoch bestehen, aber wir haben nicht alle Versionen erschöpfend ausprobiert.
Wir haben auch das HTML auf unserer Instanz mit dem von discourse.jordanvidrine.com verglichen und festgestellt, dass es sich erheblich unterscheidet.

Bauchgefühl
Da wir keine ‘Beta’-Version verwenden können, sagt mir mein Bauchgefühl, dass dies ein Kompatibilitätsproblem zwischen dem Thema oder einem seiner Plugins und Discourse 2.7 ist. Ich würde gerne wissen, ob jemand dieses Thema unter 2.7 zum Laufen gebracht hat und wenn ja, mit welchen Versionen des Themas und der relevanten Plugins.

Frage
Hat jemand dieses Thema mit 2.7 zum Laufen gebracht und/oder gibt es Hinweise darauf, was wir tun könnten, um dies zum Laufen zu bringen?

[Hyeonji_Kim]

Hallo. Zuerst einmal vielen Dank für dieses großartige Theme

Ich möchte die Schriftfamilie ändern. Wie kann ich das tun?

Ich habe Folgendes versucht:

• Dieses Theme heruntergeladen: Google Fonts und die Schriftarteinstellung unter WEBSITEINSTELLUNGEN geändert –\u003e Funktioniert nicht

• Den Code @import{web font link ~~~ } in Desktop.css, mobile.css hinzugefügt –\u003e Funktioniert nicht

Welche Datei sollte ich ändern, um die Schriftart zu modifizieren???

[jordan.vidrine]

Ich glaube, Sie sollten hier ohne eine Komponente eine benutzerdefinierte Schriftart einstellen können: admin/site_settings/category/all_results?filter=font

Wenn Sie mehr Anpassungsmöglichkeiten wünschen, glaube ich, dass die von Ihnen verlinkte Google Fonts Theme-Komponente funktionieren würde. Allerdings verwendet das Theme theme-settings und keine Site-Einstellung, glaube ich.

Haben Sie dieses Problem im Thema für diese Schriftartkomponente angesprochen?

[hequaye (Henry Herbert)]

Hallo zusammen, kann mir jemand helfen, die Größe und die “feste Beschaffenheit” der Hintergrundfarbe auf Mobilgeräten zu ändern?

Das CSS für Mobilgeräte ist auf meiner Seite transparent. Und ich brauche nur ein wenig Anleitung, um den festen Hintergrund für die Hintergrundfarben zu ändern.

Wenn ich mich nicht irre, gibt es einen Header-Hintergrund und einen Seiten-Hintergrund, richtig?

[jordan.vidrine]

Das liegt daran, dass das Theme und seine enthaltenen Komponenten recht wählerisch sind, wie die Website eingerichtet ist.

In der OP habe ich geteilt, dass:

@jordan-vidrine

Moderne Kategorie + Gruppenfelder

Diese Theme-Komponente erfordert, dass Ihre Kategorien die Einstellung KATEGORIEFELDER MIT UNTERKATEGORIEN in Ihrem Bereich /admin/site_settings/category/all_results?filter=categories verwenden.

Diese Theme-Komponente ermöglicht es dem Forenadministrator auch, seine Kategorieseite mit Überschriften zu organisieren und auszuwählen, welche Kategorien unter jeder Überschrift erscheinen. Um die Dinge einfach zu halten, habe ich nur bis zu 5 Überschriften zugelassen. Wenn keine Kategorien + Überschrifteneinstellungen ausgewählt sind, werden alle Kategorien wie oben gerendert, dies ist die Standard-Rendering-Option.

[Nerd_Alert]

Gibt es eine Möglichkeit, den Hintergrund zu einem Bild zu machen? Ich hätte lieber ein Bild als Farben. Die Verwendung von

body {
    background-image: url("image url here");
    background-color: #cccccc;
}

macht den oberen Teil der Farbgebung zum Bild, aber nicht den unteren Teil.

[jordan.vidrine]

Was Sie getan haben, ist in Ordnung, um das Bild hinzuzufügen, aber Sie möchten auch den Clipping-Pfad entfernen, der erstellt wird, um diesen Überlagerungseffekt zu erzielen.

html .background-container {
clip-path: unset;
}