# How do I add category banners?

**URL:** https://meta.discourse.org/t/how-do-i-add-category-banners/136898
**Category:** Support
**Created:** [December 23, 2019, 3:51pm UTC](https://meta.discourse.org/t/how-do-i-add-category-banners/136898 "2019-12-23T15:51:46Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![Gronkhou](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gronkhou/32/164687_2.png) [@Gronkhou](https://meta.discourse.org/u/Gronkhou)
#### Post date: [December 23, 2019, 3:51pm UTC](https://meta.discourse.org/t/how-do-i-add-category-banners/136898/1 "2019-12-23T15:51:46Z")

</div>

How woud i achieve something like that?

> **[Gyazo](https://gyazo.com/973b2e2525e43beeb9000b67bbae803e)**
>
> Gyazo is the easiest way to record screenshots & videos you can share instantly. Save time with async visual communication that's effortless and engaging.

When i add pictures to my Category they are all shrunk and ugly.

is there a custom plugin or something?

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [December 23, 2019, 6:32pm UTC](https://meta.discourse.org/t/how-do-i-add-category-banners/136898/2 "2019-12-23T18:32:06Z")

</div>

> [@Gronkhou](#):
>
> is there a custom plugin or something?

Have a look at [Category Banners](https://meta.discourse.org/t/discourse-category-banners/86241). It is a theme component that you can install on your site to add a banner to your categories. The “Additional CSS styling” section at the bottom of the topic gives details about how to set a background image for the banner.

---

<div class="post-metadata">

### Author: ![Gronkhou](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gronkhou/32/164687_2.png) [@Gronkhou](https://meta.discourse.org/u/Gronkhou)
#### Post date: [December 25, 2019, 12:05am UTC](https://meta.discourse.org/t/how-do-i-add-category-banners/136898/3 "2019-12-25T00:05:51Z")

</div>

From the looks of it it seems like thats a banner for the category, i need one that shows the section, to explain myself better…

> **[Cfx.re Community](https://forum.cfx.re/categories)**
>
> The home of the CitizenFX modification frameworks for GTA V and Red Dead Redemption 2.

thats what i want

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [December 26, 2019, 3:41am UTC](https://meta.discourse.org/t/how-do-i-add-category-banners/136898/5 "2019-12-26T03:41:06Z")

</div>

This will require some custom work. Have a look at the [theme guide](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648) if you want to do it yourself or create a topic in the #Marketplace category if you want to hire someone to do it for you.

---

<div class="post-metadata">

### Author: ![godgutten](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/godgutten/32/132077_2.png) [@godgutten](https://meta.discourse.org/u/godgutten)
#### Post date: [May 22, 2020, 10:41am UTC](https://meta.discourse.org/t/how-do-i-add-category-banners/136898/6 "2020-05-22T10:41:47Z")

</div>

This is what they use but i can’t get it to work

[discourse-misc-html-css (2).zip](https://meta.discourse.org/uploads/short-url/nyEFxTT01syXreTir6NaY9FQKai.zip) (2.5 KB)

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [May 22, 2020, 11:21am UTC](https://meta.discourse.org/t/how-do-i-add-category-banners/136898/7 "2020-05-22T11:21:49Z")

</div>

There are many links and items to edit both in the CSS and in the Head tab , did you do it?

---

<div class="post-metadata">

### Author: ![godgutten](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/godgutten/32/132077_2.png) [@godgutten](https://meta.discourse.org/u/godgutten)
#### Post date: [July 27, 2020, 7:05pm UTC](https://meta.discourse.org/t/how-do-i-add-category-banners/136898/8 "2020-07-27T19:05:17Z")

</div>

That there is the costom css Fivem uses today and that is what i got sendt from the admin team but i have no idea how to get it to work

[discourse-misc-html-css (2).zip](https://meta.discourse.org/uploads/short-url/nyEFxTT01syXreTir6NaY9FQKai.zip) (2.5 KB)

---

<div class="post-metadata">

### Author: ![godgutten](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/godgutten/32/132077_2.png) [@godgutten](https://meta.discourse.org/u/godgutten)
#### Post date: [July 28, 2020, 1:29am UTC](https://meta.discourse.org/t/how-do-i-add-category-banners/136898/9 "2020-07-28T01:29:12Z")

</div>

So I have been working for a while now on this and I got it working ish

Pic

 ![](https://global.discourse-cdn.com/meta/original/3X/b/c/bc6baeb9ea8d1f71214984502893a94d73ee964f.jpeg)

And it is working great tbh

But at the top, it just duplicates some of the categories for some reason

 ![](https://global.discourse-cdn.com/meta/original/3X/a/7/a71b4f2634dbba379a5074a3f88f45b22c12b04a.jpeg)

How can I fix this? and make it not duplicate categories?

Here is my config  
[discourse-misc-html-css.zip](https://meta.discourse.org/uploads/short-url/gbKZxRCXWB7CJMhwwXxE8LIAqwz.zip) (2.5 KB)

---

<div class="post-metadata">

### Author: ![godgutten](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/godgutten/32/132077_2.png) [@godgutten](https://meta.discourse.org/u/godgutten)
#### Post date: [July 28, 2020, 10:33pm UTC](https://meta.discourse.org/t/how-do-i-add-category-banners/136898/10 "2020-07-28T22:33:37Z")

</div>

So now I have got it fixed for my self at least

 ![4d34f94999cfa96f6578d9b3d6d33707](https://global.discourse-cdn.com/meta/original/3X/6/f/6fd5cf341719df4cf28c71d537949b885a7ffc62.jpeg)

So first of all download this file  
[discourse-misc-html-css (2).zip](https://meta.discourse.org/uploads/short-url/nyEFxTT01syXreTir6NaY9FQKai.zip) (2.5 KB)

So if you are not sure how to add that file to your site then check this guide out first

> [@Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966):
>
> This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If you’ve already used Discourse theme / theme components, this guide is probably not something you need to read. What are themes and theme components? A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features. Let’s start with themes. Themes In general, themes are not supposed to be compatible …

* * *

So in the **Misc/HTML+CSS** Common and then in CSS You have to tweak some settings

So first you need to copy this line

```
        &.fivem > .category-list {
        &:before {
            content: 'FiveM';
        }
        
        background-image: url(https://i.imgur.com/1YZTip0.png);
    }

```

And then you have to change what you want your banner to be named and

In my example, I’m going to use test1

```
        &.test1 > .category-list {
        &:before {
            content: 'test1';
        }
        
        background-image: url(https://i.imgur.com/1YZTip0.png);
    }

```

And then you are done in the CSS section

* * *

Then go over to the section

Then go down to

```
<script type='text/x-handlebars' data-template-name='components/categories-with-featured-topics'>

```

And finde the section named  
` <div class="category-thing fivem">`

Then copy

```
<div class="category-thing fivem">
{{categories-only categories=(filter-fivem categories)
                  latestTopicOnly=latestTopicOnly
                  showTopics=true}}
</div>

```

And change it to your settings in my example I used test1

So I’m going to do the same here

```
<div class="category-thing test1">
{{categories-only categories=(filter-test1 categories)
              latestTopicOnly=latestTopicOnly
              showTopics=true}}
</div>

```

Then go down to  
` <script type='text/x-handlebars' data-template-name='mobile/components/categories-with-featured-topics'>`

And then find

```
<div class="category-thing fivem">
{{categories-only categories=(filter-fivem categories)
              latestTopicOnly=latestTopicOnly
              showTopics=true}}
</div>

```

And change it to your settings in my example I’m going to change it from fivem to test1

```
<div class="category-thing test1">
{{categories-only categories=(filter-test1 categories)
                  latestTopicOnly=latestTopicOnly
                  showTopics=true}}
</div>

```

Then go future down and find the section with this

```
registerUnbound('filter-core', (categories) => {
   return categories.filter(a => !a.slug.match(/^redm-/) && !a.name.match(/^fivem/i) && !a.read_restricted);
});

```

Here you want to add your category flag that we have created future up. Why you want to add this is so you don’t get duplicated categories like the problem I had here

> [@godgutten](#):
>
> But at the top, it just duplicates some of the categories for some reason
> 
> ![](https://global.discourse-cdn.com/meta/original/3X/a/7/a71b4f2634dbba379a5074a3f88f45b22c12b04a.jpeg)

So I’m going to add test1 for my example

```
registerUnbound('filter-core', (categories) => {
   return categories.filter(a => !a.slug.match(/^redm-/) && !a.name.match(/^test1/i) && !a.name.match(/^fivem/i) && !a.read_restricted);
});

```

Then go down and find the section named

```
registerUnbound('filter-fivem', (categories) => {
   return categories.filter(a => a.name.match(/^fivem/i));
});

```

Here you want to change out fivem to what you want again so in my example I’m going to add test1

```
registerUnbound('filter-test1', (categories) => {
   return categories.filter(a => a.name.match(/^test1/i));
});

```

And then you are done

Now what you want to do is to change your Category Slug here is my example  
 ![2bf89bcdcb2f897364bb984c82d4e343](https://global.discourse-cdn.com/meta/original/3X/5/a/5ad9e335a6d1bfd2ed434baa87083c2aa5fa0763.png)

And then that category will go under the test1 banner

And all other categories will go under the core CFX.RE banner in this example

Here is btw my settings that I’m using on my site atm  
[discourse-misc-html-css.zip](https://meta.discourse.org/uploads/short-url/7Cq0c5BbT6BNto3aTe1W90omXIl.zip) (2.5 KB)

* * *

If you want to check it out then here it is  
[https://forum.tgacommunity.com/](https://forum.tgacommunity.com/)

* * *

Alos you can mark this topic as solved?

* * *

So I hope this helped you guys and if anyone has any questions then just ask me here or on pm

---

<div class="post-metadata">

### Author: ![godgutten](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/godgutten/32/132077_2.png) [@godgutten](https://meta.discourse.org/u/godgutten)
#### Post date: [December 28, 2021, 11:43pm UTC](https://meta.discourse.org/t/how-do-i-add-category-banners/136898/11 "2021-12-28T23:43:12Z")

</div>

Hello everyone. @manuel has made a theme component that expands this code and makes it easier for people to use this on their own forum.

> [@Category List with Banners](https://meta.discourse.org/t/category-list-with-banners/201280):
>
> 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: .catego…

But both methods work and it’s up to you how you want to do it. And both methods give the same result