# Custom Category Boxes

**URL:** https://meta.discourse.org/t/custom-category-boxes/144865
**Category:** Theme component
**Tags:** deprecated, custom-category-boxes
**Created:** [March 19, 2020, 5:25pm UTC](https://meta.discourse.org/t/custom-category-boxes/144865 "2020-03-19T17:25:33Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [March 19, 2020, 5:25pm UTC](https://meta.discourse.org/t/custom-category-boxes/144865/1 "2020-03-19T17:25:33Z")

</div>

> [@](#):
>
> ⚠ This component is deprecated. To customize category boxes we recommend using SCSS of your own.

| | | |
| --- | --- | --- |
| :discourse2: | **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](https://discourse.theme-creator.io/theme/Discourse/custom-category-boxes) |
| 🛠 | **Repository Link** | [https://github.com/discourse/discourse-custom-category-boxes-component](https://github.com/discourse/discourse-custom-category-boxes-component) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Install Component

### 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

[![Halftone option](https://global.discourse-cdn.com/meta/original/3X/5/9/593d108652b6f88db17602a1c60bbf1f565d6040.png)](https://github.com/discourse/discourse-custom-category-boxes-component/blob/master/_repo_assets/halftone-preview.png)

### Crosshatch Background

[![Crosshatch option](https://global.discourse-cdn.com/meta/original/3X/b/9/b9d5ffc3362652a302ec775216b54916a57ab2b6.png)](https://github.com/discourse/discourse-custom-category-boxes-component/blob/master/_repo_assets/crosshatch-preview.png)

### None

[![None option](https://global.discourse-cdn.com/meta/original/3X/3/7/37931e8d71d6f619fa77828324b54200dd337497.png)](https://github.com/discourse/discourse-custom-category-boxes-component/blob/master/_repo_assets/none-preview.png)

### 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.

[![Custom option](https://global.discourse-cdn.com/meta/original/3X/7/4/741e08d383811f34cb4e44eff03e1b20d07d8c4c.gif)](https://github.com/discourse/discourse-custom-category-boxes-component/blob/master/_repo_assets/custom-option.gif)

### 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… |

---

<div class="post-metadata">

### Author: ![Joshua\_Kogan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joshua_kogan/32/127595_2.png) [@Joshua\_Kogan](https://meta.discourse.org/u/Joshua_Kogan)
#### Post date: [March 31, 2020, 12:22pm UTC](https://meta.discourse.org/t/custom-category-boxes/144865/2 "2020-03-31T12:22:39Z")

</div>

Simple, clean. Nice component. Thanks.

---

<div class="post-metadata">

### Author: ![VOICE\_OF\_CHINA](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/voice_of_china/32/177167_2.png) [@VOICE\_OF\_CHINA](https://meta.discourse.org/u/VOICE_OF_CHINA)
#### Post date: [April 3, 2020, 1:55am UTC](https://meta.discourse.org/t/custom-category-boxes/144865/3 "2020-04-03T01:55:42Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Bank\_Live](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bank_live/32/75893_2.png) [@Bank\_Live](https://meta.discourse.org/u/Bank_Live)
#### Post date: [April 14, 2020, 5:06am UTC](https://meta.discourse.org/t/custom-category-boxes/144865/4 "2020-04-14T05:06:27Z")

</div>

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

 ![image](https://global.discourse-cdn.com/meta/original/3X/4/6/462ea61393af842eacfce73c560b6614cc06ff80.png)

 ![image](https://global.discourse-cdn.com/meta/original/3X/a/c/ac996e8f54ea6ad59bdf3e80519232679cc38986.jpeg)

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [April 15, 2020, 4:46pm UTC](https://meta.discourse.org/t/custom-category-boxes/144865/5 "2020-04-15T16:46:23Z")

</div>

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 🤔 .

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [April 15, 2020, 7:17pm UTC](https://meta.discourse.org/t/custom-category-boxes/144865/6 "2020-04-15T19:17:13Z")

</div>

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. 😄

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [April 15, 2020, 7:38pm UTC](https://meta.discourse.org/t/custom-category-boxes/144865/7 "2020-04-15T19:38:11Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [April 15, 2020, 11:45pm UTC](https://meta.discourse.org/t/custom-category-boxes/144865/8 "2020-04-15T23:45:22Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [April 16, 2020, 5:14am UTC](https://meta.discourse.org/t/custom-category-boxes/144865/9 "2020-04-16T05:14:11Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Aka](https://avatars.discourse-cdn.com/v4/letter/a/ba9def/32.png) [@Aka](https://meta.discourse.org/u/Aka)
#### Post date: [September 4, 2020, 8:49am UTC](https://meta.discourse.org/t/custom-category-boxes/144865/10 "2020-09-04T08:49:24Z")

</div>

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

---

<div class="post-metadata">

### Author: ![James\_Harakaly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/james_harakaly/32/427413_2.png) [@James\_Harakaly](https://meta.discourse.org/u/James_Harakaly)
#### Post date: [April 9, 2025, 4:39pm UTC](https://meta.discourse.org/t/custom-category-boxes/144865/13 "2025-04-09T16:39:18Z")

</div>

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.

 ![image](https://global.discourse-cdn.com/meta/original/4X/a/1/1/a11d6983a5d458c4eee3b4381e9d59f89caeb926.png)  
 ![image](https://global.discourse-cdn.com/meta/original/4X/4/1/e/41e9ee3c30e637f8cb83b661ff0d63ecbb2b5cec.png)

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/6/1/561df4cda6710b059426070fadc93679e1b4c16e.jpeg)

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [October 21, 2025, 3:45pm UTC](https://meta.discourse.org/t/custom-category-boxes/144865/16 "2025-10-21T15:45:17Z")

</div>

Just an update that this theme component’s lifecycle has come to an end. This component is no longer under active support from the Discourse team.
