Discourse Category Banners

theme-component

(Kris) #1

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: GitHub - awesomerobot/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 (category-example is your category name):

body.category-example {
    .category-title-header {
        background: url(example.jpg);
    }
}

This component also adds the class category-header to the body tag as an additional CSS target.


How difficult would it be to make the Discourse UI more like Flarum?
Category name on category page
Beginner's guide to using Discourse themes
Show customisable message on private topics/categories?
Developer’s guide to Discourse Themes
(Denis Heraud) #4

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) #5

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


(Kris) #6

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

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


(François Douville) #8

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…


#9

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


(Hakan) #11

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


(François Douville) #12

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


(Kris) #15

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.


(Jerry) #16

Awesome, thanks Kris!

It would be really useful to see the “lock” symbol appearing in the banner for private categories, as they appear in the normal category listing, for example:

image

The missing lock symbol is very obvious… and a bit disconcerting…

image


(Hakan) #17

Stability does not work when crossing between pages. Can you resolve the reason


(Kris) #18

Can you be more specific? which pages?


(Hakan) #19

Navigating through the categories is delayed.


#20

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


(Kris) #22

The lock will appear on protected categories now


(Pad Pors) #23

thanks for this wonderful theme :heart:, 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?


(David Kingham) #24

Great addition @awesomerobot, would it be possible to have links come through to match the way the existing description works? Also, if it would acknowledge the breaks so the text doesn’t bleed together. The default description will show all the text as long as they are only separated by breaks but it keeps the breaks.


(James) #25

Could you make banners for tags?


(Martincz Gao) #26

I want use this for Material Design Stock Theme, but it is a theme, not a theme-component?


(Kris) #27

This was created before theme-components could be designated in the theme configuration, I just made the update now to have it default to a component.

You can also convert a theme to a theme component manually using the “convert” button at the bottom of the theme’s settings page.