How To Create Custom User Group Icons for XenForo

FateKid

DEVIL DID IT

Status

offline

Posts

14,666

Likes

125,790

Resources

3,373

Bits Credits

363

Admin

LEVEL

11

5,910 XP

Hello everyone,
Since many users have reached out to try and receive explanations of various customizations around our community, I've deciced to write up a quick tutorial on how to enable custom user group icons in front of your group names.

This modification is pretty simple since there is no need for custom-template syntax (JS/jQuery) to achieve these results.


1. Finding Your Group IDs​

The first thing you need to do is check which IDs are specific for your user groups. You can do this by viewing the user group from your AdminCP.
The group ID will be displayed within the address bar when you click to edit the user group, like so:

8dce2e0d465f111076b793a536b7308a.png


My Administration group ID is equal to 3
Once you've found your user group IDs, write them down and continue on with the tutorial.

2. Creating & Enabling Custom CSS​

Each group ID will need specific styling in order to achieve placing the custom icon in front of the username.
If you have multiple groups, the icon of the group with the highest priority will be displayed

CSS:
/* ====== CUSTOM USERNAME ICONS ====== */
.username--style1::before { /* Unregistered icon */
    background: url(https://google.com/ThisIsAnExampleImage.png);
    width: 20px;
    height: 20px;
    content: "";
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    display: inline-block;
    margin-right: 1px;
}
.username--style2::before { /* Member icon */
    background: url();
    width: 20px;
    height: 20px;
    content: "";
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    display: inline-block;
    margin-right: 1px;
}
.username--style3::before { /* Administration icon */
    background: url();
    width: 20px;
    height: 20px;
    content: "";
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    display: inline-block;
    margin-right: 1px;
}
/* ====== END CUSTOM USERNAME ICONS ====== */

The image/gif content you'd like to show should be inputted as a URL within the background: url(); key for each styling property.
Example: background: url(https://google.com/ThisIsAnExampleImage.png);
 

Latest threads

Forum statistics

Threads
53,902
Messages
83,938
Members
50,510
Latest member
adiel8
Top Bottom