Discourse Category Banners

[awesomerobot (Kris)]

This theme component uses your existing category details to create banners for your category pages.

You can preview the theme on our theme preview site here (you’ll have to navigate to a category page)

Github repo: https://github.com/discourse/discourse-category-banners

Not sure where to start? See: How do I install a Theme or Theme Component?

What does this theme component do?

This theme component takes your existing category details, including name, description, and color and generates a banner at the top of the relevant category pages.

This component looks for your category description, which is defined by the first paragraph in each category’s “Category definition for …” post. 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.

Theme component settings

This component comes with a few 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

Additional CSS styling

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.

[Denis_Heraud]

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?

[Denis_Heraud]

That makes me wonder if it’s possible for this plugin to grab the category logo and include it in the banner?

[awesomerobot (Kris)]

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

That makes me wonder if it’s possible for this plugin to grab the category logo and include it in the banner?

Should be possible, I can look at adding that option in the near future.

[Francois_Douville (François Douville)]

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]

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

[nothing (Hakan)]

when browsing through categories or clicking on a category in a category, the header association still appears, making the new page difficult to load.

[Francois_Douville (François Douville)]

Is it normal that it takes only the first paragraph? Could it take all paragraphs?

[awesomerobot (Kris)]

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.

[subtenko]

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

[Pad_Pors]

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?

[nexo (Alex)]

Could you make banners for tags?

[martincz (Martincz Gao)]

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

That makes me wonder if it’s possible for this plugin to grab the category logo and include it in the banner?

Should be possible, I can look at adding that option in the near future.

Thank u very much.

[drreen]

Is there any way to enable the banner on the home page of the forum as well?

[HAWK]

2. Is there any way to enable the banner on the home page of the forum as well?

You need a different theme component for that. See Banner themes (and instructions for customizing them)

[Kameron_Bourgeois]

@awesomerobot Is there a way to make the category banner also display in posts? Thanks!

[jimmymckinney (Jimmy)]

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.

[Kameron_Bourgeois]

@awesomerobot Is there a simple solution to make the category banner also display for posts under the category?

[ElForoViajero]

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!

[Tim_Jefferies]

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.