Category Badge Styles

[Discourse]

	Summary	Category Badge Styles replaces the functionality of the deprecated category_style admin setting
	Preview	Preview on Discourse Theme Creator (box) Preview on Discourse Theme Creator (bar)
	Repository	https://github.com/discourse/discourse-category-badge-styles
	Install Guide	How to install a theme or theme component

Install this theme component

As this is an official theme component maintained by the Discourse team, support, bug, ux, and feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started.

 Support  Bug  UX  Feature

Features

With the changes to the category_style admin setting, the ability to set the category badge style to be box, bar, or none has been moved to this theme component. You can read more about that change here:

Moving to a Single Category Style Site Setting

Discourse updates made 2023-11-13T05:00:00Z (UTC) or later will include this change. In an effort to unify how categories are styled in the UI, such as in the sidebar or when mentioning a category in chat or in a post, we are removing the non-default category styles from the category_style site settings and ultimately removing this setting entirely. For those of you already using the default (bullet) category style, no action is required. For those …

Examples

Settings

Only a single simple one for this:

Name	Description
category badge style	The desired style of the category badges

Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-16T17:41:30Z

Check document

Perform check on document:

[AstonJ]

Just switched to this and have managed to get most of my styling back, however is it possible to add #color: FOREGROUND-COLOUR to the style attribute please?

So this:

Style Attribute {
--category-badge-color: #0;
--category-badge-text-color: #865ac9;
}

Would end up like this:

Style Attribute {
--category-badge-color: #0;
--category-badge-text-color: #865ac9;
color: #865ac9;
}

And so like this:

(Or is it possible for me to do this locally just on my install?)

[Jagster (Jakke Lehtonen)]

Just another friendly remainder, but if this component is in use, and the badge style is nothing, it will hide all new style category icons.