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.

Only users who can see the category will see the highlights, including the header link. An example use case is for a category with “Premium” content.

:wrench: How to install

:computer: Get the code

:framed_picture: Example

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.

Screenshot at Apr 17 15-49-00

In our example case this is premium.

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:

In our example case this is linear-gradient(319deg, #cdedfd 0%, #ffec82 37%, #ffcfd2 100%). This produces the multi-coloured pastel background you see in the example:

Screen Shot 2020-04-17 at 3.40.15 PM

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

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. We can see what that looks like with our example case:

Screen Shot 2020-04-17 at 3.40.15 PM

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.

In our example, we just used a star emoji:

Screen Shot 2020-04-17 at 4.03.21 PM

Parent Category

You can create a dropdown in the header by setting the “parent” of an item. Insert a category slug as the fifth 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.

2 Likes