# 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:** 20
**Page:** 1
### Author:  [@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")
| | | |
| --- | --- | --- |
| :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. š
>
> [ā **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=category-banners "Ask for support on configuring and using Category Banners") [š **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") [š **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)") [š” **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.
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:
---
### Author:  [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [June 15, 2018, 12:54pm UTC](https://meta.discourse.org/t/category-banners/86241/23 "2018-06-15T12:54:07Z")
thanks for this wonderful theme ā¤, it helps users to note the category description much easier.
currently if thereās a link or a bold/italic word in the category description, in the banner itāll appear as simple text (e.x. `p` style instead of `a` style). isnāt it better if the text style is preserved in the banner as well?
---
### Author:  [@jimmymckinney](https://meta.discourse.org/u/jimmymckinney)
#### Post date: [March 9, 2019, 12:21am UTC](https://meta.discourse.org/t/category-banners/86241/48 "2019-03-09T00:21:32Z")
Hi, I absolutely love this component! Thanks for your work!
Iām wondering, how can I style the background so that it automatically pulls the category background image and makes it the background of the banner. The backgrounds are already hidden anyways, so I want it to simply display as the background to the banner, rather than the page. Iāve tried this, but it didnāt work and I think I might be targeting the wrong variable:
```
return h('div.category-title-header' + " ." + category.slug, {
"attributes" : {
"style" : "background-color: #" + category.color + "; color: #" + category.text_color + "; background-image: url(\'" +
category.background_url + "\');"
}
}
```
Also, Iām wondering, how can I make the banner thinner for a fixed width design. When I attempted, it continued to be left-justified.
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [June 23, 2019, 10:21am UTC](https://meta.discourse.org/t/category-banners/86241/68 "2019-06-23T10:21:31Z")
I think itās great that the category banners now render content in HTML.
Is there any way to display emojis there? In my case, I added three important links: [AnfƤnger - Forum | Cannabisanbauen.net](https://forum.cannabisanbauen.net/c/anfaenger)
I want to display the emojis next to each link as well. The original about topic is here: [Ćber die Kategorie AnfƤnger - AnfƤnger - Forum | Cannabisanbauen.net](https://forum.cannabisanbauen.net/t/ueber-die-kategorie-anfaenger/474)
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [November 1, 2019, 8:48pm UTC](https://meta.discourse.org/t/category-banners/86241/87 "2019-11-01T20:48:42Z")
Not prefixing the category name is a recipe for disaster, so Iāve added `category-banner-` before the class name (e.g., `category-banner-meta`). If you were targeting the category name in your CSS youāll just have to add `category-banner-` before it.
> [@jrgong](#):
>
> Is there any way to display emojiās there?
Iām not sure, I donāt think our default category descriptions support them either, but I can look into itā¦
---
### Author:  [@Hang](https://meta.discourse.org/u/Hang)
#### Post date: [November 7, 2019, 1:01am UTC](https://meta.discourse.org/t/category-banners/86241/88 "2019-11-07T01:01:27Z")
I want to use the uploaded background image from the category to put it in the background of the banner. Iāve edited the code and everything looks great. I wonder is there anything I can do to make the image load faster or together with the rest of the page? I want to avoid the flickering of the background for a second before the image appears.
Compressing image is certainly an option, but I wonder if there are others. Can I grab the thumbnail of the uploaded background image in the code? Thanks for all leads!
---
### Author:  [@Vanecx](https://meta.discourse.org/u/Vanecx)
#### Post date: [January 9, 2020, 10:10pm UTC](https://meta.discourse.org/t/category-banners/86241/94 "2020-01-09T22:10:56Z")
Hello, and thank you for this theme component!
I just tried installing it, following [this tutorial](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966/16) (did exactly the same steps) to try this Category Banners component, but nothing happens. No banner in any of the categories. Is there anything that I might have done that doesnāt make it work? The only explanation I see is that the ābootstrapā warning blocks it?
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [January 9, 2020, 11:29pm UTC](https://meta.discourse.org/t/category-banners/86241/95 "2020-01-09T23:29:12Z")
> [@Vanecx](#):
>
> No banner in any of the categories. Is there anything that I might have done that doesnāt make it work?
By default, the theme component does not display category banners if you have not set a category description for a category. This can be changed by unchecking the āHide banners if category description not setā checkbox.
Category descriptions are set by editing the About category topic that Discourse automatically creates for every category. If you have either added category descriptions, or disabled the setting to hide banners for categories without descriptions, and you are still not seeing category banners, let us know. Weāll look into what is going on.
---
### Author:  [@Vanecx](https://meta.discourse.org/u/Vanecx)
#### Post date: [January 10, 2020, 2:34pm UTC](https://meta.discourse.org/t/category-banners/86241/96 "2020-01-10T14:34:30Z")
Thank you for your answer. I have checked and confirm that each category [on the forum](https://liege.pirateparty.be/forum/) has a description. The āHide bannersā¦ā option is now unchecked just to make sure but nothing changes.
As you can see on the images, everything looks normal in the settings :
No idea if it could have anything to do with the issue but just informing you itās a Discourse installation on a Yunohost instance.
---
### Author:  [@downey](https://meta.discourse.org/u/downey)
#### Post date: [February 5, 2020, 10:21pm UTC](https://meta.discourse.org/t/category-banners/86241/97 "2020-02-05T22:21:22Z")
Is there anyone other than me that thinks it would be nice to enable this same styling on Group listing pages (e.g. `/g/foo`) as well? The CSS, unfortunately, is not quite the same, and I guess it would require some additional handling of the various buttons to the right side of the group name, i.e., š¤ Requestš§ Message :garbage: Delete
It could go a long way for a consistent look and feel, and make groups feel more like a āfirst classā citizen among the UI. (IMHO)
---
### Author:  [@jord8on](https://meta.discourse.org/u/jord8on)
#### Post date: [March 29, 2020, 7:30am UTC](https://meta.discourse.org/t/category-banners/86241/99 "2020-03-29T07:30:38Z")
I love these category banners! Thank you for making this theme component!
I would love this banner to exist in the main home page of our forums where it shows:
- āLatestā Discussions or
- āTopā Discussions or
- āCategoriesā or
- āFollowingā (if youāre using the [Follow Plugin šØ](https://meta.discourse.org/t/follow-plugin/110579))
Would there be an easy (ish) way to have there be a banner if someone selected each of these options, respective to what was selected?
---
### Author:  [@Rhidian](https://meta.discourse.org/u/Rhidian)
#### Post date: [April 11, 2020, 12:23pm UTC](https://meta.discourse.org/t/category-banners/86241/100 "2020-04-11T12:23:18Z")
@awesomerobot , I hope you are okay with me sharing this hereā¦
Iāve created a fork of this discourse-category-banners theme called
**discourse-category-banner-boxes**
[https://github.com/naidihr/discourse-category-banner-boxes](https://github.com/naidihr/discourse-category-banner-boxes)
You can preview it here
[https://theme-creator.discourse.org/theme/Rhidian/discourse-category-banner-boxes](https://theme-creator.discourse.org/theme/Rhidian/discourse-category-banner-boxes)
It pretty much does the same thing but with some modifications:
- The category banner box is displayed in-line above the main heading instead of full width at the top. This allows for display a banner theme at the top, for example the discourse-versatile-banner.
- The category banner box is displayed in the same style as the native discourse subcategory boxes, which are a core component of discourse. These subcategory boxes are a display option in the discourse category settings _Show subcategory list above topics in this category_ . This option displays the subcategory category name and description as a row or box above the topic list, using the category background colour as the left border.
- If the category is a subcategory, the category name is displayed as breadcrumb as follows - **Parent category name: Subcategory name**
Demo screen shot of theme banner box for the category, above the native subcategory boxes.
Screen shot of the subcategory, showing the breadcrumb reference to the parent category.
This is my first attempt at a theme modification. I hope this is helpful?
## Update
I have refactored this adaption as a separate component - with many additional features including using the category logo image and background image in the header. This new component effectively replaces the standard Discourse category header, unlike the category banners, hence making it a new component. Please see:
> [@Discourse Category Headers theme component](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682):
>
> This theme component provides a number of enhancements for the Discourse category header. The āstandardā Discourse category header is displayed at the top of each category page, above the navigation links and list of topics. It is normally only visible if a category logo image has been uploaded in the category settings. The header displays the logo and a short description of the category, taken from the first paragraph of the āAbout the.. categoryā topic. This theme component provides the follā¦
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [June 23, 2020, 11:16pm UTC](https://meta.discourse.org/t/category-banners/86241/110 "2020-06-23T23:16:46Z")
> [@awesomerobot](#):
>
> **Exceptions** : if you donāt want a category to have a banner, add its name here
This isnāt working for us. Iāve tried both the category slug and the category ID, but the banner stays stubbornly there. Is this working for anyone else?
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [June 23, 2020, 11:46pm UTC](https://meta.discourse.org/t/category-banners/86241/111 "2020-06-23T23:46:49Z")
I just tried it and it works for me, itās looking for the case-sensitive category _name_. In retrospect that was not the best way to implement itā¦ I can probably improve that.
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [June 24, 2020, 12:07am UTC](https://meta.discourse.org/t/category-banners/86241/112 "2020-06-24T00:07:00Z")
Ah - that sort is for me! And you do state ānameā in the guide above - I just didnāt read that.
Name isnāt very intuitive as we donāt really use it for anything else. But it is displayed a lot. Just making it more explicit in the settings would be fine I reckon.
---
### Author:  [@AntiMetaman](https://meta.discourse.org/u/AntiMetaman)
#### Post date: [July 18, 2020, 12:34am UTC](https://meta.discourse.org/t/category-banners/86241/113 "2020-07-18T00:34:37Z")
Instead of adding exceptions of what which categories will not show a given uploaded banner, canāt we just specify which category should show which banner?
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [July 23, 2020, 9:24pm UTC](https://meta.discourse.org/t/category-banners/86241/114 "2020-07-23T21:24:01Z")
Depends on the specific site and use-case Iām sure. My initial thought was that it would be more likely for a site to want it implemented everywhere, and if there were exceptions it would only be a few.
If you wanted to implement a banner for a small number of categories there might be a better theme component option thatās built to be a less generic cover-all, like [Versatile Banner](https://meta.discourse.org/t/versatile-banner/109133) or customizing one of the options found in [https://meta.discourse.org/t/banner-themes-and-instructions-for-customizing-them/82368](https://meta.discourse.org/t/banner-themes-and-instructions-for-customizing-them/82368)
---
### Author:  [@Idan](https://meta.discourse.org/u/Idan)
#### Post date: [February 2, 2021, 10:43am UTC](https://meta.discourse.org/t/category-banners/86241/131 "2021-02-02T10:43:58Z")
would be great to be able to upload an image to replace the text.
---
### Author:  [@oca](https://meta.discourse.org/u/oca)
#### Post date: [February 17, 2021, 8:58am UTC](https://meta.discourse.org/t/category-banners/86241/134 "2021-02-17T08:58:46Z")
Thanks for that very usefull component!
Would it be possible to add a minor feature?
- Add the `restricted` class to the `` or `` element when the category is not public, the same way the category badge has.
It would be useful for tweaking the banner with an additional CSS to show the user that this category is special.
Right now, it is doable but complicated to select with CSS the lock icon and do some stuff, but since CSS doesnāt have parent selector, I can not use the presence of the lock icon to check if the banner should be modified.
I donāt really know how to do PRs yet, but would use this as a good reason to learn if youād be up for my modification.
---
### Author:  [@Drew-ART](https://meta.discourse.org/u/Drew-ART)
#### Post date: [April 20, 2021, 11:24am UTC](https://meta.discourse.org/t/category-banners/86241/135 "2021-04-20T11:24:33Z")
Can this be made to work on tag-pages? I found the tag-banners plugin but it doesnāt have the ability to add text or links to it.
[Next page](https://meta.discourse.org/t/category-banners/86241.md?page=2)