This theme component lets you highlight a category (or categories) in your Discourse. You can:
- Give specific categories a special background style
- 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 codeCategory Navigation and Header Label
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:  Premium~: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:
- whether the highlighted category will get a header label; and
- 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:  Premium. Thats:
- The shortcode for the star emoji:
:star: - Two non breaking space html entities (these each add a white space):
   - 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:
- whether the highlighted category will get a mobile header label; and
- 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.
preeemium
