Discourse Category Banners

Hello, and thank you for this theme component!

I just tried installing it, following this tutorial (did exactly the same steps) to try this Category Banners component, but nothing happens. No banner in any of the categories. Is there anything that I might have done that doesn’t make it work? The only explanation I see is that the “bootstrap” warning blocks it?

1 Like

By default, the theme component does not display category banners if you have not set a category description for a category. This can be changed by unchecking the “Hide banners if category description not set” checkbox.

Category descriptions are set by editing the About category topic that Discourse automatically creates for every category. If you have either added category descriptions, or disabled the setting to hide banners for categories without descriptions, and you are still not seeing category banners, let us know. We’ll look into what is going on.

6 Likes

Thank you for your answer. I have checked and confirm that each category on the forum has a description. The “Hide banners…” option is now unchecked just to make sure but nothing changes.

As you can see on the images, everything looks normal in the settings :

No idea if it could have anything to do with the issue but just informing you it’s a Discourse installation on a Yunohost instance.

1 Like

Is there anyone other than me that thinks it would be nice to enable this same styling on Group listing pages (e.g. /g/foo) as well? The CSS, unfortunately, is not quite the same, and I guess it would require some additional handling of the various buttons to the right side of the group name, i.e., :bust_in_silhouette: Request:email: Message :garbage: Delete

It could go a long way for a consistent look and feel, and make groups feel more like a “first class” citizen among the UI. (IMHO)

3 Likes

I love these category banners! Thank you for making this theme component!

I would love this banner to exist in the main home page of our forums where it shows:

  • “Latest” Discussions or
  • “Top” Discussions or
  • “Categories” or
  • “Following” (if you’re using the Follow Plugin :man:)

Would there be an easy (ish) way to have there be a banner if someone selected each of these options, respective to what was selected?

2 Likes

@awesomerobot , I hope you are okay with me sharing this here…

I’ve created a fork of this discourse-category-banners theme called

discourse-category-banner-boxes
https://github.com/naidihr/discourse-category-banner-boxes

You can preview it here

https://theme-creator.discourse.org/theme/Rhidian/discourse-category-banner-boxes

It pretty much does the same thing but with some modifications:

  • The category banner box is displayed in-line above the main heading instead of full width at the top. This allows for display a banner theme at the top, for example the discourse-versatile-banner.

  • The category banner box is displayed in the same style as the native discourse subcategory boxes, which are a core component of discourse. These subcategory boxes are a display option in the discourse category settings Show subcategory list above topics in this category . This option displays the subcategory category name and description as a row or box above the topic list, using the category background colour as the left border.

  • If the category is a subcategory, the category name is displayed as breadcrumb as follows - Parent category name: Subcategory name

Demo screen shot of theme banner box for the category, above the native subcategory boxes.

Screen shot of the subcategory, showing the breadcrumb reference to the parent category.

This is my first attempt at a theme modification. I hope this is helpful?

Update

I have refactored this adaption as a separate component - with many additional features including using the category logo image and background image in the header. This new component effectively replaces the standard Discourse category header, unlike the category banners, hence making it a new component. Please see:

9 Likes

Can you share a code with me? How can I add logo of the category as you did it?

1 Like

@awesomerobot, how can I add logo of the category to the top line of the banner?

1 Like

Hi Ed,
Its here

3 Likes

Mind you I haven’t been in here for a month and I see @Rhidian has produced a new component which might have more enhancements - I haven’t checked it yet.
Mine simply does this

2 Likes

Here is the link - plus screen shots - including how you can include and position the logo @Ed_Bobkov .

4 Likes

thanks for a quick reply!
is it possible to move logo to the top?

on wide screens logo doesn’t look good

1 Like

Yes you could simply edit the scss to make the background position top in which case it would appear behind the title, or also add a top margin to the title (around line 47 in the html where it is set to 0) to move the title below your standard height of logo.
Or calculate an appropriate margin depending on the logo height.

Personally I wanted to keep the header as narrow as possible as otherwise it becomes a massive waste of screen real estate and I quite liked having the logo away at the left (most of our forums don’t bother with their own logos)
We decided that the description should never be more than 2 lines of text so a logo height of 75px worked ok with one line without wasting space and the slight border with two lines also looked ok we thought.

NB it also assumes that the top bar is taking 60px - that could be different in different themes but it worked for us.

3 Likes

that is 100% I need! thank you!

3 Likes

We are looking to add HTML codes and customize a banner specifically to one category and let the others stay as they are. Can someone please guide us on best practice on doing this?

Thank you.

This isn’t working for us. I’ve tried both the category slug and the category ID, but the banner stays stubbornly there. Is this working for anyone else?

2 Likes

I just tried it and it works for me, it’s looking for the case-sensitive category name. In retrospect that was not the best way to implement it… I can probably improve that.

3 Likes

Ah - that sort is for me! And you do state ‘name’ in the guide above - I just didn’t read that.

Name isn’t very intuitive as we don’t really use it for anything else. But it is displayed a lot. Just making it more explicit in the settings would be fine I reckon.

1 Like

Instead of adding exceptions of what which categories will not show a given uploaded banner, can’t we just specify which category should show which banner?

2 Likes

Depends on the specific site and use-case I’m sure. My initial thought was that it would be more likely for a site to want it implemented everywhere, and if there were exceptions it would only be a few.

If you wanted to implement a banner for a small number of categories there might be a better theme component option that’s built to be a less generic cover-all, like Versatile Banner or customizing one of the options found in Banner themes (and instructions for customizing them)

4 Likes