Discourse Category Headers theme component

Is there a way to show the entire contents of the “About the XXX category” page in the category banner/header description? Currently, only the first paragraph shows, but we would like to show more text than that, as well as images in the category header/banner. Is there a way to do this? Thanks in advance for your help.

1 Like

@ Rhidian

Your plugin is fantastic, but if we could just display the entire contents of the “About” page instead of just the first paragraph, that would help us immensely.

I’ve looked through the code, and I see the following catDesc() function, but it looks like category.description is just the first paragraph. How can we get the full contents of the About page?

              function catDesc() {
                  if(settings.show_category_description) {
                      return h('div.cooked', {innerHTML: category.description});
                  }

Any feedback would be much appreciated. Thanks in advance!

1 Like

The first paragraph of the default About topic in each category has a special status in Discourse. It is used to display a short summary of the category. This is used in the category lists and in the default Discourse category header. It is stored separately in the database structure - in the metadata for the category.

This theme component makes use of that built in functionality and adds various enhancements to default category header functionality to display the metadata such as the category name and logo, and some positioning and style options. It is limited by those metadata however and unfortunately the whole of the About messsge is not one of them, due to the way the data are structured in Discourse.

I can see why it has been built that way as the purpose is to display a short text summary.

1 Like

Regarding the category link colour/style:

The name of the category displayed in the banner serves as a link. This is useful when displaying a subcategory - as this is shown as Parent category name: Subcategory name. Clicking on the parent category name then serves as a breadcrumb link to take you up to that parent category page.

The styling of that link was done so that it displays in the same colour as the rest of the title. This makes the breadcrumb link less obvious but it looks better in my view.

Please feel free to change that in your install by commenting out/removing the a: styling you’ve highlighted.

I note others have commented on wanting to have any links they have included in the first paragraph of the about message to display in the category header. If that’s useful I may add a class to the header so the ‘same colour’ styling will only apply to the breadcrumb links, if that would help?

2 Likes

That would.be very helpful.

We make extensive use of links in that first category description paragraph, and can’t use this awesome component at the mo because of it.

I have made that change. The links should now display by default in the category descriptions using the standard theme color setting for links.

@nathank please can you confirm that works for you now? You will need to update the component.

I’ll have to install it first! The link thing was a strong reason that I have put it off. I’ll install it and have a play shortly.

Thanks for this amazing theme, I’m having a bit of trouble with the menu overlapping the theme box at the top of the page. Has anyone seen this / know how to fix it?

Is your forum public. Happy to take a look if you can provide a URL?
Are you using the latest version?

1 Like

Hi Rhidian, thanks, I’ve actually decided to change the layout so its not an issue anymore. If no one else has seen this then it must be something particular to my forum.

2 Likes

Hey! Lovely theme here! Thanks for this :slight_smile:

Also, I am having a little trouble trying to replicate the look you have shared in your screenshot here : image

This is what I am getting on a category page that has two sub-categories :

And yes I have already turned on the box style as mentioned here :

For reference, this is how my categories page looks like :

Would be really nice if you could help me figure this out :slight_smile:

Hi, the subcategories showing as boxes is the native discourse boxes. It’s not part of the theme component.

Do this standard discourse boxes work in any category with subcategories?

In order to activate this for subcategories, you need to edit the settings in each Parent category like this:
image

3 Likes

How could I display this above topics as well?

Discourse Category headers show above the Topic List for the Category. Do you mean you would like the respective Category header to show above the posts in a Topic?

I’m not sure that would be helpful as the Posts open at the last post read in the Topic, so the header would only be visible if someone scrolls back to the top?

Yep, this is what I mean. I have it set so that users see the first post rather than last. It’s important for users to see the first post as well as category header on this particular Discourse I’m setting up.

Hi Rhidian!

Thank you for sharing this amazing component. It has been super useful for my website, and now it looks super clean :sunglasses:

I wanted to ask if it is possible to change how the categories look on the hompeage?

I would love it if in the homepage the category icon was displayed in left instead of above. I got inspired by this website: https://forum.figma.com/

cheers,
Sofia

Currently the category headers of this TC are being displayed above content in Edit CSS/HTML -> After Header of another TC. I need these category headers to display below that TC’s After Header content. How do you suggest I do that?

Is there an easy way to have category header images for the banner displayed by this component, but suppress them from the front-page category listing?

2 Likes

Hi, great addon thank you! I have the same issue as @mattdm
I have a logo image for the category that I do not wish to show on the homepage.
Id like the category logo image to show only on the category header.

I would appreciate your help. I couldn’t use CSS because it’s the same exact class so when I hide it on the homepage, it also applies to cat page.

1 Like