Category List with Banners

[nolo (Manuel)]

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:

.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:

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.

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?

	Repository	GitHub - nolosb/discourse-category-list-banners: A Discourse theme component. Adds optional banners to the default category lists.
	Install Guide	How to install a theme or theme component

[tot (Борис Мальцев)]

Thank Nolo Very cool! Your component has improved our community

[tot (Борис Мальцев)]

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

[nolo (Manuel)]

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

Updating themes and plugins to support automatic dark mode

Previously, all colors in Discourse were stored as SCSS variables. To support automatic dark mode color scheme switching, we have converted these colors in core to custom CSS properties. You can easily see the full list in the inspector now: [image] Themes and plugins need to switch all the $color SCSS variables used in stylesheets to the --color CSS property equivalents. In most cases, this is a simple find and replace task: - background-color: $primary-very-low; + background-color: var…

[tot (Борис Мальцев)]

Nolo, thanks, that helped!

[godgutten]

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……

[nolo (Manuel)]

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:

Creating a nicer layout

Hello all, I’m new here, and wasn’t sure where to post this since this questions about CSS/HTML were outside the scope on the support category. Anyway I digress. I came across Discourse through another platform I frequently use, and moved my Forum over to Discourse. The layout that is used on the platform looks really nice and I’m trying to do something similar. Anyone an idea how to do this kind of thing? [Screenshot] just a basic HTML/CSS edit or do I need to use a plugin?

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:

How to add settings to your Discourse theme

Thanks for the hint, @Osama In the end it wasn’t as straightforward as I would have thought. I used a function to split strings into lists, iterating twice over the list from theme settings and creating a nested list that can be used with the @rule.

nested-list.scss

@function str-to-list($string, $separator, $startAt: 1) { $item: str-slice($string, $startAt); $list: (); $index: str-index($item, $separator); @if $index == null { $list: ($item); } @else { $list: (…

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

[godgutten]

@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

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.

How do I add category banners?

So now I have got it fixed for my self at least [4d34f94999cfa96f6578d9b3d6d33707] 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…

[Cozdabuch (cosmo)]

@ 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?

[nolo (Manuel)]

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

@nolo

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]}
}

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.

[lisandro_iaffar]

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?

[nolo (Manuel)]

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.

[lisandro_iaffar]

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

[cogdog (Alan Levine)]

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.

[nolo (Manuel)]

Yes, sure 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.

[Tiago_santos]

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

[duncanell]

how do you add background images ?

[Arkshine]

Hi, welcome

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

@nolo

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, 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;
    }
}

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

Also helpful links :

Make CSS changes on Your Site

Want to make some CSS changes on your Discourse site but not sure where to start? You’ve come to the right place! You only need to read this topic if you’re very new to CSS. If you already know how to write and add CSS to your Discourse site, then you will most likely not need to read this topic. We’ll cover a few subjects. We’ll start with a brief introduction of what CSS is and some terms that you need to know. We will then move on to how you can add CSS to your Discourse site. Final…

Beginner's guide to using Discourse Themes

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 …