XF 2.0 How to add a custom Group Badge to user info

Gator

Well-known member
I've been contacted twice recently via PM asking me how I added a custom Group Badge to the user info as seen on my website:

badge.webp

How to:

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://www.mywebsite.com/mybadge.png');
background-repeat: no-repeat;
background-position: center top;
padding-top:42px;
text-align: center top;
}

Then go to "Groups and Permissions > User Groups" and select the group you want to add a badge too.
Under User banner styling, check "Other, using custom CSS class name" and enter the name you gave it in the extra.less file as shown below:
NOTE: Be sure to remove the "." (dot) in front of the name as shown below:

2018-04-05_20-42-15.webp
 

Attachments

  • 2018-04-06_16-48-41.webp
    2018-04-06_16-48-41.webp
    11.3 KB · Views: 35
Last edited:
I have tried and tried to get the badges to display and still nothing. Been working on this for well over 2 weeks. I must be missing something somewhere.

Copied you code and changed the name to .owner and to the proper url, entered owner in the user banner styling and still nothing. If there a switch or setting I need to turn on here? I was using a rank addon in version 1 that workedke a charm.
 
I have tried and tried to get the badges to display and still nothing. Been working on this for well over 2 weeks. I must be missing something somewhere.

Copied you code and changed the name to .owner and to the proper url, entered owner in the user banner styling and still nothing. If there a switch or setting I need to turn on here? I was using a rank addon in version 1 that workedke a charm.
Send me a PM with your website address and screenshots of what you did and I will help you figure it out.
 
Top Bottom