Category Banners

theme-component
,
1
:discourse2: Summary 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).
:eyeglasses: Preview Preview on theme-creator.discourse.org
: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

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.

This component comes with options to override the defaults:

  • Show description: disabling this will hide the description part of the banner.
  • Show mobile: disabling this will hide banners on mobile devices
  • Show subcategory: disabling this will hide banners for subcategories
  • Show category logo: enabling this will show the uploaded logo from the category’s settings
  • Align text: select left, center, or right text alignment
  • Hide if no description: disabling this will show banners even if a category description is not set
  • Exceptions: if you don’t want a category to have a banner, add its name here

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.

95 Likes