Category badge adjustment component

[amotl (Andreas Motl)]

Motivation

Tweak the style of the category badges.

Background

This was spawned while working on implementing the Daemonite Material Theme 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

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 which is pretty straight on Material Design, but nevertheless we find this look more pleasant. Please enjoy it as a language dialect.

Screenshots

Before

After

Setup

Install

• Documentation: How do I install a Theme or Theme Component?
• Repository URL: https://github.com/ip-tools/discourse-category-badge-theme-component

Configure

Configuration is pretty straightforward.

[dax (Daniela)]

@amotl

Minor remark: This might belong into theme, but let’s just start it here as I’m not able to post there yet. Sorry for interrupting.

Now you can post on theme

[amotl (Andreas Motl)]

@dax

Now you can post on theme

Thank you so much and also for moving this already.

[amotl (Andreas Motl)]

The best experience we get from this is when combining it with some tweaks we applied on top of the vanilla Daemonite Material Theme. It’s basically about larger font sizes and element spacing. You can learn about the corresponding amendments at Daemonite Material Theme: Ample layout adjustments.

Before

After