エアテーマ

[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)]

ヘッダーテキスト「Welcome to the forum」を変更する可能性はありますか？

[jordan.vidrine]

はい、これは Discourse Search Banner コンポーネントで編集できます

[Jerdeman (Jeroen)]

しばらく前に、モバイル表示でカテゴリが表示されないという問題を投稿しました（Air Theme - #172

詳細
Bitnamiのhelm chartの助けを借りて、kubernetes上にDiscourse 2.7.11のクリーンインストールを使用し、最初の投稿で述べられているように最新バージョンのテーマをインストールおよび設定しましたが、モバイル表示ではカテゴリが表示されず、最新ページではスタイリングが崩れています。

試したこと
クリーンインストールを使用することに加えて、テーマの古いバージョンもいくつか試しました。しかし、問題は残ったままでしたが、すべてのバージョンを網羅的に試したわけではありません。
また、私たちのインスタンスのHTMLとdiscourse.jordanvidrine.com のHTMLを比較したところ、大幅に異なっていることに気づきました。

直感
「ベータ」バージョンを使用できないため、この問題はテーマまたはそのプラグインのいずれかとDiscourse 2.7との互換性の問題であると直感的に感じています。このテーマが2.7で動作している人がいれば、そのテーマと関連プラグインのどのバージョンを使用しているか教えていただけると嬉しいです。

質問
誰かがこのテーマを2.7で動作させていますか、またはこれを動作させるために何ができるかについてのヒントはありますか？

[Hyeonji_Kim]

こんにちは。まず、この素晴らしいテーマをありがとうございます

フォントファミリーを変更したいのですが、どうすればよいでしょうか。

以下を試しました

• このテーマをダウンロードしました Google Fonts 、そして SITE SETTING のフォント設定を変更しました – > 動作しませんでした

• @import{web font link ~~~ } コードを Desktop.css、mobile.css に追加しました → 動作しませんでした

フォントを変更するには、どのファイルを編集すればよいですか???

[jordan.vidrine]

コンポーネントなしでカスタムフォントを設定できるはずです。admin/site_settings/category/all_results?filter=font

さらにカスタマイズしたい場合は、リンクしたGoogleフォントのテーマコンポーネントが機能するはずです。ただし、テーマはサイト設定ではなくtheme-settingsを使用していると思われます。

そのフォントコンポーネントのトピックでこの問題を取り上げましたか？

[hequaye (Henry Herbert)]

皆さん、モバイルで背景色のサイズと「固定された性質」を変更するのを手伝ってもらえませんか？

私の側では、モバイル用のCSSは透明になっています。そして、背景色の固定背景を変更するためのガイダンスが少し必要です。

私の認識が正しければ、ヘッダーの背景とページの背景がありますよね？

[jordan.vidrine]

これは、テーマとそのコンポーネントがサイトのセットアップ方法にかなりうるさいためです。

OPで共有した内容は次のとおりです。

@jordan-vidrine

カテゴリとグループボックスをモダンにする

このテーマコンポーネントでは、/admin/site_settings/category/all_results?filter=categories エリアで サブカテゴリ付きカテゴリボックス 設定を使用する必要があります。

このテーマコンポーネントにより、フォーラム管理者はヘッダータイトルでカテゴリページを整理し、各ヘッダーの下に表示されるカテゴリを選択できます。シンプルにするために、最大5つの見出しのみを許可しました。 カテゴリと見出しの設定が選択されていない場合、すべてのカテゴリは上記のようにレンダリングされます。これがデフォルトのレンダリングオプションです。

[Nerd_Alert]

背景を画像にすることはできますか？色よりも画像を使いたいのですが。

body {
    background-image: url("ここに画像URL");
    background-color: #cccccc;
}

これを使うと、色の部分の上部が画像になりますが、下部は画像になりません。

[jordan.vidrine]

画像を追加したのは問題ありませんが、オーバーレイ効果を生み出すために作成されたクリッピングパスも削除する必要があります。

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