Custom Category Boxes

[Discourse]

	Summary	Custom Category Boxes will render your categories as boxes with customized backgrounds on your categories page. This component will also render each category page with a category banner if show_banner is selected.
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/discourse-custom-category-boxes-component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install Component

As this is an official theme component maintained by the Discourse team, support, bug, ux, and feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started.

 Support  Bug  UX  Feature

Features

For this component to work desktop category page style needs to be set to either categories with Featured Topics or Boxes with Featured Topics

There are four options to choose from. The default is halftones.

Halftone Background

Crosshatch Background

None

Custom

If you would like to create this effect with some of your own artwork, upload 4 varying .png 's with transparent backgrounds or traditional .jpg 's in the settings page. For each upload, use the naming convention of custom-0 , up to the last as custom-3 . Be sure to select custom as your category background setting.

Settings

Name	Description
category background	Select one the four options
show banner	If selected, a styled banner will appear on each category page, matching the look of the category box.

Translations	Default
more_topics	More Topics…

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

Last edited by @JammyDodger 2024-06-11T15:12:05Z

Check document

Perform check on document:

[Joshua_Kogan]

Simple, clean. Nice component. Thanks.

[VOICE_OF_CHINA (Davin)]

Great plugin! I have been searching for it for a long time, thank you.

[Bank_Live]

I think it should have auto-resize for picture or limit

[Pad_Pors]

thanks for the theme

may you consider slight changes so that the theme also works for rtl direction without any edits? (as edits go away after updates).

also where can I translate this string: “more topics …”. it was neither in the admin customize section nor in the theme .

[jordan-vidrine]

Glad you enjoy the component. I have added translation for more topics.... As for the rtl direction it is something I will look into.

Until then, make sure you copy your customization and add it back after updating the component.

[Pad_Pors]

thanks

@jordan-vidrine

As for the rtl direction

for this, there’s only one line which needed to be commented:

a #custom-category-title{ text-align: left;}

btw, I noticed that these category boxes won’t apply for subcategories. is it possible that the same rules also applies to subcategory boxes?

[Heliosurge (Dan DeMontmorency)]

I believe you might be able to create your changes as a seperate theme component with Overides in your component plugin.

[Pad_Pors]

you are right, and I’ll do that for this case.

but I believe that when the whole discourse application is compatible with both rtl and ltr directions, it means that “details matter for the creators” and “they want to build the best service, not just a service”. well, this can happen for its great themes as well.

[Aka]

I want this theme too but I’m straggling to add it.

[James_Harakaly]

Great work on this component!
I am having an issue with it not showing newly added categories properly. I just added the events category and have selected the checkbook to display it and it is not showing on the cats page. Not sure how to go about getting it to display all the cats that each user selected.