Discourse Category Headers theme component

Rhidian · April 21, 2020, 12:36pm

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

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

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

awesomerobot · April 21, 2020, 2:02am

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

Heliosurge · April 21, 2020, 10:10pm

This awesome work!

Anatolia · May 2, 2020, 2:36am

This look excellent.

labrumfield · July 8, 2020, 5:01pm

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!

labrumfield · July 8, 2020, 5:25pm

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

Rhidian · July 8, 2020, 11:11pm

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

MichelleBarnett · July 15, 2020, 6:26pm

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

Rhidian · July 15, 2020, 8:44pm

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

MichelleBarnett · July 15, 2020, 7:08pm

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!

Rhidian · July 15, 2020, 8:01pm

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.

MichelleBarnett · August 11, 2020, 9:49pm

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.

JacobDK · August 15, 2020, 3:10pm

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.

renguer0 · September 6, 2020, 3:37am

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.

Rhidian · September 7, 2020, 7:47am

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

renguer0 · September 20, 2020, 10:08pm

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.

James_Lodge · September 23, 2020, 11:13am

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?

James_Lodge · September 24, 2020, 12:33pm

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

Rhidian · September 24, 2020, 6:47pm

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.

evantill · September 25, 2020, 11:15am

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.

github.com

naidihr/discourse-category-headers/blob/95b1d1d82814559f7e1b08a993bc9c6a4cf411e0/common/common.scss#L61


  padding-top: 0.5em;
  @if($description_text_size == "smaller"){
     font-size: $font-down-1;
    } @else if($description_text_size == "normal"){
      font-size: $font-0;
    } @else if($description_text_size == "larger"){
      font-size: $font-up-1;
    } @else if($description_text_size == "largest") {
      font-size: $font-up-2;          
    }       
  a,
  a:visited {
    color: inherit;
  }
  @if($show_category_description =="false"){
      display:none;
  }     
}
a.parent-box-link {
    @if ($show_parent_category_name == "false"){
      display: none;

Is this the expected result ?