Showcased Categories Theme Component

jordan.vidrine · December 16, 2020, 7:37pm

This theme component 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. Thanks to @awesomerobot for building out the original structure of this component.

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.


	Preview	Theme Creator
	Github Repo	Discourse-Showcased-Categories
	Install Guide	How to install a theme or theme component

tpetrov · December 16, 2020, 7:41pm

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

4ong · December 17, 2020, 10:18am

Thanks, Jordan!
Looks really interesting!

Paracelsus · February 9, 2021, 9:08pm

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.

jordan.vidrine · April 23, 2021, 6:29pm

Thanks for the feedback here!

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.

A sidebar could be nice as well

jordan.vidrine · May 11, 2021, 5:51pm

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

Thanks for the suggestion.

Paracelsus · May 11, 2021, 6:08pm

Really great!! Will try and leave feedback.

Paracelsus · May 14, 2021, 11:47am

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.

tot · September 8, 2021, 9:32am

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?

jordan.vidrine · September 8, 2021, 5:11pm

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:

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

valsha · September 8, 2021, 5:56pm

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.

jordan.vidrine · September 8, 2021, 6:39pm

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.

valsha · September 9, 2021, 6:42am

Hi, can you post an example? Thank you.

dinoscool3 · September 20, 2021, 6:05pm

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?

jordan.vidrine · September 20, 2021, 6:14pm

Sure!

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

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

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

jordan.vidrine · September 20, 2021, 6:23pm

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:

Navigate to /admin/customize/themes and click on components
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:

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

Once that is done you can click edit CSS/HTML

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

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

dinoscool3 · September 20, 2021, 6:27pm

Thank you! Seems so simple now