How do I add category banners?

Support
1

How woud i achieve something like that?

https://gyazo.com/973b2e2525e43beeb9000b67bbae803e

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

is there a custom plugin or something?

2 Likes
2

Have a look at Category Banners. 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.

3 Likes
3

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…

https://forum.fivem.net/categories

thats what i want

5

This will require some custom work. Have a look at the theme guide 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.

2 Likes
6

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

discourse-misc-html-css (2).zip (2.5 KB)

7

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

1 Like
8

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

9

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

Pic

1586Ă—1904 808 KB

And it is working great tbh

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

1567Ă—1821 748 KB

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

Here is my config
discourse-misc-html-css.zip (2.5 KB)

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
11

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

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

1 Like