# Category Banners

**URL:** https://meta.discourse.org/t/category-banners/86241
**Category:** Theme component
**Tags:** official, category-banners
**Created:** [April 26, 2018, 6:05pm UTC](https://meta.discourse.org/t/category-banners/86241 "2018-04-26T18:05:47Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [April 26, 2018, 6:05pm UTC](https://meta.discourse.org/t/category-banners/86241/1 "2018-04-26T18:05:47Z")

</div>

| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Category Banners** uses existing category details to create banners for your category pages (for tags check out [Discourse Tag Banners](https://meta.discourse.org/t/discourse-tag-banners/124240)). |
| 👓 | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/category-banners) |
| 🛠 | **Repository Link** | [https://github.com/discourse/discourse-category-banners](https://github.com/discourse/discourse-category-banners) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Install this theme component

> [@](#):
>
> :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started. 👍
> 
> [❓&nbsp; **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=category-banners "Ask for support on configuring and using Category Banners") [🐛&nbsp; **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=category-banners "A bug report means something is broken, preventing normal/typical use of the theme component") [👀&nbsp; **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=category-banners "Discussion about the user interface of Category Banners, and how features are presented (including language and UI elements)") [💡&nbsp; **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=category-banners "Discussion about how existing Category Banners features can be improved or enhanced, and how proposed new features could work")

### 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](https://meta.discourse.org/t/discourse-tag-banners/124240)).

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](https://global.discourse-cdn.com/meta/original/3X/1/d/1d75ec58312e4a0b4d8b20b3272fca47f2b7247d.png)

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 or emoji from the category settings \* |
| override category icon color | When the category icons are used, enabling this will make the icon match the banner text color |

> \* Note that this setting now refers to the [category icon or emoji set in the category settings](https://meta.discourse.org/t/bringing-popular-features-to-discourse-header-search-welcome-banner-and-category-icons-emoji/359169#p-1741866-category-icons-and-emoji-7), not the [Category Icons](https://meta.discourse.org/t/category-icons/104683) theme component (which is deprecated in favor of the core feature).

### 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):

```plaintext
.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 @lindsey 2025-04-29T13:54:43Z
> 
> > **Check document**
> >
> > Perform check on document:

---

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