# 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:** 4
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [September 1, 2024, 9:10am UTC](https://meta.discourse.org/t/category-banners/86241/235 "2024-09-01T09:10:57Z")
> [@thaidb](#):
>
> 
>
> I use plugin [Who Online](https://meta.discourse.org/t/discourse-whos-online-plugin/52345) and Two display components are stuck together, how to keep them a reasonable distance apart
Can fix with some CSS
Create a new #Customization > Theme component add this to common css
```plaintext
// Who's Online Customization
.discovery-list-container-top-outlet.online_users_widget {
margin-top: 0.75em;
margin-bottom: 0.75em;
padding-top: 0.5em
padding-bottom: 0.5em;
}
```
You can also add custom background color, borders etc..
---
### Author:  [@thaidb](https://meta.discourse.org/u/thaidb)
#### Post date: [September 1, 2024, 12:34pm UTC](https://meta.discourse.org/t/category-banners/86241/236 "2024-09-01T12:34:05Z")
Thank you so much!
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [September 2, 2024, 11:09pm UTC](https://meta.discourse.org/t/category-banners/86241/237 "2024-09-02T23:09:47Z")
Optionally if you want to highlight this like so
Use this code instead
```plaintext
// Who's Online Customization
.discovery-list-container-top-outlet.online_users_widget {
padding-top: 0.45em;
padding-bottom: 0.05em;
background-color: var(--secondary);
border: 2.0px solid rgba(var(--primary-rgb), 0.2);
border-radius: 0.65em;
margin-top: 0.75em
margin-bottom: 0.75em;
}
```
- Margin adjusts space above & below “who’s online”
- padding increases space with in the border box. Border adjusts the thickness of the border outline.
---
### Author:  [@ludwikc](https://meta.discourse.org/u/ludwikc)
#### Post date: [October 6, 2024, 4:11pm UTC](https://meta.discourse.org/t/category-banners/86241/238 "2024-10-06T16:11:45Z")
Slightly off-topic, but what pair of fonts is this @bekircem ? I love how they work together!
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [October 20, 2024, 8:01pm UTC](https://meta.discourse.org/t/category-banners/86241/239 "2024-10-20T20:01:37Z")
I have a small feature request that I feel would make a big improvement to this component. I would love to have a “Read more…” link which is linked to the category description. A very elegant solution to have a lengthy description without cluttering up the category’s page. I can add this link manually, but then it shows on the Categories page which isn’t very clean.
---
### Author:  [@haydenjames](https://meta.discourse.org/u/haydenjames)
#### Post date: [March 10, 2025, 10:00pm UTC](https://meta.discourse.org/t/category-banners/86241/240 "2025-03-10T22:00:41Z")
> [@Heliosurge](#):
>
> ```plaintext
> // Who's Online Customization
> .discovery-list-container-top-outlet.online_users_widget {
> margin-top: 0.75em;
> margin-bottom: 0.75em;
> padding-top: 0.5em
> padding-bottom: 0.5em;
> }
>
> ```
This code is missing an `;` on line 5 and also the follow-up example.
What worked for me is this:
```plaintext
.discovery-list-container-top-outlet.online_users_widget {
margin-top: 0.75em !important;
margin-bottom: 0.75em !important;
display: block !important;
}
```
Result:
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [March 11, 2025, 1:27am UTC](https://meta.discourse.org/t/category-banners/86241/241 "2025-03-11T01:27:41Z")
Awesome. Unfortunately my post is too old for me to correct the code. Thanks for letting me know I missed “;”
---
### Author:  [@pHneutre](https://meta.discourse.org/u/pHneutre)
#### Post date: [March 20, 2025, 3:21pm UTC](https://meta.discourse.org/t/category-banners/86241/242 "2025-03-20T15:21:58Z")
There is the same problem for the tags and category links. Could you please include the `.hashtag-cooked` class in this fix?
---
### Author:  [@alltiagocom](https://meta.discourse.org/u/alltiagocom)
#### Post date: [March 23, 2025, 2:17am UTC](https://meta.discourse.org/t/category-banners/86241/244 "2025-03-23T02:17:21Z")
For some reason, this is not working properly for me.
Some categories and sub categories show the banner, some don’t.
It’s not the description (or lack thereof), because some have description and it’s not showing.
I don’t know if the new Discourse update broke something?
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [March 23, 2025, 2:35am UTC](https://meta.discourse.org/t/category-banners/86241/245 "2025-03-23T02:35:49Z")
> [@alltiagocom](#):
>
> Some categories and sub categories show the banner, some don’t.
Have you defined categories ID in `categories` setting?
---
### Author:  [@alltiagocom](https://meta.discourse.org/u/alltiagocom)
#### Post date: [March 23, 2025, 2:42am UTC](https://meta.discourse.org/t/category-banners/86241/246 "2025-03-23T02:42:39Z")
Yes I added them to the Objects Setting Editor.
I think there’s some kind of bug related to the option to hide it when there’s no description.
I will perform a few more tests and see how it goes.
---
### Author:  [@alltiagocom](https://meta.discourse.org/u/alltiagocom)
#### Post date: [March 23, 2025, 12:32pm UTC](https://meta.discourse.org/t/category-banners/86241/247 "2025-03-23T12:32:01Z")
I just noticed a bug.
I’m in the parent category `Tiago | Music` and I click the `Sir Giant` sub category. It shows the banner. Then I click one of the sidebar “documentation” links to go to a tags page `Announcements`. When I click the `General Discussion` link that takes me back to the root of the sub category `Sir Giant`, the banner is now gone.
The first time I went to `Announcements`, no banner. When I go to the tags page `Music` and then back to `Announcements`, the banner is now visible.
I also just noticed something: if I’m in the `Announcements` page and I see no banner, if I click the same link again (`Announcements`) the banner shows up, which is clearly a bug.
---
### Author:  [@alltiagocom](https://meta.discourse.org/u/alltiagocom)
#### Post date: [March 23, 2025, 5:10pm UTC](https://meta.discourse.org/t/category-banners/86241/248 "2025-03-23T17:10:14Z")
2 more issues:
1 - I’m on a category with a description. I can see the description in the banner. That description has an external link to my online store. When I click it, even though I have the setting to open all external links in a new tab, that link opens in the same tab. And I can confirm that the setting is working, because the topic itself that defines the banner’s description, opens the link in a new tab.
2 - Now when I’m on that external link’s website (which opened in the same tab), I have to hit `Back` in the browser, to go back to the sub category. This time, the description is completely gone. The banner and its title are there, but no description. Even if I refresh and force refresh the browser, it doesn’t come back. The only way to see it again is to go back to the main category and then to the sub category again.
* * *
EDIT: Ok I figured something out. I don’t know what’s happening behind the scenes, of course, but the red option is causing the issue. The green option works as expected (always on screen, regardless of where I click, no need to double click a sidebar menu to make the banner come back):
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [March 23, 2025, 10:34pm UTC](https://meta.discourse.org/t/category-banners/86241/249 "2025-03-23T22:34:24Z")
I can reproduce your issue, but I can’t explain it. 😅
Technically (ignore me), this is what I observe with this outlet `header-list-container-bottom`:
- If you select a subcategory → a tag, the component is _inserted_, and immediately right after `teardownComponent` is called (?). But the component is not _destroyed_. With the `category-header` class removed from `` from the cleanup function, some CSS hides the banner. You can select another tag to re-insert the component.
It’s confusing why after being inserted, `will-destroy` is called right away.
---
### Author:  [@alltiagocom](https://meta.discourse.org/u/alltiagocom)
#### Post date: [March 24, 2025, 7:53am UTC](https://meta.discourse.org/t/category-banners/86241/250 "2025-03-24T07:53:55Z")
> [@Arkshine](#):
>
> I can reproduce your issue
Well, at least I know it’s not just me… that’s good.
> [@Arkshine](#):
>
> (ignore me)
Even if I didn’t want to, I have no idea what you are talking about in your explanation haha But it’s good that you know that something that should be working a certain way, isn’t. That’s probably a step in the right direction to fix it.
So the issue seems to be with the location of the banner, because as I said, one of the options (at least, because I actually didn’t try the other two), works.
---
### Author:  [@bdfl](https://meta.discourse.org/u/bdfl)
#### Post date: [May 20, 2025, 10:49pm UTC](https://meta.discourse.org/t/category-banners/86241/251 "2025-05-20T22:49:41Z")
When I select ‘Show category logo’, the logo appears twice - once from the category setting and once from this theme component. Am I making a mistake?
Also, is it possible to make the ‘about’ title and/or description appear below the logo?
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [May 21, 2025, 6:10am UTC](https://meta.discourse.org/t/category-banners/86241/252 "2025-05-21T06:10:39Z")
> [@bdfl](#):
>
> the logo appears twice - once from the category setting and once from this theme component. Am I making a mistake?
No, it’s a known bug. There is also css you can add to hide one logo in that topic
> [@Default category heading not hidden when category banner is used](https://meta.discourse.org/t/default-category-heading-not-hidden-when-category-banner-is-used/327519):
>
> Great theme component for categories! I’m running into an issue when I add a category logo that the category description displays in the default position on the category page as per the screenshot below. Is there a way to turn off the default placeholder of the category description from displaying when the “discourse-category-banners” is enabled? I would like the category description to display in the banner just as it is now. If I turn off the category logo then it displays correctly, seems…
---
### Author:  [@bdfl](https://meta.discourse.org/u/bdfl)
#### Post date: [May 21, 2025, 4:37pm UTC](https://meta.discourse.org/t/category-banners/86241/253 "2025-05-21T16:37:27Z")
Thanks, Moin! The CSS fixed the image for me.
---
### Author:  [@bdfl](https://meta.discourse.org/u/bdfl)
#### Post date: [May 21, 2025, 9:12pm UTC](https://meta.discourse.org/t/category-banners/86241/254 "2025-05-21T21:12:38Z")
To put the category name below the image, this worked for me:
```plaintext
.category-title-contents,
.category-title-header.category-banner-1slug .category-title-contents {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;}
.category-logo,
.category-title-header.category-banner-1slug .category-logo {
width: 100%;
margin-bottom: 10px;
margin-right: 0;}
.category-title,
.category-title-header.category-banner-1slug .category-title {
width: 100%;
margin-top: 20px;
text-align: left;}
```
---
### Author:  [@Helga\_Razinkova](https://meta.discourse.org/u/Helga_Razinkova)
#### Post date: [May 23, 2025, 12:41pm UTC](https://meta.discourse.org/t/category-banners/86241/255 "2025-05-23T12:41:31Z")
Hi there! Maybe someone can help me fix quite a weird issue that came up all of a sudden.
All titles in the banners used to be white, but now they changes into black and only in some categories… Is it a known bug, or should I maybe check something on my end?
For ex:
The link to our community, just in case: [https://community.elfsight.com/](https://community.elfsight.com/)
[Previous page](https://meta.discourse.org/t/category-banners/86241.md?page=3)
[Next page](https://meta.discourse.org/t/category-banners/86241.md?page=5)