# Category badge adjustment component

**URL:** <https://meta.discourse.org/t/category-badge-adjustment-component/106366>\
**Category:** Theme component\
**Created:** [1월 12, 2019, 6:29오후 UTC](https://meta.discourse.org/t/category-badge-adjustment-component/106366 "2019-01-12T18:29:43Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![amotl](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/amotl/32/109873_2.png) [@amotl](https://meta.discourse.org/u/amotl)\
**Post date:** [1월 12, 2019, 6:29오후 UTC](https://meta.discourse.org/t/category-badge-adjustment-component/106366/1 "2019-01-12T18:29:43Z")

</div>

## Motivation

Tweak the style of the category badges.

## Background

This was spawned while working on implementing the [Daemonite Material Theme](https://meta.discourse.org/t/daemonite-material-theme/64521) on another Discourse instance the other day. While it’s only a pretty minor amendment to CSS, we just wrapped it up, added appropriate settings and packaged it.

[https://github.com/ip-tools/discourse-category-badge-theme-component](https://github.com/ip-tools/discourse-category-badge-theme-component)

## Features

- Optionally adjust `border-radius` css attribute of category badges  
to give them a more flat / less globular appearance.
- Optionally prevent shrinked badges on e.g. `/latest`.
- Optionally emphasize category label.

**Note** : We know this style might deviate from the official [Google Material Design language](https://en.wikipedia.org/wiki/Material_Design) which is pretty straight on [Material Design](https://material.io/design/components/chips.html), but nevertheless we find this look more pleasant. Please enjoy it as a language dialect.

## Screenshots

### Before

![image](https://global.discourse-cdn.com/meta/original/3X/0/a/0a73aec62ca1c53aca9aaafba3450b7ff99b1977.png) ![image](https://global.discourse-cdn.com/meta/original/3X/a/d/adbe14b5a53ed8d1cdfeab5dd858ad7a8cf7f280.png)

### After

![image](https://global.discourse-cdn.com/meta/original/3X/0/e/0ef28f3c081d31e5aefbc5411636b62701133b95.png) ![image](https://global.discourse-cdn.com/meta/original/3X/8/9/89733a833df9ddcb1c30d05e6a1324d53e57de9b.png)

## Setup

### Install

- **Documentation** : [Installing a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)
- **Repository URL** : `https://github.com/ip-tools/discourse-category-badge-theme-component`

### Configure

 ![image](https://global.discourse-cdn.com/meta/original/3X/3/6/36476bdecd138dd9ff524105cf6d1681f6ff9a7f.png)  
Configuration is pretty straightforward.

---

_[View the full topic](https://meta.discourse.org/t/category-badge-adjustment-component/106366)._