Category Highlighter

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.

:wrench: How to install

:computer: Get the code

:page_facing_up: Read the documentation

:framed_picture: See a live example


Category Navigation and Header Label

Topic List Site Menu
site_menu

Categories page

A big thanks to @outofthebox for sponsoring this work, and being such a patient and conscientious client.

The Configuration Documentation contains a fair bit of detail on how to use this theme component successfully, so make sure you check that out first if you have any questions.

18 Likes

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?

2 Likes

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

Topic List Site Menu
site_menu

Categories page

See further https://try.thepavilion.io

4 Likes

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

3 Likes

This is a pretty cool component, nice work :+1:

7 Likes

ooo that feels so… :sparkles: preeemium

9 Likes

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

Great component, really nice. :+1:

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

1 Like

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/

1 Like