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.

14 Likes

Thanks for the cool component. Unfortunately, there is a style bug in the mobile version

1 Like

Thanks for pointing this out! Should be fixed if you update the component :ok_hand:

1 Like

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

1 Like

Nolo, thanks, that helped!

1 Like