Category List with Banners

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:

Screenshot from 2021-08-21 15-41-36

To add styles you can select the general class, as well as specific banners by category-id:

.category list .category-list-banner {
  &.category-5 { [style a specific banner] }
  &:after { [style the headings]}
}

For example you could color-code your categories:

Or add background images:

:warning: This component only adds layout elements to the category page. So you can’t refer to these headings anywhere else on your site. Another caution: There’s no default page style Categories Only on mobile. It will always show featured topics as well.

:+1: Credits: The component was inspired by the look of the Cfx.re Community and by @godgutten’s original solution to achieve that look as shared in How do I add category banners?

27 Likes

Thank Nolo Very cool! Your component has improved our community

1 Like

Nolo, I found another problem with switching the forum style to night mode. If you can fix it, it will be perfect!

That looks like expected behavior… The color slot takes any value that you can use as background-color in CSS. So when you give a hex value, it will stay the same color in different modes and themes.

If you actually don’t want a background color, you should state none or transparent.

If you want a background color that changes with modes, you’d need to state it with a CSS custom property: you could use one of Discourse’s pre-defined ones like var(--secondary-high). Or define some yourself, as explained in

3 Likes

Nolo, thanks, that helped!

2 Likes

Hello I love to see what you have managed to create. But it is allowed to give credit to me also and not only ripp me off and use some of my work……

Happy you l ike the component! Not sure why you accuse me for ripping you off by using your work though…?

Doing this component was inspired by this topic:

I had referred the op to your solution, but then got interested how to solve this without hard-coding the templates and by de-constructing values from a settings list within scss. So the component code is essentially all about this solution:
https://meta.discourse.org/t/how-to-add-settings-to-your-discourse-theme/82557/52?u=nolo

But in any case: if you feel I used some of your work and I missed to give credits, kindly let me know and I’ll update the first post :ok_hand:

1 Like

Yes please would love to get at least some kind of creds. But it’s up to you tho. Other than that it looks good and I’m going to recommend this theme component in my post since this makes it easier for new users.

2 Likes

@ Nolo
Is there a way in the TC, or with CSS in the theme to left align the Heading text, just like your second example).

also is there a way (if not using a banner image) to resize the header to just the thickness of a line of text.
And if so, can you resize the text so it’s not quite as large?

2 Likes

Yeah sure, you can style the banners using these classes:

If you want to overwrite existing declarations on the general class you’d need to use the !important property. E.g. for the styles you mentioned:

.category-list .category-list-banner {
    justify-content: flex-start !important;
    min-height: unset !important;
    &:after {
        font-size: var(--font-up-3) !important;
    }
}

That’s because the styles are actually declared on the specific banners. Guess I could improve that on the component, but for now you’d need to overwrite with important.

3 Likes

Thank you so much for this component!! I’m developing a political forum, and being able to apply this kind of separation is critical.
While it’s already a huge improvement for my forum, It would be a world of a difference if the headers could be referenced by URL, because that would allow to create buttons at the top of the forum from which the user could be able to easily navigate in the same page. That would be extremely agile functionality if the forum (hopefully) gets a lot larger. Is it currently possible?

1 Like

Thanks for the suggestion @lisandro_iaffar. Though this component is really just providing a lightweight solution that doesn’t change html templates. If you want to reference the sections you’d need to use an approach as offered by GitHub - discourse/discourse-minimal-category-boxes.

2 Likes

Thank you for your answer and for providing guidance :slight_smile:
And thank you again for this component, it just improved my forum layout so much :smiley:

2 Likes

I’m excited to try this as I have created a bit too many categories and being able o organize them in groups will be a big help.

I will know when I try, this too then could be a way to leave old, lesser used categories off the front page, right? They would still be available via the new sidebar.

1 Like

Yes, sure :+1: Actually I almost always make selections of categories on different page elements (sidebar, header, navbar, category page,…) It’s like the site structure of a website. It’s important that it’s well organized, but it doesn’t need to determine your ui presentation.

Hello @nolo I would like to know if this wonderful component still works after the speech updates, I installed it and it doesn’t work for me, thanks advanced

how do you add background images ?

Hi, welcome :wave:

You can add CSS in your themes or a separate theme component:

For example, assuming you want to add an image to the category ID 4, you would do something like that:

.category-list .category-list-banner {
    &.category-4 {
        background-image: url(https://images.unsplash.com/32/Mc8kW4x9Q3aRR3RkP5Im_IMG_4417.jpg);
        background-size: cover;
    }
}

image

This is just an example. For more information, you can look at the background CSS properties.

Also helpful links :+1: :

2 Likes

A post was split to a new topic: Add extra info to category box