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?
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.
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., Request Message 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)
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.
This is my first attempt at a theme modification. I hope this is helpful?
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:
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.
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.