What's the best way to make a custom category page style?

AI-generated summary

A user wants to create a custom category page style similar to forums.envato.com, displaying the title, description, subcategories, and topics of a category. thebigzhu asks if this can be achieved through a theme component or a theme.

nolo suggests two approaches:

  • Picking a default style from the site-setting desktop category page style and customizing it with CSS, which has the limitation of only affecting the desktop layout.
  • Creating a custom layout using a theme component, such as the one in discourse-minimal-category-boxes, which can be applied to both desktop and mobile layouts.

Hi, i would like to create a category page style like forums.envato.com.

The title and description of the category.
The subcategories if exists in that category.
Some topics of that category.

How can I best achieve this? With a theme component? Or i can do it also in a theme?

That looks like they didn’t use a public component but a custom handlebars-template for the category list.

One way to achieve a different look for the category list is picking a default style that comes closest to what you want from the site-setting desktop category page style, e.g. Subcategories with Featured Topics:

Screenshot from 2022-07-31 20-45-55

And then style that default template with CSS.

That’s pretty straightforward on one hand. But as the setting name suggests, this only affects the desktop layout. Afaik there’s only one default mobile layout right now and it uses it’s own layout template. So that can be a rather limiting downside of that approach.

Another way is indeed to make your own layout and use that on both desktop and mobile. Could maybe look at GitHub - discourse/discourse-minimal-category-boxes · GitHub as an example how to set this up in a component.

I think it just inserts the new template above the default ones on desktop and mobile and hides those with CSS. Would that actually be the simplest and recommended approach?