Category Banners

Theme component
,
1
: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.

54%20PM
54%20PM2590Ă—1366 414 KB

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 from the Discourse Category Icons component
override category icon color When the category icons are used, enabling this will make the icon match the banner text color

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 @JammyDodger 2024-06-11T08:02:11Z

Check documentPerform check on document:
98 Likes