# Category List with Banners

**URL:** <https://meta.discourse.org/t/category-list-with-banners/201280>\
**Category:** Theme component\
**Tags:** unmaintained\
**Created:** [August 21, 2021, 7:11pm UTC](https://meta.discourse.org/t/category-list-with-banners/201280 "2021-08-21T19:11:39Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)\
**Post date:** [August 21, 2021, 7:11pm UTC](https://meta.discourse.org/t/category-list-with-banners/201280/1 "2021-08-21T19:11:39Z")

</div>

This component adds optional banners to the default category page styles _Categories Only_ and _Categories With Featured Topics_:

 ![Screenshot from 2021-08-21 15-35-35](https://global.discourse-cdn.com/meta/original/3X/4/5/4543e940b42af9d41ae62783c0197e9543c1d5ea.png)

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:

 ![Screenshot from 2021-08-21 15-41-36](https://global.discourse-cdn.com/meta/original/3X/4/6/464cc2077487e10127f0a2ad228812d76c4fffc3.png)

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

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

```

For example you could color-code your categories:

 ![Screenshot from 2021-08-21 11-07-53](https://global.discourse-cdn.com/meta/original/3X/b/f/bf49e9a0b56789474c67cadb893af076796fab97.png)

Or add background images:

 ![Screenshot from 2021-08-21 13-44-09](https://global.discourse-cdn.com/meta/original/3X/e/2/e28a72499caf4edc8c76ccf1a91d57940076884b.jpeg)

> ⚠ 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.

> 👍 **Credits:** The component was inspired by the look of the [Cfx.re Community](https://forum.cfx.re) and by @godgutten’s original solution to achieve that look as shared in [How do I add category banners?](https://meta.discourse.org/t/how-do-i-add-category-banners/136898/10)

| | | |
| --- | --- | --- |
| 🛠 | **Repository** | [GitHub - nolosb/discourse-category-list-banners: A Discourse theme component. Adds optional banners to the default category lists. · GitHub](https://github.com/nolosb/discourse-category-list-banners) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |

---

_[View the full topic](https://meta.discourse.org/t/category-list-with-banners/201280)._