[Tutorial] CSS Gradient for Specific Flarum Tag By Wellwisher

Wellwisher

🎨 [Tutorial] CSS Gradient for Specific Flarum Tag by Wellwisher

Here's what you'll achieve in 2 mins or less:

If you want to apply a unique style, like a gradient, to just one tag (e.g., your "Music" tag) without affecting others, standard Flarum CSS often fails because the platform applies colors via inline styles or highly specific selectors.

This tutorial uses the modern :has() CSS selector combined with the tag's unique FontAwesome icon to achieve the gradient .

Prerequisites

This solution assumes:

You have assigned a unique Font Awesome icon to your tag (e.g., fa-headphones to the tag #Music).
Your forum users use modern browsers (as this utilizes the highly-compatible :has() selector).

Step 1: Target the Tag Container and Apply the Gradient

We use the :has(.fa-headphones) selector to tell the browser: "Find the .TagLabel element, but only if it contains the headphones icon." This is the highest specificity we can achieve without relying on hard-to-find numeric IDs or problematic JavaScript.

Paste this code into your Flarum Admin Panel's Custom CSS section:

/* 1. Target the main tag container (for background) */
/* The :has(.fa-headphones) makes this selector unique to e.g the "Music" tag */
.TagLabel.colored.text-contrast--dark:has(.fa-headphones) {
  background: linear-gradient(45deg,
    #feda75,
    #fa7e1e,
    #d62976,
    #962fbf,
    #4f5bd5
  ) !important;
  border: none !important; /* Removes any default tag border color */
}

Step 2: Fix the Text and Icon Color (optional based on your gradient/ font colour choices)

Because Flarum is designed to keep the text color black for contrast (since the tag's original background was light), we must manually apply white to the text and icon elements that are nested inside the tag.

/* 2. Target the tag name text specifically and force white color */
.TagLabel.colored.text-contrast--dark:has(.fa-headphones) .TagLabel-name {
  color: #fff !important;
}

/* 3. Target the icon specifically and force white color */
.TagLabel.colored.text-contrast--dark:has(.fa-headphones) .TagLabel-icon {
  color: #fff !important;
  margin-right: 0.35em; /* Includes the original spacing fix */
}