How do I add category banners?

Support
10

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

4d34f94999cfa96f6578d9b3d6d33707
4d34f94999cfa96f6578d9b3d6d337072284×1940 911 KB

So first of all download this file
discourse-misc-html-css (2).zip (2.5 KB)

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

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

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

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 (2.5 KB)

If you want to check it out then here it is
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

4 Likes