Support How to edit the user groups to look like this?

[NEC0AT]

Hi, I’d like to make my user groups like this, anyone know the code?

 

[ZariotaLemu]

Play around with it

ACP >> Groups & permissions >> User groups >> Your User group​

Username CSS​

color: #fff;
background: linear-gradient(135deg, #3b82f6, #00f0ff);
padding: 4px 12px;
font-weight: 600;
display: inline-block;
position: relative;
text-transform: uppercase;
letter-spacing: 0.5px;

/* Flattened corners */
clip-path: polygon(
    8px 0%,
    100% 0%,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    0% 100%,
    0% 8px
);

/* Neon Glow */
box-shadow:
    0 0 6px #00f0ff,
    0 0 12px rgba(0, 240, 255, 0.6),
    0 0 18px rgba(59, 130, 246, 0.5);

/* Smooth edges */
transition: all 0.2s ease-in-out;

ACP >> Appearance >> Templates​

extra.less​

/* Admin (ID 3 Example) */
.username--style3:before {
    content: "👑 ";
}

/* Senior Mod (ID 4 Example) */
.username--style4:before {
    content: "🛡 ";
}

/* Expert */
.username--style7:before {
    content: "⚙ ";
}

/* Contributor */
.username--style8:before {
    content: "🏆 ";
}

Spoiler: Self-Hosted Icons (PNG / SVG)

Upload your icons here, for example:​

/styles/icons/crown.svg
/styles/icons/shield.svg
/styles/icons/cog.svg
/styles/icons/trophy.svg

extra.less​

/* =========================================
   SELF-HOSTED ICON VERSION
   This version loads SVG/PNG icons directly
   from your own server.
   ========================================= */

/* Administrator (Usergroup ID 3) */
.memberListLegend .username--style3::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    background: url('/styles/icons/crown.svg') no-repeat center;
    background-size: contain;
    vertical-align: middle;
}

/* Senior Moderator (Usergroup ID 4) */
.memberListLegend .username--style4::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    background: url('/styles/icons/shield.svg') no-repeat center;
    background-size: contain;
    vertical-align: middle;
}

/* Expert (Usergroup ID 7) */
.memberListLegend .username--style7::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    background: url('/styles/icons/cog.svg') no-repeat center;
    background-size: contain;
    vertical-align: middle;
}

/* Contributor (Usergroup ID 8) */
.memberListLegend .username--style8::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    background: url('/styles/icons/trophy.svg') no-repeat center;
    background-size: contain;
    vertical-align: middle;
}

Advantages

1. No external CDN
2. Full control
3. Perfect for custom neon SVG icons
4. Better performance with SVG

 

[roninhehe]

That’s awesome, I’ll use this idea as inspiration.
soflo wheelie life

 

[elijahhayde]

Looks like custom user group styling via CSS rather than a single “code” snippet. Are you using a specific XenForo theme or plugin, or just trying to style user group banners manually?

 

[Ziddie]

Hi, I’d like to make my user groups like this, anyone know the code?View attachment 18294

You can right-click the particular group and pick " Inspect " to open Dev tools and check the assigned CSS styling to it.