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, Bug, UX, and 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]

Я хочу использовать загруженное фоновое изображение из категории для установки его в качестве фона баннера. Я отредактировал код, и всё выглядит отлично. Подскажите, есть ли способы ускорить загрузку изображения или загрузить его одновременно с остальной частью страницы? Я хочу избежать мерцания фона в течение секунды до появления изображения.

Сжатие изображения, безусловно, вариант, но интересно, есть ли другие решения. Можно ли в коде получить миниатюру загруженного фонового изображения? Спасибо за любые подсказки!

[Vanecx]

Здравствуйте и спасибо за этот компонент темы!

Я только что попробовал установить его, следуя этому руководству (выполнил точно такие же шаги), чтобы протестировать компонент баннеров категорий, но ничего не происходит. Ни в одной категории не отображается баннер. Возможно, я что-то сделал не так, из-за чего он не работает? Единственное объяснение, которое я вижу, — это предупреждение о «bootstrap», которое блокирует его?

[simon]

@Vanecx

Ни одного баннера ни в одной из категорий. Возможно, я что-то сделал не так, из-за чего они не отображаются?

По умолчанию компонент темы не отображает баннеры категорий, если для категории не задано описание. Это можно изменить, сняв галочку с опции «Скрывать баннеры, если описание категории не задано».

Описания категорий задаются при редактировании темы «О категории», которую Discourse автоматически создаёт для каждой категории. Если вы уже добавили описания категорий или отключили настройку скрытия баннеров для категорий без описаний, но баннеры по-прежнему не отображаются, дайте нам знать. Мы разберёмся, в чём дело.

[Vanecx]

Спасибо за ваш ответ. Я проверил и подтвердил, что у каждой категории на форуме есть описание. Опция «Скрыть баннеры…» теперь снята для проверки, но ничего не изменилось.

Как видно на изображениях, в настройках всё выглядит нормально:

Не знаю, может ли это быть связано с проблемой, но сообщаю, что это установка Discourse на экземпляре Yunohost.

[downey (Michael Downey)]

Есть ли кто-то, кроме меня, кто считает, что было бы здорово применить этот же стиль к страницам списка групп (например, /g/foo)? К сожалению, CSS немного отличается, и, похоже, потребуется дополнительная обработка различных кнопок справа от названия группы, то есть Запрос Сообщение Удалить

Это могло бы значительно улучшить единообразие внешнего вида и сделать группы более «полноценными» элементами интерфейса. (По моему мнению)

[jord8on (Jordan)]

Мне очень нравятся эти баннеры категорий! Спасибо за создание этого компонента темы!

Мне бы очень хотелось, чтобы такой баннер отображался на главной странице нашего форума, где показывается:

• «Последние» обсуждения или
• «Лучшие» обсуждения или
• «Категории» или
• «Подписки» (если вы используете плагин Follow )

Было бы несложно сделать так, чтобы баннер появлялся при выборе каждого из этих вариантов, в зависимости от того, что именно выбрано?

[Rhidian (Rhidian Bramley)]

@awesomerobot, надеюсь, вы не против, что я делюсь этим здесь…

Я создал форк темы discourse-category-banners под названием

discourse-category-banner-boxes
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, в отличие от баннеров категорий, и поэтому представляет собой новый компонент. Пожалуйста, ознакомьтесь:

Discourse Category Headers theme component

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

Ах, этот сорт — для меня! И вы действительно указываете «имя» в руководстве выше — я просто не заметил.

«Имя» не очень интуитивно понятно, так как мы не используем его ни для чего другого. Но оно отображается довольно часто. Было бы неплохо сделать его более явным в настройках, я считаю.

[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 иконку замка и выполнить какие-то действия, так как в CSS нет селектора родительского элемента, я не могу использовать наличие иконки замка для проверки, нужно ли изменять баннер.

Я пока не очень хорошо умею создавать PR, но хотел бы использовать это как хороший повод научиться, если вы готовы принять мое изменение.

[Drew-ART (Drew)]

Можно ли заставить это работать на страницах тегов? Я нашел плагин tag-banners, но у него нет возможности добавлять текст или ссылки.