FateKid
DEVIL DID IT
Status
offline
Posts
14,666
Likes
125,790
Resources
3,373
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.
The group ID will be displayed within the address bar when you click to edit the user group, like so:
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.
If you have multiple groups, the icon of the group with the highest priority will be displayed
The image/gif content you'd like to show should be inputted as a URL within the
Example:
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:
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);