Discourse Category Headers theme component

This theme component provides a number of enhancements for the Discourse category header.

The ‘standard’ Discourse category header is displayed at the top of each category page, above the navigation links and list of topics. It is normally only visible if a category logo image has been uploaded in the category settings. The header displays the logo and a short description of the category, taken from the first paragraph of the ‘About the… category’ topic.

This theme component provides the following enhancements

The category header is now shown by default for all categories. It now includes the name of the category in addition to the logo (if set) and the category description. It can also now include a logo background image and can be styled to show as either a ‘box’ or a ‘banner’, using the category color settings . There are a wide range of configurable options in the theme settings.

Theme settings

  • show category name: Show the category name in the header
  • show category description: Show the category description text (the first paragraph of the “About this category” topic)
  • description text size: Size of text within the category description
  • text align: Alignment of the text within the category header
  • show subcategory header: Show header for subcategories
  • show parent category name: Prefix the parent category name on the subcategory headers (this acts as a breadcrumb link to the parent category page)
  • show lock icon: Show the lock icon on categories protected by permissions
  • show category logo: Show the category logo image within the header
  • show parent category logo: Show the parent category logo when a subcategory logo is not set
  • show site logo: Show the small site logo if a category logo is not set
  • position logo: Position of the logo within the box
    – ‘left’ and ‘right’ display the logo inline with the text.
    – ‘top’ displays the logo above aligned with the text
  • size logo: Position of the logo within the header.
    – Small is 50px high similar to a subcategory box logo.
    – Standard is 150px high.
    – Original is the size of the image uploaded
  • header style: Set the header style to either:
    – Box: the category header is displayed in the same style as the standard Discourse boxes
    – Banner: set the header background to the category background color and text to the foreground color
    – None: no border or background styling
  • header background image: Applies if you have uploaded a category background image
    – ‘contain’, ‘cover’ and ‘resize’ display the background within the header.
    – ‘outside’ is the Discourse default displaying it outside the header, over the whole page.
  • show mobile: Show category header on mobile devices
  • force mobile alignment: Force mobile alignment of logo-text to the top-centre of the header
  • hide if no category description: Hide header if category description is not set
  • hide category exceptions: Headers will not show for these categories

Install the theme component

:hammer_and_wrench: Git repo: https://github.com/naidihr/discourse-category-headers

:thinking: How do I install a Theme or Theme Component?

Credits

Thanks to @Johani for his excellent Developer’s guide to Discourse Themes
This theme component was inspired by other themes notably the Discourse Category Banners theme by @awesomerobot

Examples

Box style: The category header is displayed in the same style as the subcategory boxes

Subcategory, note the subcategory doesn’t have a logo but is set to inherit the parent category logo. The parent category name is also set to show as a breadcrumb link.

If the subcategory has it’s own logo it will display it instead.

Mobile view showing a different text and icon alignment.

Text size settings.



Alignment options example center text, logo right.

Banner style: Uses the category background and foreground colors

Background image: Uses the category background image

72 Likes

The wide range of options makes this really flexible, looks great!

19 Likes

This awesome work! :beers::sunglasses::+1:

4 Likes

This look excellent.

2 Likes

Rhidian, would you please share your configuration settings to get the categories to show up in the grid format for the screenshot you shared? (linking below)

b7c34179304858a5b372d344883128cce263a01a_2_690x307

I’ve installed this theme component and am only able to see Box headers at the top of each category page. Thanks!

2 Likes

Actually, I believe I figured it out. :slight_smile: I was missing the following under Settings:

4 Likes

Great @labrumfield :grin:. Thanks for posting the answer too - I suspect it will be useful for others too. I hope the theme component works well for you.

1 Like

Do you happen to know if there is a way to preview this Boxes with Subcategories setting with a new theme without publishing it?

I’m not sure what you mean by preview? You can preview themes and theme components under the customise admin settings

Ideally, I would like to preview the ‘Boxes with Subcategories’ setting without publishing it. Either that or if there is some way to associate this setting with only your theme component and not other themes/ theme components.

I don’t think there’s a way to do it, so I just wanted to see if anyone had any ideas. Thank you!

The boxes with subcategory setting is not part of this component. It is a discourse category setting.

You can’t ‘preview’ that but you can turn it on temporarily to see what it looks like. The category settings are to display the subcategories as rows or boxes.

2 Likes

Hi there,

I just changed a category setting, and my category headers got a bit messed up. (see image)

The setting that was changed was the Subcategory List Style changed from “Boxes” to “Boxes with Featured Topics”. I don’t think any of the other settings were changed. Do you have any idea how to change the banner back to going across the top rather than the box in the upper left corner?

Also, when I change the setting back to “Boxes”, it still doesn’t go back to normal.

Thank you so much. This is a really, really, really nice component.

I tested my luck and tried to put in a youtube video and a soundcloud podcast, but it was not shown in the category box unfortunately.

Would be an awesome way to give people an intro to what the category is about if I could choose between image and/or video and/or audio. Make a short video-intro to every category in stead of an image. This way a potential member could get an overview from a small text and watch a video with an introduction to what the category is about and a soundversion/podcast-intro if that is their preference.

But thank you very much for your work and contribution.

1 Like

What are the best dimensions and option to make a banner responsive? Maybe I need to check another component?

I think that could be great to display the category info using a good design.

Thanks for that module. It’s awesome.

1 Like

The banners use the standard discourse responsive templates so should automatically resize to your device.

1 Like

Well I see that auto fixed configuration is not good for full banner width in desktop and mobile devices.

Do you have some example of that? Maybe I can do it from CSS, using some media queries but could be useful for all. Or maybe I’m missing something in my configuration.

Thanks for your reply Rhidian.

Hi,

I’m using your brilliant theme component, but whatever settings I make, nothing changes to the layout. The description doesn’t show, if I move the logo between top, left, right the affects are not shown.

What am I missing please?

Does anyone monitor this topic anymore, or is this theme component no longer maintained.

There has been no change to the component. In these cases it is likely to be another component that is interacting with it. I’d suggest disabling components one by one to see if you can identify it. If you do please let us know.

1 Like

the link in my category description is styled like normal code due to the css rule a,a:visited {color: inherit;} in the component.css.

https://github.com/naidihr/discourse-category-headers/blob/95b1d1d82814559f7e1b08a993bc9c6a4cf411e0/common/common.scss#L61

Is this the expected result ?