배너가 포함된 카테고리 목록

[manuel (Manuel Kostka)]

이 컴포넌트는 기본 카테고리 페이지 스타일인 Categories Only 및 Categories With Featured Topics에 선택적인 배너를 추가합니다:

컴포넌트 설정에서 배너 바로 아래에 카테고리를 지정하고, 배너 색상 및 제목 텍스트를 정의하여 배너를 추가할 수 있습니다. 기본 색상 테두리를 숨기는 옵션도 있습니다:

스타일을 추가하려면 일반 클래스를 선택하거나, 카테고리 ID별로 특정 배너를 선택할 수 있습니다:

.category list .category-list-banner {
  &.category-5 { [style a specific banner] }
  &:after { [style the headings]}
}

예를 들어 카테고리를 색상 코드로 구분할 수 있습니다:

또는 배경 이미지를 추가할 수 있습니다:

이 컴포넌트는 카테고리 페이지에 레이아웃 요소만 추가합니다. 따라서 사이트의 다른 곳에서 이러한 제목을 참조할 수 없습니다. 주의할 점: 모바일에는 Categories Only라는 기본 페이지 스타일이 없습니다. 항상 추천 주제(Featured Topics)도 함께 표시됩니다.

크레딧: 이 컴포넌트는 Cfx.re Community의 디자인과 @godgutten이 How do I add category banners?에서 공유한 해당 룩을 구현하기 위한 원래 솔루션에서 영감을 받았습니다.

	저장소	GitHub - nolosb/discourse-category-list-banners: A Discourse theme component. Adds optional banners to the default category lists. · GitHub
	설치 가이드	테마 또는 테마 컴포넌트 설치 방법

[tot (Борис Мальцев)]

Thank Nolo Very cool! Your component has improved our community

[tot (Борис Мальцев)]

Nolo, I found another problem with switching the forum style to night mode. If you can fix it, it will be perfect!

[manuel (Manuel Kostka)]

That looks like expected behavior.. The color slot takes any value that you can use as background-color in CSS. So when you give a hex value, it will stay the same color in different modes and themes.

If you actually don’t want a background color, you should state none or transparent.

If you want a background color that changes with modes, you’d need to state it with a CSS custom property: you could use one of Discourse’s pre-defined ones like var(--secondary-high). Or define some yourself, as explained in

Update themes and plugins to support automatic dark mode

Previously, all colors in Discourse were stored as SCSS variables. To support automatic dark mode color scheme switching, we have converted these colors in core to custom CSS properties. You can easily see the full list in the inspector now: [image] Themes and plugins need to switch all the $color SCSS variables used in stylesheets to the --color CSS property equivalents. In most cases, this is a simple find and replace task: - background-color: $primary-very-low; + background-color: var…

[tot (Борис Мальцев)]

Nolo, thanks, that helped!

[godgutten]

Hello I love to see what you have managed to create. But it is allowed to give credit to me also and not only ripp me off and use some of my work…..

[manuel (Manuel Kostka)]

Happy you l ike the component! Not sure why you accuse me for ripping you off by using your work though..?

Doing this component was inspired by this topic:

Creating a nicer layout

Hello all, I’m new here, and wasn’t sure where to post this since this questions about CSS/HTML were outside the scope on the support category. Anyway I digress. I came across Discourse through another platform I frequently use, and moved my Forum over to Discourse. The layout that is used on the platform looks really nice and I’m trying to do something similar. Anyone an idea how to do this kind of thing? [Screenshot] just a basic HTML/CSS edit or do I need to use a plugin?

I had referred the op to your solution, but then got interested how to solve this without hard-coding the templates and by de-constructing values from a settings list within scss. So the component code is essentially all about this solution:
https://meta.discourse.org/t/how-to-add-settings-to-your-discourse-theme/82557/52?u=nolo

But in any case: if you feel I used some of your work and I missed to give credits, kindly let me know and I’ll update the first post

[godgutten]

@manuel

But in any case: if you feel I used some of your work and I missed to give credits, kindly let me know and I’ll update the first post

Yes please would love to get at least some kind of creds. But it’s up to you tho. Other than that it looks good and I’m going to recommend this theme component in my post since this makes it easier for new users.

How do I add category banners?

So now I have got it fixed for my self at least [4d34f94999cfa96f6578d9b3d6d33707] So first of all download this file discourse-misc-html-css (2).zip (2.5 KB) So if you are not sure how to add that file to your site then check this guide out first So in the Misc/HTML+CSS Common and then in CSS You have to tweak some settings So first you need to copy this line &.fivem > .category-list { &:before { content: 'FiveM'; } background-image…

[Cozdabuch (cosmo)]

@ Nolo
Is there a way in the TC, or with CSS in the theme to left align the Heading text, just like your second example).

also is there a way (if not using a banner image) to resize the header to just the thickness of a line of text.
And if so, can you resize the text so it’s not quite as large?

[manuel (Manuel Kostka)]

Yeah sure, you can style the banners using these classes:

@manuel

To add styles you can select the general class, as well as specific banners by category-id:

.category list .category-list-banner {
  &.category-5 { [style a specific banner] }
  &:after { [style the headings]}
}

If you want to overwrite existing declarations on the general class you’d need to use the !important property. E.g. for the styles you mentioned:

.category-list .category-list-banner {
    justify-content: flex-start !important;
    min-height: unset !important;
    &:after {
        font-size: var(--font-up-3) !important;
    }
}

That’s because the styles are actually declared on the specific banners. Guess I could improve that on the component, but for now you’d need to overwrite with important.

[lisandro_iaffar]

Thank you so much for this component!! I’m developing a political forum, and being able to apply this kind of separation is critical.
While it’s already a huge improvement for my forum, It would be a world of a difference if the headers could be referenced by URL, because that would allow to create buttons at the top of the forum from which the user could be able to easily navigate in the same page. That would be extremely agile functionality if the forum (hopefully) gets a lot larger. Is it currently possible?

[manuel (Manuel Kostka)]

Thanks for the suggestion @lisandro_iaffar. Though this component is really just providing a lightweight solution that doesn’t change html templates. If you want to reference the sections you’d need to use an approach as offered by GitHub - discourse/discourse-minimal-category-boxes · GitHub.

[lisandro_iaffar]

Thank you for your answer and for providing guidance
And thank you again for this component, it just improved my forum layout so much

[cogdog (Alan Levine)]

I’m excited to try this as I have created a bit too many categories and being able o organize them in groups will be a big help.

I will know when I try, this too then could be a way to leave old, lesser used categories off the front page, right? They would still be available via the new sidebar.

[manuel (Manuel Kostka)]

Yes, sure Actually I almost always make selections of categories on different page elements (sidebar, header, navbar, category page,..) It’s like the site structure of a website. It’s important that it’s well organized, but it doesn’t need to determine your ui presentation.

[Tiago_santos]

Hello @manuel I would like to know if this wonderful component still works after the speech updates, I installed it and it doesn’t work for me, thanks advanced

[duncanell]

how do you add background images ?

[Arkshine]

Hi, welcome

You can add CSS in your themes or a separate theme component:

@manuel

To add styles you can select the general class, as well as specific banners by category-id:

.category list .category-list-banner {
  &.category-5 { [style a specific banner] }
  &:after { [style the headings]}
}

For example, assuming you want to add an image to the category ID 4, you would do something like that:

.category-list .category-list-banner {
    &.category-4 {
        background-image: url(https://images.unsplash.com/32/Mc8kW4x9Q3aRR3RkP5Im_IMG_4417.jpg);
        background-size: cover;
    }
}

This is just an example. For more information, you can look at the background CSS properties.

Also helpful links :

Making custom CSS changes on your site

This guide explains how to make CSS changes on your Discourse site, including an introduction to CSS, where to add CSS in Discourse, and how to find the right selectors using browser inspection tools. Required user level: Administrator Summary This guide covers: A brief introduction to CSS and key concepts How to add CSS to your Discourse site using theme components Using browser inspection tools to find the right CSS selectors Understanding CSS basics C…

Beginner's guide to using Discourse Themes

This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If you’ve already used Discourse theme / theme components, this guide is probably not something you need to read. What are themes and theme components? A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features. Let’s start with themes. Themes In general, themes are not supposed to be compatible …

[Orioni (John)]

Category List Banner 컴포넌트에서 현재 다음과 같은 경고가 표시됩니다.

[관리자 알림] 테마 'Category List Banners’에는 업데이트가 필요한 코드가 포함되어 있습니다. (id:discourse.hbs-extension) (자세히 보기)

이것은 2026년 3월에 발표된 공지 사항과 관련이 있습니다.

테마 및 플러그인에서 .hbs 파일 확장명 비추천

Any remaining uses of .hbs files will now trigger a warning banner for admins. Depending on real-world-telemetry, we plan to remove support during the 2026.8.0-latest cycle. 2026.7 ESR will be the last release with hbs support.