Category Groups

:discourse2: Summary Category Groups allows you to assign categories to groups, which are then used to sort and collapse categories on the categories page.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-category-groups-component
:open_book: New to Discourse Themes? Beginnerā€™s guide to using Discourse Themes

Install this theme component

Features

:information_source: Important things to note:

  • This theme component only works with the site setting desktop category page style set to boxes with subcategories (as it replaces that category page template).

  • The category collapsing works using your browserā€™s local storage, so the collapsed state will not be remembered between different devices.

Settings

Name Description
category groups This is how the groups are configured. Format as: Group name: category-slug, extra-link-id, category-slug-2 (The category slug is the name of the category as itā€™s seen in URLs. Usually all lowercase with no spaces)
extra links Extra links that can be mixed into category list. Add link ID in category_groups setting to render
show on mobile Show the collapsible category box groups on mobile
show ungrouped Display a group of categories that arenā€™t assigned to another group
fancy styling Turn on additional styling (These are some custom styles added. They stray from our defaults, so if youā€™re working on your own theme you may want to disable this)
hide muted subcategories When enabled, a non-muted parent category will not appear under the muted section if it has a muted subcategory
Theme Translations Default
ungrouped_categories_title Other

:discourse2: Hosted by us? Theme components are available to use on our Standard, Business and Enterprise plans.

Last edited by @JammyDodger 2024-06-11T09:28:21Z

Check documentPerform check on document:
52 Likes

Iā€™ve just merged a refactor of this component. Functionality should remain the same overall, with some bug fixes.

Behind the scenes this uses some modernized Ember, and eliminates template overrides, which can be a little fragile as far as Discourse customizations go.

This should be fixed now

This is fixed now, the groups will no longer apply to the subcategory layouts

Iā€™ve updated this, so category logos should be much more normally sized now

5 Likes

Is it possible to not show subcategories for a particular category? We have a category thatā€™s organized in a particular way with nested subcategories and itā€™s causing the box to be quite large.

2 Likes

Maybe try the Category Hider in theme-component

2 Likes

Can you tell me if itā€™s possible to apply the category groupings to the sidebar? If not, I would like to put this in as a feature request. Thanks!

1 Like

image
There is a problem on my website, subcategories hasnā€™t space between them.

2 Likes

Thanks for reporting it, an update should fix it now (fixed in UX: include gap for subcategories by awesomerobot Ā· Pull Request #19 Ā· discourse/discourse-category-groups-component Ā· GitHub).

2 Likes

Itā€™s not possible, the sidebar would need a bigger change in Discourse to allow for this (request noted!)

2 Likes

Will be awesome if this grouping will be customizable by user, some people in our community wanted that.

Yeah, this needs a plugin, but a good idea I think

Any idea why the category width is so skinny? Is there a way to fix this?

2 Likes

is this in the Mint theme? Iā€™ve just made a minor update that should fix it ā€” there was a slight conflict between the CSS of that theme and this component

3 Likes

Yeah it was the mint, thank you

2 Likes

How do I prevent the boxes being outlined with the category colour? Iā€™ve tried forking it, adding css, and also changing the <li style in the categories-groups.hbs

(Note that I am a dabbler, not a trained developer)

3 Likes

You can add a little CSS to your theme to remove the colorful borders:

.category-boxes .category-box {
  border-left: 2px solid var(--primary-low) !important;
}

image

image

or if you have the ā€œfancy stylingā€ setting turned on:

.custom-categories-groups .category-box {
    border: 2px solid var(--primary-low) !important;
}

image

1 Like

Thanks Kris,

It appears Iā€™m having a bigger problem. For some reason, whenever I try to update the Theme component, it doesnā€™t pick up the changes at all. So my css was good, it just wasnā€™t being loaded. Not something for this thread, Iā€™ll have a search around to see if there is something dumb Iā€™m doing

1 Like

Would it be possible to have the fancy styling boxes with a latest section below the categories? In essence I want to do that same thing that the ā€œModern Categories + Group Boxesā€ component does in the Air Theme. You can select Categories with Latest for the desktop view and latest displays below the categories.

Im trying to edit my own version of the CSS but im no expert. Would this be an easy thing to do or might it be out of my skill set?

1 Like