How to add a Custom Group Badge / Banner to User Info

xF2 How to add a Custom Group Badge / Banner to User Info

  • Be sure to use a real e-mail address when joining this site because you will need to comfirm your e-mail address to have your account activated. If you are using a disposable email address, your account will be deleted from our site.
  • Welcome xFWarez Members do not make another account your old logins will work. If you have any issues please contact a member of our staff and we will sort them.
  • Downloading from our site will require you to have a paid membership. Upgrade to a Premium Membership today!

    Dont forget read our Rules! Also anyone caught Sharing this content will be banned. By using this site you are agreeing to our rules so read them. Saying I did not know is simply not an excuse! You have been warned.

  • If we find you sharing Premium resources or Free Resources or any content on this site anywhere else you will be permanently banned and no refund will be issued! So don't do it! We are striving to be the number one Forum Network and Leeching just hurts it for everyone! This content is only intended for personal use and not to be repackaged or resold. If you are caught sharing our content to other sites you are forfeiting your membership and will be banned. Also creating muliple accounts is a bannable offense if you are caught using more than one username you will be banned on all usernames.

Heisenberg

Administrator
Staff member
Administrator
Moderator
Platinum
xenForo 2.x.x
xenForo 1.x.x
Contributor
vBulletin All Access Pass
The Chest
Verified
Ultra Platinum VIP
Platinum VIP
Gold VIP
Silver VIP
Bronze VIP
Member
Jul 17, 2005
17,372
1,160
113
Heisenberg submitted a new resource:

- Just a short tutorial on how to add a custom user group badge/banner to the user info area

How to add a custom Group Badge / Banner to User Info:



Go to: AdminCP > Appearance > Templates > and search for the "extra.less" file
Open the file and add this code (Call it anything you want. In the example here, I called it ".mybadge" ):

.mybadge {
background-image: url('https:// ');
background-repeat...
 

Heisenberg

Administrator
Staff member
Administrator
Moderator
Platinum
xenForo 2.x.x
xenForo 1.x.x
Contributor
vBulletin All Access Pass
The Chest
Verified
Ultra Platinum VIP
Platinum VIP
Gold VIP
Silver VIP
Bronze VIP
Member
Jul 17, 2005
17,372
1,160
113
Heisenberg updated with a new update entry:



Just as the title implies...
 

Heisenberg

Administrator
Staff member
Administrator
Moderator
Platinum
xenForo 2.x.x
xenForo 1.x.x
Contributor
vBulletin All Access Pass
The Chest
Verified
Ultra Platinum VIP
Platinum VIP
Gold VIP
Silver VIP
Bronze VIP
Member
Jul 17, 2005
17,372
1,160
113
Heisenberg updated with a new update entry:



 

Heisenberg

Administrator
Staff member
Administrator
Moderator
Platinum
xenForo 2.x.x
xenForo 1.x.x
Contributor
vBulletin All Access Pass
The Chest
Verified
Ultra Platinum VIP
Platinum VIP
Gold VIP
Silver VIP
Bronze VIP
Member
Jul 17, 2005
17,372
1,160
113
Resource updated with a new update entry:



Simplified the code and added explanations on how to position and resize.
Also added two options for mobile view:

Option #1 for mobile view - Remove background image but leave group name
Option #2 for mobile view - Keep background image but resize it
 

Heisenberg

Administrator
Staff member
Administrator
Moderator
Platinum
xenForo 2.x.x
xenForo 1.x.x
Contributor
vBulletin All Access Pass
The Chest
Verified
Ultra Platinum VIP
Platinum VIP
Gold VIP
Silver VIP
Bronze VIP
Member
Jul 17, 2005
17,372
1,160
113
Resource updated with a new update entry:



I found several sizing and alignment issues with the last update and had to fix them.
I would recommend using this code instead.