Category Highlighter

[angus (Angus McLeod)]

This theme component lets you highlight a category (or categories) in your Discourse. You can:

1. Give specific categories a special background style
2. Add a category link to the header with the same special style

An example use case is for a category with “Premium” content.

How to install

Get the code

---

Category Navigation and Header Label

Topic List	Site Menu

Categories page

Configuration

The category highlighter theme component has one main setting “highlight categories”. You’ll find this setting in the Category Highlighter theme component setting panel.

Each category you want to highlight has its own list item in this setting. The format of each item is:

category_slug~background~text_color~header_label~header_label_mobile~parent_slug~alternate_link

An example of this format is:

premium~linear-gradient(319deg, #cdedfd 0%, #ffec82 37%, #ffcfd2 100%)~#88562e~:star:&nbsp&nbspPremium~:star:

There are six possible values, each separated by ~ (a “tilde”). Let’s go through each value in turn.

Category Slug

This is the “slug” of the category you want to highlight. You can find it in your category settings.

If you need to highlight a sub-category, you need to use the “Parent” category slug, then the sub-category slug separated by a /.

For example, if there was a sub-category of premium with the slug videos that I wanted to highlight, I would use:

premium/videos

Permissions

Note that only those users who have read permissions for the highlighted category will see the highlights, including the header label. You can change your category permissions in the category “Security” settings.

Background

This is a value that will be given to the background css property of the category badge. You can use any entry here that that property supports.

background - CSS: Cascading Style Sheets | MDN

The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.

For example linear-gradient(319deg, #cdedfd 0%, #ffec82 37%, #ffcfd2 100%).

Text Color

This is a value that will be given to the color css property of the category badge. This affects the color of the text. You can use any entry here that that property supports

color - CSS: Cascading Style Sheets | MDN

The color CSS property sets the foreground color value of an element’s text and text decorations, and sets the currentcolor value. currentcolor may be used as an indirect value on other properties and is the default for other color properties, such…

In our example case this is #88562e.

Header Label

This value serves two purposes. It determines:

1. whether the highlighted category will get a header label; and
2. the contents of that label.

If you don’t want a header label, don’t include this value at all.

This value supports text, html entities and emoji.

The header label value here is: :star:&nbsp&nbspPremium. Thats:

1. The shortcode for the star emoji: :star:
2. Two non breaking space html entities (these each add a white space): &nbsp&nbsp
3. Our label text: Premium

You can find full list of emoji shortcodes here, and a full list of html entities here.

Mobile Header Label

This value also serves two purposes. It determines:

1. whether the highlighted category will get a mobile header label; and
2. the contents of the mobile header label.

The usage and formatting is the same as the Header label. One thing to note here is that you have less space on mobile, so it might be prudent to just use an emoji, or a short word to save space.

Parent Category

You can create a dropdown in the header by setting the “parent” of an item. Insert a category slug as the sixth item and the relevant item will become a sub-menu item of that category in the header. As with the first item, make sure you use the category slug here, which you can retrieve from the category settings modal.

Alternate Link

By default each category item links to the category it relates to. You can change the link by adding a url as the sixth item in the setting block.

[jrgong]

So simple, yet so impactful. I have had the plan for a while to CSS certain parts of the forum to highlight posts from the paid customer categories. That makes everything much easier now. Thx for the work, this is amazing!

Have you thought about highlighting topics in the topic list when all categories are active in the category picker? For example add the star before the topic title?

[angus (Angus McLeod)]

The highlight works in all places the badge appears, so it’s there in the list already

Topic List	Site Menu

Categories page

See further https://try.thepavilion.io

[outofthebox (Carson)]

@Angus, you’re an amazing developer and it is a tremendous pleasure to collaborate with you. Thank you for your creativity, excellence, and thoroughness. You are a gift to the Discourse community.

[jordan-vidrine]

This is a pretty cool component, nice work

[codinghorror (Jeff Atwood)]

ooo that feels so… preeemium

[Anatolia]

@angus

I thought there is a sidebar at first glance. A sidebar with this style could be nice.

[Paracelsus]

Great component, really nice.

@angus I would like to know how to put a border-radius on the highlighted background, thanks in advance.

[angus (Angus McLeod)]

@Paracelsus

I would like to know how to put a border-radius on the highlighted background, thanks in advance.

Due to the variety of contexts the category badge appears in this is a little complex. I might add a class to make this a bit easier, but for now you can do this:

### Header button
.highlight-category-button {
    border-radius: 4px;
}

### Badges
.badge-wrapper[class*=" updates "],
.extra-info-wrapper .categories-wrapper .badge-wrapper[class*=" updates "],
.category-title-link-component[class*=" updates "] .category-text-title,
.select-kit.combo-box.category-drop .category-row[class*=" updates "] .badge-wrapper {
    &:before {
        border-radius: 4px;
    }
}

“updates” is the category slug in the example

Example: https://try.thepavilion.io/

[fzngagan (Faizaan Gagan)]

The component now supports a category dropdown.

If you use the parent category slug as the 6th item in the settings, it’ll will show a dropdown with the child categories as the dropdown items.

Note: You will have to pass the 5th item i.e. (Header label mobile ) as empty if you don’t want to use it.

Thanks for sponsoring this @outofthebox .

[outofthebox (Carson)]

Great work @fzngagan!! The Pavilion team is stellar.

[matenauta]

Could be possible to highlight not only the slug, but .select-kit .select-kit-row.is-highlighted?

It could be better for our eyes, I think.

I agree with comments: your work is awesome. I was looking into Pavilion site and I’m testing a lot of stuff.

I’ll hope that we work soon on some ideas that we have for our community

[MarcP]

First of all thanks for this awesome component.

@angus

Topic List

I think this would look better if these was a little more whitespace between topic title and category badge in topic list view. Can this be achieved within the component? It seems the boxed are a little bit bigger than default boxed view, it creates a painful view to some perfectionists, lol.

Mobile view is better then desktop view:

[jrgong]

Is this one still working with latest tests-passed? If yes, do you still have the documentation archived somewhere? @angus

[angus (Angus McLeod)]

I’ve pasted the documentation in the OP above. Let me know if it’s not working.

[jrgong]

Awesome! Especially the gradient part was crucial to achieve my goal! Thank you so much!

[jrgong]

Is anyone still using this TC and maybe found a solution for the following issue?
On 2.9.0.beta9 and beta10 the TC causes the system category meta to disappear from category dropdown field as well as topic list.

Forum log is empty, only thing in console log is:

[THEME 190 'Category Highlighter'] To prevent errors in tests, add a `pluginId` key to your `modifyClass` call. This will ensure the modification is only applied once. 3 plugin-api.js:19