Category List with Banners

This component adds optional banners to the default category page styles Categories Only and Categories With Featured Topics:


You can add banners in the component settings by defining the category right below the banner, a banner color and the heading text. There’s also an option to hide the default colored borders:


To add styles you can select the general class, as well as specific banners by category-id:

.category list .category-list-banner {
  &.category-5 { [style a specific banner] }
  &:after { [style the headings]}

For example you could color-code your categories:


Or add background images:


:warning: Caution: This component only adds layout elements to the category page. So you can’t refer to these headings anywhere else on your site. Another caution: There’s no default page style Categories Only on mobile. It will always show featured topics as well.

:cd: Repository: GitHub - nolosb/discourse-category-list-banners: A Discourse theme component. Adds optional banners to the default category lists.

:parrot: Discussion: Category List with Banners - theme-component - Discourse Meta