 |
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
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 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.
Last edited by @JammyDodger 2024-06-11T08:02:11Z
Check document
Perform check on document: