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.
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.
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.
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 :
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?
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:
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
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.
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?