Discourse Category Banners

Hi, @awesomerobot

Just now added this Category Banners to my forum. looks great.

I have an issue, the category banners was not appearing for few categories.

Example:

https://instrumentationforum.com/c/safety-systems

https://instrumentationforum.com/c/communication

Please suggest.

1 Like

Hmm, I think it must have something to do with the category description. Both of those don’t have a description set. If you look at the theme component (admin > customize > themes) is the Hide if no description box checked? You may need to uncheck that.

6 Likes

Thank you. Its working now.

1 Like

any progress with getting the category logo/icon added as a float:left div?
This would make it really useful component.
Also using the background image in place of the colour?
Thanks

Hi @awesomerobot
It turned out to be quite simple to add the category logo if it is defined.
Just add it as a background image to the main div with appropriate css settings.
I have never understood how GitHub works so if you would like me to send you the modified files just @ me with your email address.


I’ve also reduce the padding and increased the width available for the description so that the banner takes minimum space - 75px with a title and one line description.
Logo is fixed to 75px height so a border appears if there are two or more lines of description. Margin for the description takes account of the width of logo to avoid overwriting it.
You also must hide the default dysfunctional Discourse banner which appears if a logo is defined :
.category-heading {display: none;}
as mentioned above. You might as well include this anyway as it does no harm.

4 additional lines of css, and two minimal functions plus one amended line in the Header html.

5 Likes

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)

4 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:

10 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
https://github.com/rogercreagh/discourse-category-banners-mod

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.