🌅 최신 테마 'Horizon' 소개

[lindsey (Lindsey Fogle)]

지난 몇 달간 우리는 최신 Discourse 테마인 Horizon 개발에 매진해 왔으며, 오늘 이 작업을 여러분과 공유하고 Horizon을 커뮤니티에서 사용해 보시기를 초대합니다.

이 주제에서 Horizon에 대해 소개하고 설치 방법을 안내해 드리겠습니다.

Horizon에 대해

Horizon은 관리자의 추가적인 노력 없이 커뮤니티에 훌륭한 사용자 경험을 제공하도록 설계된 단순하고 아름다운 테마입니다. 이름은 Horizon이 Discourse를 사용할 수 있는 대상이 누구이며, Discourse 커뮤니티가 어떻게 보일 수 있는지에 대한 더 넓은 비전을 표현하길 바라는 우리의 희망을 반영합니다.

라이트 모드

다크 모드

왜 Horizon을 만들었을까요?

Horizon은 누구나 더 쉽게 Discourse 커뮤니티를 시작하고 자부심을 가지고 멤버들과 공유할 수 있도록 만들기 위해 만들었습니다.

Discourse 관리자들과의 대화를 통해, 커뮤니티를 시작하는 가장 중요한 부분 중 하나는 커뮤니티 멤버들이 환영받고 즐길 수 있는 공간이 되도록 그 외관을 수정하는 것임을 알게 되었습니다. Horizon은 추가적인 노력이나 커스터마이징 없이도 훌륭한 외관의 커뮤니티를 가질 수 있게 해줍니다.

Horizon은 누구를 위한 것일까요?

Horizon은 Discourse의 외관을 커스터마이징할 전문 지식이나 자원이 없는 커뮤니티를 위해 설계되었습니다.

우리는 Discourse가 얼마나 유연하고 커스터마이징할 수 있는지 자랑스럽게 생각합니다 — 그리고 그것은 변하지 않을 것입니다! 하지만 우리는 세상에 더 많은 Discourse가 존재하는 것이 좋은 일이라고 믿으며, 기술에 익숙하지 않은 커뮤니티가我们的产品을 통해 번영할 수 있도록 하는 것이 우리가 그것을 실현하는 최선의 방법이라고 생각합니다.

Horizon의 특별함은 무엇일까요?

기본(Default) 테마가 백지 상태라면, Horizon은 자신의 의견을 가지고 있습니다. 그것은 여백, 단순함, 그리고 현대적인 디자인 미학을 중시합니다.

차이를 보려면, 여기 Meta의 사이드바 하단 테마 토글을 사용하여 Horizon으로 전환해 보세요:

Horizon에서 달라지는 점을 몇 가지 소개합니다:

• 낮은 정보 밀도. Horizon의 가장 눈에 띄는 특징은 토픽 카드입니다. 표준 테이블 뷰에서 슬림하게 줄여 접근하기 쉽고 단순하게 느껴지도록 했습니다. 토픽 참여자, 태그, 지정된 사용자에 대한 상세 정보와 같은 특정 정보는 표시되지 않습니다.
• 더 큰 텍스트와 더 많은 여백. 토픽 카드 외에도, 읽기 영역의 기본 글꼴 크기를 늘리고 전체 폭 구조를 적용하여 Horizon에 더 많은 여백을 도입했습니다.
• 그대로 사용하도록 설계됨. 사이트 외관에 대한 광범위한 제어나 매우 특정한 디자인 요구 사항이 있는 커뮤니티는 여전히 기본(Default) 테마를 기반으로 작업하거나 필요에 가장 잘 부응하는 자체 테마를 만드는 것이 좋습니다. Horizon을 가장 인기 있는 공식 테마 컴포넌트와 테스트하여 경미한 호환성 문제만 발견했지만, Horizon에 비공식 컴포넌트나 기타 사용자 정의 코드를 추가하는 것은 권장하지 않습니다.

Horizon 사용하기

다음 단계를 통해 Horizon을 멤버들에게 활성화할 수 있습니다:

1. 관리자 영역으로 이동하고 외관 섹션으로 가서 테마 및 컴포넌트를 클릭합니다.
2. Horizon 테마 카드를 찾아 … 버튼을 클릭한 후 **기본값으로 설정(Set as active)**을 선택하여 Horizon을 커뮤니티의 새로운 기본 테마로 만듭니다. (이 변경 사항을 확인하려면 화면을 새로고침해야 할 수 있습니다.)

Horizon과 잘 작동하도록 특별히 제작된 새로운 컬러 팔레트 중 하나를 선택적으로 활성화할 수 있습니다.

참고: Horizon에서 사용되는 팔레트를 교체할 수 있지만, 사이드바의 컬러 선택기에 표시되는 팔레트는 Clover, Horizon, Lily, Marigold, Royal, Violet 이름의 팔레트만입니다.

컬러 팔레트 구성에 대한 설명서.

1. 관리자 사이드바에서 컬러 팔레트를 클릭합니다.
2. 원하는 컬러 팔레트(예: Horizon)를 선택합니다.
3. 사용자가 컬러 팔레트를 선택할 수 있음 설정을 확인한 후 체크 마크를 클릭하여 확인합니다.
4. 사용하려는 모든 팔레트에 대해 단계 2-3를 반복합니다.

새로고침 후, 사이드바 하단에 붓 아이콘이 표시됩니다. 이를 클릭하여 Horizon에 사용할 특정 컬러 팔레트를 선택할 수 있습니다(위 스크린샷 참조). 멤버들도 활성화된 팔레트 중 하나를 선택하기 위해 동일한 작업을 수행할 수 있습니다. Horizon의 새로운 기본 팔레트를 설정하려면(즉, 멤버가 변경 사항을 만들거나 익명 방문자가 보기 전에 Horizon이 어떻게 보이는지):

1. 관리자 영역에서 테마 및 컴포넌트로 이동합니다.
2. Horizon 카드를 찾아 편집을 클릭합니다.
3. 컬러 팔레트 필드를 원하는 기본값으로 변경합니다.

Horizon의 다음 단계

우리는 이제 막 시작했습니다! 이 테마의 첫 번째 버전에 대해 열심히 작업했지만, Horizon에 계속 투자하고 시간이 지나면서 개선해 나갈 예정입니다. Horizon을 사용하는 사이트들로부터 적극적으로 피드백을 받아 지속적으로 개선해 나가고, 머지않아 Discourse 사이트에 기본적으로 포함되는 기본 테마가 되기를 희망합니다.

감사합니다

Horizon(그리고 Discourse 팀!)을 지원해 주신 모든 분께 진심으로 감사드립니다. Meta에서 Horizon을 테스트해 주거나 베타 테스트에 참여해 주신 덕분에 버그를 찾고, 조정을 하며, 이 테마에서의 Discourse 전반의 경험을 다듬는 데 큰 도움이 되었습니다. 여러분의 시간, 피드백, 그리고 지원에 다시 한번 깊이 감사드립니다!

[hellekin]

This looks awesome! I really want to give it a go.

But there’s no route for /admin/customize/themes/1/common/*/editcustomization. Can you please add it? I’m using it to provide special headers and other customization independently of the chosen theme.

Thank you!

Oops, sorry I should have posted to Help us test Horizon, our newest theme.

[Moin]

Why don’t you create a new theme component where you make changes and add that to the horizon theme?

Customizing themes without an Edit code button

Sometimes, you may want to customize a Discourse theme but find that there’s no “Custom code” section with an “Edit code” button available. This often happens with remote themes (themes installed from an external source) and the preinstalled themes (Horizon & Foundation). Here’s how you can still add your customizations: Understanding the limitation For preinstalled themes, you see a banner telling you This theme is preinstalled and can not be deleted or customized For remote themes, you’ll…

[Moin]

Did I miss it or has Horizon not been added to Crowdin for translation? Shall I create a pull request with the translations instead?

[lindsey (Lindsey Fogle)]

@hellekin

This looks awesome! I really want to give it a go.

But there’s no route for /admin/customize/themes/1/common/*/editcustomization. Can you please add it? I’m using it to provide special headers and other customization independently of the chosen theme.

Horizon is primarily built to be used as-is, so direct customizations or customizing via unofficial components are not recommended. That said, I’d love to learn more about what you’d like to change about Horizon to see if it could be a good candidate for us to incorporate more directly into the theme.

@Moin

Did I miss it or has Horizon not been added to Crowdin for translation? Shall I create a pull request with the translations instead?

I’m looking into this, I’ll follow up soon!

[hellekin]

Actually it’s just a header to link the forum to a Fediverse account (and a <noscript> tag to do the same in the footer).

I put the theme component code here: https://git.z7l.eu/ps/discourse-lire.im

See the rationale for Mastodon.

[Helga_Razinkova (Helga)]

This looks great!! I assume the theme won’t be compatible with custom components we’re currently using? Ex.:

[Jonathan5]

Continuing the discussion from Help us test Horizon, our newest theme:

@chapoi

You can check out Horizon on Meta using the theme switcher in the bottom of your sidebar:

This didn’t work for me on mobile (iPhone 11 Pro Max). I guess it might be because I’ve increased font size in my phone settings.

[satonotdead]

This theme is wonderful, thanks for your work!

I wonder how to keep forked horizons updated? We have some custom modifications to keep

[sam (Sam Saffron)]

Create components and add to theme to customise

[sam (Sam Saffron)]

Long term our goal is for our official components to all work well on horizon, for custom work as a customer feel free to contact @team to see if we can help you out (may require some paid custom work)

[SubStrider]

I want to create a user select-able option for this theme so that I can add the theme component which will modify this theme. I want the users to be able to select the Horizon theme as-is or be able to select its variation.

The variation of this theme will be full width. It will also style the CSS of individual post rows to bring content up in the visual hierarchy than other elements on the page like scroll bar, new and unread topics at the bottom etc.

Horizon looks really great but it still does not solve the problem of information density on topics page. Its visually overwhelming for people coming from other traditional forum software.

My comments may not be relatable to native discourse users but I am bringing an outside view. I have to make these changes for my community at least.

[hellekin]

I found a little bug here, in the groups display, where there can be an overflow:

It can be alleviated by adding CSS:

.group-box-inner {
	overflow: auto;
}

[asa]

Is it intentional that there is so much space between the navigation bar and the content?

[NateDhaliwal]

No, I don’t think that is expected. Perhaps a component interfering with this ?

[sam (Sam Saffron)]

I think it is atm, my guess is that this is a cropped screenshot of an ultra wide full screen browser

[MachineScholar]

Totally loving this theme, but seems like the Search Banner component isn’t playing too nicely with it. The search_banner.subhead text isn’t showing, causing it to look unaligned. There also a faint grey line

Update:
I disabled the Search Banner and the built-in welcome+search looks better. However, I get this sub-header text in the screenshot below.

Furthermore, the bookmarks link on the home page says I don’t have any bookmarks yet even though I do. It links to /bookmarks instead of /u/johndoe/activity/bookmarks

[asa]

It is indeed a widescreen. However, the large amount of empty white space is distracting. Is it possible to adjust this?

[Lilly (Lillian)]

Thanks for letting us know about this - I’ve asked someone from design team to have a look at the issue.

[SubStrider]

Had reported this almost a month ago but..

Help us test Horizon, our newest theme

This extra white space to the left and right of the topic contents is what I was talking about. Doesn’t look uniform. Ideally I would like an option for it to occupy the full width, or at the very least be aligned to the left instead of center. I can anyway override it using custom CSS but just reporting in case there is consensus on aesthetics. [Screenshot 2025-06-02 at 10.21.01 PM] [Screenshot 2025-06-02 at 10.25.54 PM]