موضوع الهواء

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

Install this theme

Features

Light Mode

Light Mode
Light Mode2946×1864 459 KB

Dark Mode

Dark Mode
Dark Mode2840×1860 416 KB

Categories Page

Categories Page
Categories Page2568×1590 458 KB

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

:exclamation: 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

Dark Light Scheme Toggle
Dark Light Scheme Toggle710×836 57 KB

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.

image
image2336×702 71.7 KB

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.

color schemes
color schemes2424×1188 213 KB

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.

search banner
search banner1338×146 7.34 KB

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.

modern category + group boxes
modern category + group boxes1372×128 16.3 KB

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.

:discourse2: 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 documentPerform check on document:
136 إعجابًا
2

That is just amazing Jordan! :heart_eyes: I love it!

17 إعجابًا
5

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

7 إعجابات
6

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

9 إعجابات
7

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

13 إعجابًا
8

Theme looks amazing. Awesome work :heart_eyes:

5 إعجابات
9

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. :heart:

8 إعجابات
11

Thanks it is nice…

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

8 إعجابات
79

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

3 إعجابات
80

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;
}
6 إعجابات
106

Refreshingly beautiful. Great work @jordan.vidrine!

4 إعجابات
182

هل هناك أي إمكانية لتغيير نص العنوان “مرحباً بك في المنتدى”

4 إعجابات
183

نعم، يمكن تعديل هذا في مكون Discourse Search Banner :+1:

3 إعجابات
184

منذ فترة، طرحت مشكلة تتعلق بعدم رؤية الفئات في عرض الهاتف المحمول (Air Theme - #172). لقد راسلت @jordan.vidrine قليلاً، لكننا لم نتمكن من الوصول إلى جذر المشكلة. نأمل أن يكون لدى شخص آخر بعض الأفكار.

للتفاصيل
باستخدام تثبيت نظيف لـ Discourse 2.7.11 على kubernetes بمساعدة مخطط helm من Bitnami، وأحدث إصدار من السمة مثبت ومكون كما هو مذكور في المنشور الافتتاحي، لا نرى أي فئات في عرض الهاتف المحمول والتصميم غير صحيح في أحدث صفحة.

ما جربناه
إلى جانب استخدام تثبيت نظيف، حاولنا استخدام بعض الإصدارات الأقدم من السمة أيضًا. ومع ذلك، ظلت المشكلة قائمة، لكننا لم نجرب جميع الإصدارات بشكل شامل.
قارنا أيضًا ملف html على مثيلنا مع ملف discourse.jordanvidrine.com ، ولاحظنا أنه مختلف بشكل كبير.

الشعور الحدسي
نظرًا لأنه لا يمكننا استخدام إصدار “تجريبي”، فإن شعوري الحدسي يخبرني أن هذه مشكلة توافق بين السمة أو أحد ملحقاتها مع Discourse 2.7. أود أن أعرف ما إذا كان شخص ما قد نجح في تشغيل هذه السمة على 2.7، وإذا كان الأمر كذلك، مع أي إصدارات من السمة والملحقات ذات الصلة.

سؤال
هل نجح شخص ما في تشغيل هذه السمة مع 2.7 و/أو هل هناك أي أدلة حول ما يمكننا فعله لجعل هذا يعمل؟

إعجابَين (2)
185

مرحباً. أولاً، شكراً لك على هذا القالب الرائع :smile:

أريد تغيير الخط، كيف يمكنني فعل ذلك؟

لقد جربت هذا :point_down:

  • تنزيل هذا القالب Google Fonts ، وتغيير إعدادات الخط في إعدادات الموقع – لم ينجح

  • إضافة كود @import{web font link ~~~ } في Desktop.css، mobile.css – لم ينجح

ما هو الملف الذي يجب علي تعديله لتغيير الخط؟؟ :sob:

3 إعجابات
186

أعتقد أنه يجب أن تكون قادرًا على تعيين خط مخصص دون مكون هنا: admin/site_settings/category/all_results?filter=font

إذا كنت تريد المزيد من التخصيص، أعتقد أن مكون سمة خطوط جوجل الذي ربطته سيعمل. على الرغم من أن السمة تستخدم theme-settings وليس إعداد موقع، على ما أعتقد.

هل أثرت هذه المشكلة في الموضوع الخاص بمكون الخط هذا؟

4 إعجابات
187

مرحباً بالجميع، هل يمكن لأحد مساعدتي في تغيير حجم و"الطبيعة الثابتة" للون الخلفية على الهاتف المحمول؟

CSS للهاتف المحمول شفاف من جهتي. وأنا بحاجة فقط إلى بعض الإرشادات حول تغيير الخلفية الثابتة لألوان الخلفية.

إذا لم أكن مخطئًا، فهناك خلفية للرأس وخلفية للصفحة، صحيح؟

3 إعجابات
188

هذا لأن السمة والمكونات المضمنة فيها انتقائية للغاية بشأن كيفية إعداد الموقع.

في المنشور الأصلي شاركت ما يلي:

5 إعجابات
189

هل هناك أي طريقة لجعل الخلفية صورة؟ أفضل أن تكون صورة بدلاً من الألوان. استخدام

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

يجعل الجزء العلوي من اللون صورة، ولكن ليس الجزء السفلي.

4 إعجابات
190

ما قمت به جيد لإضافة الصورة، ولكنك سترغب أيضًا في إزالة مسار الاقتصاص الذي تم إنشاؤه لإعطاء هذا التأثير المتراكب.

html .background-container {
clip-path: unset;
}
5 إعجابات