🠔

V2.1 user-badges.css

Description

This code snippet allows you to add little badges after peoples username.
You can also add prefixed to their username or add emojis to the badges.

Features

Sceenshots

Screenshot - Preview

Before Before
After After

Installation

Quick Setup

Add @import url("https://anzuftnw.github.io/files/user-badges.css"); into the custom css box inside your app settings and press submit.

tutorial image

Then add the following code below it, change the options to your liking and press submit: 

/* badges */
.header > .name:after {content: "Visitor";}                                 /* badge for everyone */
.header > a[href="/user/Anzu/"].name:before {content: "Mr.";}               /* prefix for user anzu */
.header > a[href="/user/Anzu/"].name:after {content: "Certified Nerd 📚";}  /* badge for user anzu */

/* settings */
:root {
  --badge-background: rgb(var(--color-background));                         /* background color */
  --badge-color: rgb(var(--color-text));                                    /* text color */
  --badge-rounding: 3px;                                                    /* corner rounding */
  --badge-font: Overpass;                                                   /* font */
}
tutorial image

Customize

If you want more freedom and disable or modify some of the things this code snippet does you probably already know how to do so. Copy the contents of user-badges.css into your custom css box or a seperat file and get started.

Changelog