Category Banners

[Discourse]

	Summary	Category Banners uses existing category details to create banners for your category pages (for tags check out Discourse Tag Banners).
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/discourse-category-banners
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

As this is an official theme component maintained by the Discourse team, Support, Contribute > Bug, Contribute > UX, and Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started.

 Support  Bug  UX  Feature

Features

Category Banners uses existing category details to create banners for your category pages. It uses the category name, description, and color to generate a banner at the top of the relevant category pages (for tags check out Discourse Tag Banners).

The category description is defined by the first paragraph in each category’s “Category definition for …” topic. The banner background/text colors are defined by your category badge settings.

By default, this will display on desktop and mobile across all Category and Subcategory pages but will not appear if you haven’t given your category a description.

Settings

This component comes with options to override the defaults:

Name	Description
show description	Show description from “About This Category” post
show mobile	Show banners on mobile
show subcategory	Show banners for subcategories
hide if no description	Hide banners if category description is not set
show category logo	Show category logo
align text
exceptions	Banner will not show for these category NAMES
categories	Categories to show a banner for
plugin outlet	Changes the position of the banner on the page
show category icon	Show category icon or emoji from the category settings *
override category icon color	When the category icons are used, enabling this will make the icon match the banner text color

* Note that this setting now refers to the category icon or emoji set in the category settings, not the Category Icons theme component (which is deprecated in favor of the core feature).

Customization notes

If you want to customize these with some additional CSS you can target specific category headers by using this structure (example-category is your category name):

.category-title-header {
  &.category-banner-example-category {
        background: url(example.jpg);
  }
}

This component also adds the class category-header to the body tag as an additional CSS target.

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

Last edited by @lindsey 2025-04-29T13:54:43Z

Check document

Perform check on document:

[Pad_Pors]

thanks for this wonderful theme , it helps users to note the category description much easier.

currently if there’s a link or a bold/italic word in the category description, in the banner it’ll appear as simple text (e.x. p style instead of a style). isn’t it better if the text style is preserved in the banner as well?

[jimmymckinney (Jimmy)]

Hi, I absolutely love this component! Thanks for your work!

I’m wondering, how can I style the background so that it automatically pulls the category background image and makes it the background of the banner. The backgrounds are already hidden anyways, so I want it to simply display as the background to the banner, rather than the page. I’ve tried this, but it didn’t work and I think I might be targeting the wrong variable:

return h('div.category-title-header' + " ." + category.slug, {
                    "attributes" : {
                        "style" : "background-color: #" + category.color + "; color: #" + category.text_color + "; background-image: url(\'" + 
                        category.background_url + "\');"
                    }
                }

Also, I’m wondering, how can I make the banner thinner for a fixed width design. When I attempted, it continued to be left-justified.

[jrgong]

I think it’s great that the category banners now render content in HTML.

Is there any way to display emojis there? In my case, I added three important links: Anfänger - Forum | Cannabisanbauen.net

I want to display the emojis next to each link as well. The original about topic is here: Über die Kategorie Anfänger - Anfänger - Forum | Cannabisanbauen.net

[awesomerobot (Kris)]

카테고리 이름 앞에 접두사를 붙이지 않으면 재앙을 부를 수 있으므로, 클래스 이름 앞에 category-banner-를 추가했습니다(예: category-banner-meta). CSS에서 카테고리 이름을 대상으로 하고 있었다면, 해당 이름 앞에 category-banner-를 직접 추가해야 합니다.

@jrgong

거기에 이모지를 표시할 수 있는 방법이 있을까요?

확실하지는 않는데, 기본 카테고리 설명에서도 이모지를 지원하지 않는 것 같습니다. 다만 확인해 보겠습니다…

[Hang]

카테고리에 업로드된 배경 이미지를 배너의 배경으로 사용하고 싶습니다. 코드를 수정했는데 모든 것이 잘 보입니다. 이미지가 더 빠르게 로드되도록 하거나 페이지의 나머지 부분과 함께 로드되도록 할 수 있는 방법이 있을까요? 이미지가 나타내기 전에 배경이 1초간 깜빡이는 것을 피하고 싶습니다.

이미지 압축은 확실히 하나의 옵션이지만, 다른 방법도 있는지 궁금합니다. 코드로 업로드된 배경 이미지의 썸네일을 가져올 수 있을까요? 모든 조언에 감사합니다!

[Vanecx]

안녕하세요, 이 테마 컴포넌트를 제공해 주셔서 감사합니다!

이 튜토리얼을 따라(정확히 동일한 단계를 수행했습니다) 이 카테고리 배너 컴포넌트를 설치해 보았지만, 아무 반응이 없습니다. 어떤 카테고리에도 배너가 표시되지 않습니다. 작동하지 않도록 만든 제가 한 실수가 있을까요? 제가 볼 수 있는 유일한 설명은 “bootstrap” 경고가 이를 차단하고 있다는 것입니다.

[simon]

@Vanecx

어떤 카테고리에서도 배너가 표시되지 않습니다. 배너가 작동하지 않게 만드는 제가 실수한 부분이 있을까요?

기본적으로, 카테고리에 설명을 설정하지 않은 경우 테마 구성 요소는 카테고리 배너를 표시하지 않습니다. “카테고리 설명이 설정되지 않으면 배너 숨김” 확인란의 선택을 해제하면 이를 변경할 수 있습니다.

카테고리 설명은 Discourse가 모든 카테고리에 대해 자동으로 생성하는 ‘카테고리 소개’ 토픽을 편집하여 설정합니다. 카테고리 설명을 추가했거나 설명이 없는 카테고리의 배너를 숨기는 설정을 비활성화했는데도 여전히 카테고리 배너가 표시되지 않는다면 알려주시기 바랍니다. 원인을 파악해 보겠습니다.

[Vanecx]

답변 주셔서 감사합니다. 확인해 본 결과, 포럼의 각 카테고리에 설명이 있는 것을 확인했습니다. “배너 숨기기…” 옵션이 체크되어 있지 않도록 확인했지만, 여전히 아무런 변화가 없습니다.

이미지에서 보실 수 있듯이 설정 화면은 모두 정상적으로 보입니다:

이 문제가 이 사항과 관련이 있을지 모르겠지만, 참고로 이 설치 환경은 Yunohost 인스턴스에 Discourse가 설치된 것입니다.

[downey (Michael Downey)]

나 말고도 그룹 목록 페이지(예: /g/foo)에서도 동일한 스타일링을 적용하면 좋겠다는 생각을 하는 사람이 있을까요? 아쉽게도 CSS가 완전히 동일하지 않아서, 그룹 이름 오른쪽에 있는 다양한 버튼(즉, 요청 메시지 삭제)에 대해 추가적인 처리가 필요할 것 같습니다.

이렇게 하면 일관된 디자인과 느낌을 줄 수 있고, UI에서 그룹이 더 '1급 시민(first class citizen)'처럼 느껴질 수 있을 것입니다. (개인적인 의견입니다)

[jord8on (Jordan)]

이 카테고리 배너 정말 좋아요! 이 테마 컴포넌트를 만들어 주셔서 감사합니다!

이 배너가 포럼의 메인 홈 페이지에도 존재하면 좋겠습니다. 해당 페이지에는 다음 항목들이 표시됩니다:

• “최신” 토론 또는
• “인기” 토론 또는
• “카테고리” 또는
• “팔로우”(팔로우 플러그인 를 사용하는 경우)

사용자가 각 옵션을 선택했을 때, 선택된 옵션에 따라 배너가 표시되도록 하는 비교적 쉬운 방법이 있을까요?

[Rhidian (Rhidian Bramley)]

@awesomerobot , 여기서 이것을 공유해도 괜찮을 것 같아서 이렇게 올립니다…

discourse-category-banner-boxes라는 이름의 discourse-category-banners 테마 포크를 만들었습니다.
https://github.com/naidihr/discourse-category-banner-boxes

여기서 미리 볼 수 있습니다.

https://theme-creator.discourse.org/theme/Rhidian/discourse-category-banner-boxes

거의 같은 기능을 수행하지만 몇 가지 수정 사항이 있습니다:

• 카테고리 배너 박스가 전체 너비로 상단에 표시되는 대신, 주요 제목 바로 위에 인라인으로 표시됩니다. 이를 통해 상단에 discourse-versatile-banner와 같은 배너 테마를 표시할 수 있습니다.

• 카테고리 배너 박스는 discourse의 핵심 구성 요소인 네이티브 discourse 하위 카테고리 박스와 동일한 스타일로 표시됩니다. 이러한 하위 카테고리 박스는 discourse 카테고리 설정의 Show subcategory list above topics in this category 옵션에서 표시할 수 있습니다. 이 옵션은 카테고리 목록 위를 표시하며, 카테고리 배경색을 왼쪽 테두리로 사용하여 하위 카테고리 이름과 설명을 행 또는 박스 형태로 표시합니다.

• 해당 카테고리가 하위 카테고리인 경우, 카테고리 이름은 다음과 같이 브레드크럼으로 표시됩니다 - 부모 카테고리 이름: 하위 카테고리 이름

네이티브 하위 카테고리 박스 위에 있는 카테고리 테마 배너 박스의 데모 스크린샷입니다.

부모 카테고리에 대한 브레드크럼 참조가 표시된 하위 카테고리의 스크린샷입니다.

테마 수정을 시도해 보는 것은 처음입니다. 도움이 될까요?

업데이트

이 적응판을 별도의 컴포넌트로 리팩터링했습니다. 헤더에서 카테고리 로고 이미지와 배경 이미지를 사용하는 등 많은 추가 기능이 포함되어 있습니다. 이 새로운 컴포넌트는 카테고리 배너와 달리 표준 Discourse 카테고리 헤더를 효과적으로 대체하므로, 새로운 컴포넌트입니다. 자세한 내용은 다음을 참조하세요:

Discourse 카테고리 헤더 테마 컴포넌트

This theme component provides a number of enhancements for the Discourse category header. The ‘standard’ Discourse category header is displayed at the top of each category page, above the navigation links and list of topics. It is normally only visible if a category logo image has been uploaded in the category settings. The header displays the logo and a short description of the category, taken from the first paragraph of the ‘About the.. category’ topic. This theme component provides the foll…

[nathank (Nathan Kershaw)]

@awesomerobot

예외: 특정 카테고리에 배너를 표시하지 않으려면 해당 카테고리 이름을 여기에 추가하세요

우리 쪽에서는 작동하지 않습니다. 카테고리 슬러그와 카테고리 ID를 모두 시도해 보았지만, 배너는 여전히 고집스럽게 남아 있습니다. 다른 분들도 이 기능이 정상적으로 작동하나요?

[awesomerobot (Kris)]

방금 시도해 봤는데 내 환경에서는 잘 동작합니다. 대소문자를 구분하는 카테고리 이름(name)을 찾고 있네요. 돌이켜 보면 구현 방식이 최선은 아니었네요… 아마 개선할 수 있을 것 같습니다.

[nathank (Nathan Kershaw)]

아 - 이 종류가 내게 딱 맞는군요! 그리고 위 가이드에 'name’이라고 명시되어 있긴 했네요. 제가 그냥 읽지 않았을 뿐입니다.

'Name’은 다른 용도로 거의 사용하지 않으므로 직관적이지 않습니다. 하지만 화면에 많이 표시되긴 합니다. 설정에서 좀 더 명확하게 표시하면 충분할 것 같네요.

[AntiMetaman]

업로드된 배너가 표시되지 않을 카테고리 예외를 추가하는 대신, 어떤 카테고리에 어떤 배너를 표시할지 직접 지정할 수는 없나요?

[awesomerobot (Kris)]

특정 사이트와 사용 사례에 따라 다르겠지만, 제 첫 번째 생각은 사이트가 이 기능을 모든 곳에 구현하기를 원할 가능성이 더 높고, 예외가 있더라도 그 수가 적을 것이라는 것이었습니다.

소수의 카테고리만 배너를 구현하려는 경우라면, Versatile Banner 또는 https://meta.discourse.org/t/banner-themes-and-instructions-for-customizing-them/82368에서 찾을 수 있는 옵션 중 하나를 커스터마이징하는 것이 더 좋은 테마 컴포넌트 옵션이 될 수 있습니다. 이 옵션들은 범용적인 올인원 방식보다는 덜 일반적이고 구체적인 용도로 설계되어 있습니다.

[Idan]

텍스트를 이미지로 교체할 수 있으면 좋겠습니다.

[oca]

매우 유용한 컴포넌트를 만들어 주셔서 감사합니다!

사소한 기능을 하나 추가할 수 있을까요?

• 카테고리가 공개되지 않은 경우, 카테고리 배지가 그렇게 하듯 restricted 클래스를 <span.discourse-category-banners> 또는 <div.category-title-header> 요소에 추가해 주세요.

이렇게 하면 추가 CSS를 통해 배너를 조정하여 해당 카테고리가 특별하다는 점을 사용자에게 표시하는 데 유용할 것입니다.

현재는 잠금 아이콘을 선택하여 작업을 수행하는 것이 가능하지만 복잡합니다. CSS에는 부모 선택자가 없기 때문에 잠금 아이콘의 존재 여부를 확인하여 배너를 수정해야 하는지 판단할 수 없습니다.

아직 PR(풀 리퀘스트)을 만드는 방법을 잘 모르지만, 수정이 받아들여진다면 좋은 기회로 삼아 배우고 싶습니다.

[Drew-ART (Drew)]

이것이 태그 페이지에서도 작동하도록 만들 수 있을까요? 태그 배너 플러그인을 찾았지만, 텍스트나 링크를 추가할 수 있는 기능이 없습니다.