# Showcased Categories

**URL:** https://meta.discourse.org/t/showcased-categories/173524
**Category:** Theme component
**Tags:** official, showcased-categories
**Created:** [December 16, 2020, 7:37pm UTC](https://meta.discourse.org/t/showcased-categories/173524 "2020-12-16T19:37:32Z")
**Posts on this page:** 20
**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: [December 16, 2020, 7:37pm UTC](https://meta.discourse.org/t/showcased-categories/173524/1 "2020-12-16T19:37:32Z")

</div>

| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Showcased Categories** allows you to add two “Showcased” topic lists (built from your choice of two different categories) to the top of your forum’s home page. |
| 👓 | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/showcased-categories) |
| 🛠 | **Repository Link** | [https://github.com/discourse/discourse-showcased-categories](https://github.com/discourse/discourse-showcased-categories) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Install this theme component

> [@](#):
>
> :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > 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. 👍
> 
> [❓&nbsp; **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=showcased-categories "Ask for support on configuring and using Showcased Categories") [🐛&nbsp; **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=showcased-categories "A bug report means something is broken, preventing normal/typical use of the theme component") [👀&nbsp; **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=showcased-categories "Discussion about the user interface of Showcased Categories, and how features are presented (including language and UI elements)") [💡&nbsp; **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=showcased-categories "Discussion about how existing Showcased Categories features can be improved or enhanced, and how proposed new features could work")

### Features

 ![Screen Shot 2020-12-16 at 1.23.49 PM](https://global.discourse-cdn.com/meta/original/3X/c/3/c3190b78c06eab6d7de551ff15192d62366085a2.png)

In the theme component settings, you can customize the name of each column, as well as choose which category to pull from, along with the maximum amount of topics from that category you’d like to display.

### Settings:

| Name | Description |
| --- | --- |
| show as sidebar | If enabled, the showcased categories will only be rendered in a sidebar on the latest page. |
| feed one title | Title for first feed of topics |
| feed one category | Single category to source topics from |
| feed one tag | Optionally source topics from multiple tags, can be combined with a category |
| feed two title | Title for the second feed of topics |
| feed two category | Single category to source topics from |
| feed two tag | Optionally source topics from multiple tags, can be combined with a category |
| max list length | How many topics should appear in the custom lists? |
| plugin outlet | Advanced setting for additional customization |

| Translation | Default |
| --- | --- |
| showcased\_categories.new\_post | Post |
| showcased\_categories.view\_more | More |

### Credits

Thanks to @awesomerobot for building out the original structure of this component. 👍

  

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

> Last edited by @JammyDodger 2024-06-15T11:52:37Z
> 
> > **Check document**
> >
> > Perform check on document:

---

<div class="post-metadata">

### Author: ![tpetrov](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tpetrov/32/164643_2.png) [@tpetrov](https://meta.discourse.org/u/tpetrov)
#### Post date: [December 16, 2020, 7:41pm UTC](https://meta.discourse.org/t/showcased-categories/173524/2 "2020-12-16T19:41:56Z")

</div>

That’s great! I was recently thinking about something like that.  
Thanks Jordan!

---

<div class="post-metadata">

### Author: ![4ong](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/4ong/32/186618_2.png) [@4ong](https://meta.discourse.org/u/4ong)
#### Post date: [December 17, 2020, 10:18am UTC](https://meta.discourse.org/t/showcased-categories/173524/3 "2020-12-17T10:18:59Z")

</div>

Thanks, Jordan!  
Looks really interesting!

---

<div class="post-metadata">

### Author: ![Paracelsus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paracelsus/32/164912_2.png) [@Paracelsus](https://meta.discourse.org/u/Paracelsus)
#### Post date: [February 9, 2021, 9:08pm UTC](https://meta.discourse.org/t/showcased-categories/173524/4 "2021-02-09T21:08:37Z")

</div>

Suggestions to improve this component:

- User customized or group customized. For example, we have different groups for which certain categories are more important than others. Of course, they change according to the group. So, it would be great if the component could be either user customized or at least that the admins could choose which categories to showcase according to group
- To have the option for a sidebar instead of upfront, at least in the Latest view would be great.

---

<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 23, 2021, 6:29pm UTC](https://meta.discourse.org/t/showcased-categories/173524/5 "2021-04-23T18:29:21Z")

</div>

Thanks for the feedback here!

> [@Paracelsus](#):
>
> User customized or group customized. For example, we have different groups for which certain categories are more important than others. Of course, they change according to the group. So, it would be great if the component could be either user customized or at least that the admins could choose which categories to showcase according to group

This is an interesting suggestion 👍. I wonder how we would handle a user who takes part in multiple groups? This could get a bit complicated but I do like the idea.

> [@Paracelsus](#):
>
> To have the option for a sidebar instead of upfront, at least in the Latest view would be great.

A sidebar could be nice as well 😄

---

<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: [May 11, 2021, 5:51pm UTC](https://meta.discourse.org/t/showcased-categories/173524/6 "2021-05-11T17:51:16Z")

</div>

> [@Paracelsus](#):
>
> To have the option for a sidebar instead of upfront, at least in the Latest view would be great.

You can now choose to display the lists in a sidebar in the latest view 😄

Thanks for the suggestion.

 ![image](https://global.discourse-cdn.com/meta/original/3X/a/7/a7c2878f87666b60ddf7f73abb3b6eecab6aa694.png)

---

<div class="post-metadata">

### Author: ![Paracelsus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paracelsus/32/164912_2.png) [@Paracelsus](https://meta.discourse.org/u/Paracelsus)
#### Post date: [May 11, 2021, 6:08pm UTC](https://meta.discourse.org/t/showcased-categories/173524/7 "2021-05-11T18:08:12Z")

</div>

Really great!! 👍 Will try and leave feedback.

---

<div class="post-metadata">

### Author: ![Paracelsus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paracelsus/32/164912_2.png) [@Paracelsus](https://meta.discourse.org/u/Paracelsus)
#### Post date: [May 14, 2021, 11:47am UTC](https://meta.discourse.org/t/showcased-categories/173524/8 "2021-05-14T11:47:04Z")

</div>

Ok, so… the sidebar doens’t seem to work out of the box with non-default themes. We have a custom version of the Material Design theme and the featured categories appear above the latest list even in sidebar mode (and it actually breaks the margins layout). I’ll try to check if there’s a way around it.

---

<div class="post-metadata">

### Author: ![tot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tot/32/105673_2.png) [@tot](https://meta.discourse.org/u/tot)
#### Post date: [September 8, 2021, 9:32am UTC](https://meta.discourse.org/t/showcased-categories/173524/9 "2021-09-08T09:32:19Z")

</div>

Jordan, hi, thanks for such a great compoment, but I still have a question, namely, is it possible to make the color of the blue bar customizable? Is there a way to change it in the plugin’s settings or to show the category’s design color?

---

<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: [September 8, 2021, 5:11pm UTC](https://meta.discourse.org/t/showcased-categories/173524/10 "2021-09-08T17:11:40Z")

</div>

Sure!

To do so, you will need to do so either in your custom theme, or theme-component (probably the easier route).

What you want to target is `.custom-homepage-columns .header-wrapper`.

Something like this should work:

```scss
.custom-homepage-columns .header-wrapper { 
    background-color: `your color here`;
}
```

---

<div class="post-metadata">

### Author: ![valsha](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/valsha/32/230631_2.png) [@valsha](https://meta.discourse.org/u/valsha)
#### Post date: [September 8, 2021, 5:56pm UTC](https://meta.discourse.org/t/showcased-categories/173524/11 "2021-09-08T17:56:55Z")

</div>

Hi, Is it possible to make the entire block 2 times smaller in height, so that as a result, 2 times more news would be placed in the block, with the same block size as now.  
Thank you.

---

<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: [September 8, 2021, 6:39pm UTC](https://meta.discourse.org/t/showcased-categories/173524/12 "2021-09-08T18:39:25Z")

</div>

We have a max of 5 topics to be shown in each list currently. As far as spacing goes though, you should be able to target the css classes in the block to get the desired affect you want. 👍

---

<div class="post-metadata">

### Author: ![valsha](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/valsha/32/230631_2.png) [@valsha](https://meta.discourse.org/u/valsha)
#### Post date: [September 9, 2021, 6:42am UTC](https://meta.discourse.org/t/showcased-categories/173524/13 "2021-09-09T06:42:09Z")

</div>

> [@jordan.vidrine](#):
>
> As far as spacing goes though, you should be able to target the css classes in the block to get the desired affect you want.

Hi, can you post an example? Thank you.

---

<div class="post-metadata">

### Author: ![dinoscool3](https://avatars.discourse-cdn.com/v4/letter/d/4491bb/32.png) [@dinoscool3](https://meta.discourse.org/u/dinoscool3)
#### Post date: [September 20, 2021, 6:05pm UTC](https://meta.discourse.org/t/showcased-categories/173524/14 "2021-09-20T18:05:38Z")

</div>

Sorry, new to theme editing. Does this mean I have to duplicate the component to be able to edit the colors? Is there another way to pull up the HTML/CSS?

---

<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: [September 20, 2021, 6:14pm UTC](https://meta.discourse.org/t/showcased-categories/173524/15 "2021-09-20T18:14:29Z")

</div>

> [@valsha](#):
>
> Hi, can you post an example? Thank you.

Sure!

To change the height of the topic-list items you would target this:

```scss
.custom-homepage-columns .topic-list .main-link { height: ??? }

```

Other than this though, the minimum allowed to show is 1 and the max is 5.

---

<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: [September 20, 2021, 6:23pm UTC](https://meta.discourse.org/t/showcased-categories/173524/16 "2021-09-20T18:23:56Z")

</div>

Understandable!

You do not need to duplicate the component in order to customize the look of this theme component.

Here’s what you will need to do:

1. Navigate to `/admin/customize/themes` and click on `components`
2. Click on `install` then `create new` and make sure you select `component`, you can name it whatever you wish!

It will then appear in the unused components area:

 ![image](https://global.discourse-cdn.com/meta/original/3X/c/f/cf94c8d9053b8eb6e09e9caeea02e2a36820a207.png)

You will then need to enable it on your currently selected theme on this same page:

 ![image](https://global.discourse-cdn.com/meta/original/3X/9/8/98d44a838481a38cbb98112ce292712ad7643fd1.png)

Once that is done you can click `edit CSS/HTML`

 ![image](https://global.discourse-cdn.com/meta/original/3X/4/7/4731ec1d422bbaf6d62279889a8c4a04d5eb9af0.png)

From there, you can add the customization css on the `common` → `css` tab. You can add the code I shared earlier in there.

```scss
.custom-homepage-columns .header-wrapper { 
    background-color: `your color here`;
}

```

---

<div class="post-metadata">

### Author: ![dinoscool3](https://avatars.discourse-cdn.com/v4/letter/d/4491bb/32.png) [@dinoscool3](https://meta.discourse.org/u/dinoscool3)
#### Post date: [September 20, 2021, 6:27pm UTC](https://meta.discourse.org/t/showcased-categories/173524/17 "2021-09-20T18:27:18Z")

</div>

Thank you! Seems so simple now 🤦‍♂️

---

<div class="post-metadata">

### Author: ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [November 29, 2021, 4:54pm UTC](https://meta.discourse.org/t/showcased-categories/173524/18 "2021-11-29T16:54:26Z")

</div>

> [@jordan.vidrine](#):
>
> I wonder how we would handle a user who takes part in multiple groups? This could get a bit complicated but I do like the idea.

Hey guys! The idea with different showcased categories based on group membership is exactly what I am looking for. And when a user is in multiple groups which have showcased categories configured, the TC could go by the primary group of the user.

In my case we have private categories for advertisement clients. We are looking for a way to display their individual category on top of the home page. That way they don’t have to dig through the forum to search for it.

---

<div class="post-metadata">

### Author: ![hequaye](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hequaye/32/241683_2.png) [@hequaye](https://meta.discourse.org/u/hequaye)
#### Post date: [December 3, 2021, 12:15pm UTC](https://meta.discourse.org/t/showcased-categories/173524/19 "2021-12-03T12:15:17Z")

</div>

Hey guys @jordan.vidrine I do not see this component working for me… alongside the discourse Air theme.  
Here are my settings.

 ![msedge_Eja2OkbWyJ](https://global.discourse-cdn.com/meta/original/3X/1/2/124b2629b19a610923ddc5d4d8899899e7959bcf.jpeg)  
 ![msedge_uUSnCJJY5Q](https://global.discourse-cdn.com/meta/original/3X/5/b/5b4b7f1e84ec6c59df3855ccac5c632ea5c1fb4a.png)

But I do not see a sidebar… and I am assuming because of the search bar I can not have this in the banner section.

 ![](https://global.discourse-cdn.com/meta/original/3X/e/2/e2e9026966591c4a81b24214bbab769266b829c7.png)

---

<div class="post-metadata">

### Author: ![hequaye](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hequaye/32/241683_2.png) [@hequaye](https://meta.discourse.org/u/hequaye)
#### Post date: [December 3, 2021, 12:16pm UTC](https://meta.discourse.org/t/showcased-categories/173524/20 "2021-12-03T12:16:40Z")

</div>

did you ever find the fix for this?? I am using the Air theme

[Next page](https://meta.discourse.org/t/showcased-categories/173524.md?page=2)
