Install this theme component
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):
.category-title-header {
&.category-banner-example-category {
background: url(example.jpg);
}
}
This component also adds the class category-header to the body tag as an additional CSS target.
85 Likes
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?
1 Like
That makes me wonder if itâs possible for this plugin to grab the category logo and include it in the banner?
3 Likes
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.
7 Likes
Great theme thank you!
Is it possible to have max-width: 800px; instead of 500px ? It doesnât look good and my description is not so longâŠ
Steven
#9
You can easily edit the theme component in the admin panel > Customize > discourse-category-banners > Edit CSS/HTML
In Common css youâll have in line height : max-width: 500px; you can edit and save.
Youâll just have to edit this after each update.
This should work too if you want it permanently : add a css line in another css stylesheet, my guess is that something like that would work :
.category-title-header .category-title-contents {
max-width: 800px !important;
}
En français
Dans admin/customize/themes on peut facilement modifier le css/html du thĂšme ajoutĂ©, en cliquent sur le bouton Ă cĂŽtĂ© de âVĂ©rifier les MAJâ
Ligne 8 dans Général > CSS, il y a la référence au max width: 500px;
Vous pouvez changer la taille ici, sauvegarder et ça fonctionnera. Simplement, à chaque MAJ du thÚme il faudra faire cette modification.
Une autre solution permanente devrait fonctionner, sur une autre feuille dans Themes, vous pouvez ajouter ce code :
.category-title-header .category-title-contents {
max-width: 800px !important;
}
Je pense que ça devrait marcher
7 Likes
nothing
(Hakan)
#11
when browsing through categories or clicking on a category in a category, the header association still appears, making the new page difficult to load.
Is it normal that it takes only the first paragraph? Could it take all paragraphs?
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.
4 Likes
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 
2 Likes
Pad_Pors
(Pad Pors)
#23
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?
2 Likes
nexo
#25
Could you make banners for tags?
5 Likes
drreen
#29
Is there any way to enable the banner on the home page of the forum as well?
6 Likes
HAWK
#30
You need a different theme component for that. See https://meta.discourse.org/t/banner-themes-and-instructions-for-customizing-them/82368
2 Likes
@awesomerobot Is there a way to make the category banner also display in posts? Thanks!
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:
return h('div.category-title-header' + " ." + category.slug, {
"attributes" : {
"style" : "background-color: #" + category.color + "; color: #" + category.text_color + "; background-image: url(\'" +
category.background_url + "\');"
}
}
Also, Iâm wondering, how can I make the banner thinner for a fixed width design. When I attempted, it continued to be left-justified.
1 Like
@awesomerobot Is there a simple solution to make the category banner also display for posts under the category?
Hi There!
is it possible to add a custom background image instead of the space where the color shows?
Is then possible? To add the logo of the category next to the category title? thx!
2 Likes
Is it possible to set a banner for the uncategorized category?
Is it possible to set a banner for the categories page?
I want there to be a banner on these pages that displays a description (like the others do).
Any info on how to do that would be a huge help.
Thanks.