XF 2.0 XF2 Usergroup Badges?

[Trueprime]

Hi I am new to Xenforo and especially XF2.I want to setup my own badges per usergroup,how can I accomplish this? Is there an addon or what route to do? Any help on this I will really appreciate it,thanks

 

[KensonPlays]

What do you mean exactly? Custom badge styling? That’s built in. Set the ‘css class’ for said group, upload the badge somewhere, then reference it in CSS. (On mobile, I think the file is Extra.less)

Edit: Correction by @yoloswaggerino - Thanks! (Am on Mobile)

 

[S Thomas]

extra.less

 

[Trueprime]

Hey thanks,i wasn't sure on that as I am new to Xenforo2. I will try those methods.Yea I was just trying to make my own personal badges for usergroups to distinct them so they look special,especially for some paid usergroups.Ok I will give this a go,thank you guys for your information on this

 

[KensonPlays]

Hey thanks,i wasn't sure on that as I am new to Xenforo2. I will try those methods.Yea I was just trying to make my own personal badges for usergroups to distinct them so they look special,especially for some paid usergroups.Ok I will give this a go,thank you guys for your information on this

Glad to help! I went so far as to make a custom badge for every single role (10-12 of them) cause I have a theme I want across all my different avenues.

 

[Trueprime]

@KensonPlays hey you mind if i can see how u made yours?I'm just curious because this is awesome

 

[KensonPlays]

@KensonPlays hey you mind if i can see how u made yours?I'm just curious because this is awesome

Sure, if you want you can check out my site (link in signature).

There isn't too much content yet as the forum has only been around for a couple months, but check out any post you want.

 

[Trueprime]

@KensonPlays thanks

 

[KensonPlays]

@KensonPlays thanks

Anytime! Love to help.

 

[Trueprime]

Is there any example of the css coding for this,or any guide? I either have a brainfart or just not understanding this yet. Any help on this will be much appreciated, thanks

 

[S Thomas]

Go to /admin.php?user-groups/, select the group, for example admin.
User banner text: your text for the badge
User banner styling: Other, using custom CSS class name
Type in a extra class name, for example admin-badge
Go to extra.less, add

.admin-badge {

}

and your css within that. Do this for every group you wish to.

 

[Trueprime]

@yoloswaggerino thanks mate! I really appreciate your help. I will try that

 

[Trueprime]

ok I understand that format, so for the other css customization should I use

background: url(https://mysite.com/images/adminbadge.png);

This will link to the badge image?

 

[Trueprime]

Let me rephrase this

.admin-badge {
    background: url(https://mysite.com/images/adminbadge.png);
}

this will go into the extra.less to display my badge?

 

[KensonPlays]

Yes. Then set that ranks CSS class to admin-badge.

 

[Trueprime]

Finally got it to work wew!

 

[Trueprime]

I used this in extra.less from @Gator suggestion

.admin-badge {
background-image: url('https://mysite.com/badges/admin.png');
background-repeat: no-repeat;
background-position: center top;
padding-top:42px;
text-align: center top;
}

And in the edit usergroup area I clicked Other, using custom CSS class name like @yoloswaggerino mentioned and instead of putting the . I just put admin-badge in that section. This works and thank all of you for your help! I will just play with my sizing a little to get my preferred result

 

[Trueprime]

@KensonPlays thanks again for that mention. That worked! I dropped the . and just input the name like you said I will do this for every other user group ranks I want to make badges for

 

[KensonPlays]

@KensonPlays thanks again for that mention. That worked! I dropped the . and just input the name like you said I will do this for every other user group ranks I want to make badges for

Just happy to be of assistance!

 

[Trueprime]

You guys certainly were helpful. I was searching and searching for answers and bam you guys provided everything I needed.Big thanks again!