에어 테마

[Discourse]

	요약	Air Theme는 포럼을 향상시키기 위해 몇 가지 테마 구성 요소가 포함된 깔끔하고 현대적인 테마입니다!
	미리보기	Discourse Theme Creator에서 미리보기
	레포지토리 링크	https://github.com/discourse/discourse-air
	Discourse 테마가 처음이신가요?	Discourse 테마 사용 입문가 가이드

이 테마 설치하기

기능

라이트 모드

다크 모드

카테고리 페이지

이 테마에는 포럼을 향상시키기 위한 몇 가지 구성 요소도 포함되어 있습니다.

• 클릭 가능한 주제
• 현대적인 카테고리 + 그룹 박스

이 테마가 올바르게 렌더링되려면 활성화해야 하는 몇 가지 설정이 있으므로 설치 시 아래 팁을 꼭 읽어보시기 바랍니다.

---

팁

다크/라이트 스키마 토글

이 기능이 올바르게 작동하려면 https://discourse.jordanvidrine.com/admin/customize/colors 영역에서 최소 2가지 색상 스키마 옵션이 활성화되어 있어야 합니다. 최소 두 가지 색상에 대해 사용자가 선택할 수 있는 색상 스키마가 활성화되어 있어야 합니다.

이 설정을 완료하면 사용자는 사용자 설정 인터페이스 메뉴에서 라이트 및 다크 환경 설정으로 두 가지 색상 스키마 중 하나를 선택할 수 있습니다.

---

환영 배너

관리자 > 환영 배너(/admin/config/welcome-banner) 페이지로 이동합니다.

• 테마에서 활성화… 드롭다운에서 Air Theme를 선택합니다.
• 위치 드롭다운에서 사이트 헤더 아래를 선택합니다.

---

현대적인 카테고리 + 그룹 박스

이 테마 구성 요소는 /admin/site_settings/category/all_results?filter=categories 영역에서 카테고리가 하위 카테고리를 가진 카테고리 박스 설정을 사용하도록 요구합니다.

이 테마 구성 요소는 포럼 관리자가 헤더 제목을 사용하여 카테고리 페이지를 조직하고 각 헤더 아래에 어떤 카테고리가 표시될지 선택할 수 있도록 합니다. 단순성을 유지하기 위해 최대 5개의 제목만 사용하도록 허용했습니다. 카테고리 + 헤더 설정이 선택되지 않으면 모든 카테고리가 위에서와 같이 렌더링되며, 이는 기본 렌더링 옵션입니다.

우리가 호스팅하고 있나요? Standard, Business, Enterprise 플랜에서 테마를 사용할 수 있습니다.

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

Is there any possibility to change the header text “Welcome to the forum”

[jordan.vidrine]

Yes, this can be edited in the Discourse Search Banner component

[Jerdeman (Jeroen)]

A while back I posted an issue with not seeing the categories on a mobile view (Air Theme - #172). I messaged a bit with @jordan.vidrine, but we were unable to get to the root of the issue. Hopefully someone else has some ideas.

For the details
Using a clean install of Discourse 2.7.11 on kubernetes with the help of a helm chart from Bitnami, and the latest version of the theme installed and configured as mentioned in the opening post, we do not see any categories on a mobile view and styling is off on the latest page.

What we tried
Besides using a clean install, we attempted to use some older versions of the theme as well. The problem however remained, but we did not exhaustively tried all versions.
We also compared the html on our instance with that of discourse.jordanvidrine.com , and noticed that it is significantly different.

Gut feeling
As we cannot use a ‘beta’ version, my gut feeling tells me this is a compatibility issue between the theme or one of its plugins and Discourse 2.7. I’d love to know if someone has this theme working on 2.7, and if so with which versions of the theme and relevant plugins.

Question
Has somebody got this theme working with 2.7 and/or are there any clues on what we could do to get this working?

[Hyeonji_Kim]

Hi. first, Thank you for this great theme

I want to change font-family, How can I do that.

I try this

• download this Theme Google Fonts , and change Font setting on SITE SETTING → Not work

• add @import{web font link ~~~ } code in Desktop.css, mobile.css → Not work

Which file should I modify to modify the font???

[jordan.vidrine]

I believe you should be able to set a customized font without a component here: admin/site_settings/category/all_results?filter=font

If you want more customization, I believe the google fonts theme component you linked would work. Though, the theme uses theme-settings and not a site setting I believe.

Have you brought this issue up in the topic for that font component?

[hequaye (Henry Herbert)]

Hello everyone, can anyone help me change the sizing and “fixed nature” of the background color on mobile?

The css for mobile is transparent on my end. And I just need a little guidance on changing the fixed background for the background colors.

If I’m not mistaken there’s a header background and a page background correct?

[jordan.vidrine]

This is because the theme and its included components are fairly picky about how the site is set up.

In the OP I shared that:

@jordan-vidrine

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.

[Nerd_Alert]

is there any way to make the background an image? i’d rather have an image than colors. using

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

makes the top of the color thing the image, but not the bottom.

[jordan.vidrine]

What you did is fine to add the image, but you will also want to remove the clipping path that is created to give that overlay affect.

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