Category Banners uses existing category details to create banners for your category pages. It uses the category name, description, and color to generate a banner at the top of the relevant category pages (for tags check out Discourse Tag Banners).
The category description is defined by the first paragraph in each categoryâs âCategory definition for âŠâ topic. The banner background/text colors are defined by your category badge settings.
By default this will display on desktop and mobile across all Category and Subcategory pages, but will not appear if you havenât given your category a description.
This component comes with options to override the defaults:
Show description: disabling this will hide the description part of the banner.
Show mobile: disabling this will hide banners on mobile devices
Show subcategory: disabling this will hide banners for subcategories
Hide if no description: disabling this will show banners even if a category description is not set
Exceptions: if you donât want a category to have a banner, add its name here
If you want to customize these with some additional CSS you can target specific category headers by using this structure (example-category is your category name):
This looks awesome! Will give it a whirl and report back!
EDIT: Just installed it and tested it on a category that already had a category logo set. When I turn on the category banner theme, I get the banner, but also the category logo and description right below it. Is this normal?
Yeah thatâs normal, I didnât do anything to hide the default header that appears if you add a logo. To hide it you can remove the category logo or add this CSS to you theme:
.category-heading {
display: none;
}
Should be possible, I can look at adding that option in the near future.
Yes, thatâs expected. I pulled the existing concept of âCategory descriptionâ from Discourse, which by default only takes the first paragraph of that post (I believe this same text is used on the /categories page). Iâm not sure if thereâs an easy way to take the full text of the category introduction post for this.
I just wanna say FANTASTIC addition. Im not using the theme component yet but using the code. Im also using the background images instead of the colors (I just took out the bg color style in the js (i knew that much, hahaha)
OP rocks. I 2 themes and this is one of em. (forums before that used a similar banner layout. I think alot of forums or sites use the banner layout anyway so it is kind of welcoming I think
thanks for this wonderful theme , it helps users to note the category description much easier.
currently if thereâs a link or a bold/italic word in the category description, in the banner itâll appear as simple text (e.x. p style instead of a style). isnât it better if the text style is preserved in the banner as well?
Hi, I absolutely love this component! Thanks for your work!
Iâm wondering, how can I style the background so that it automatically pulls the category background image and makes it the background of the banner. The backgrounds are already hidden anyways, so I want it to simply display as the background to the banner, rather than the page. Iâve tried this, but it didnât work and I think I might be targeting the wrong variable: