Category Banners

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

Install this theme component

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.


:discourse2: 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 documentPerform check on document:
101 Likes