XenForo Tutorials

Personal User badge

Submitted by Oxygen, , Thread ID: 16049

Thread Closed
23-12-2015, 01:40 PM
#1
This little modification will allow for personal user badges, not just defined by usergroup. Users will be allowed to choose their own badge, via the userCP, by using a link to any image hosting site, like Photobucket. Badges will be displayed in forum posts under the username and user title, and in personal conversations.

You have the option to either set it to allow users to change their badge at any time, or set it so it can only be changed once.

Either way, you will be able to change or remove the image at any time via the ACP by simply viewing the users 'preferences'.

~~~~~~~~~~~~~~~~

First things first, you're going to have to set up the custom user field. To do this, enter the ACP -> Users -> Custom User Fields -> Create New Field

Then simply set it up like so:

[Image: eba2cd828330c26ece4f8ebc03eb93d9.png]


The description can be set to whatever you like. Resolutions can be changed later on.

After that, click on the General Options tab. Make sure 'User editable' is checked. It's optional to allow constant changes or a one time change by checking 'Editable only once'.

You can go ahead and save the field.

Now to actually get the badge to show in thread posts.

Go to Appearance -> Templates -> Find and open 'message_user_info'

Now you'll need to find:

Code:
<!-- slot: message_user_info_text -->
Add this directly after on a new line:

Code:
<xen:if is="{$user.customFields.user_badge}">
<div align="center" style="padding-top: 5px;">
<img src="{$user.customFields.user_badge}" alt="User Badge" width="140" height="20">
</xen:if>
These following portions are changeable. 'User Badge' is just an alternate for the image, you can change to whatever you like. Width and height will have to be defined as per your needs. The resolution shown is to match the large avatars I use. If you're using standard XenForo avatar sizes, you should use around 100 to 120 pixels for the width. Height is optional, I personally think 20 pixels is large enough.

This is the end result:
[Image: 85ac51416fc7575aa8ed544de99a41fe.png]


This modification was created by tweaking the YouTube on Profile Page modification by Sheldon.

Enjoy! ^^

EDIT: If, for any reason, you'd like to link that image to the users profile, you'll need to do this.

Find:

Code:
<img src="{$user.customFields.user_badge}" alt="User Badge" width="140" height="20">
Put this in front of it:

Code:
<a href="{xen:link full:members, $user}">
Put this after it:

Code:
</a>
Viola! Links directly to the posters profile.

EDIT #2: Just for kicks, I got to thinking how fun it might be to have the link be custom, instead of just pointing to your profile. Well, with some more custom profile field fun, I did just that.

Set up another custom profile field, like so:
[Image: e167359017dabcad2792cdbb8a8f3806.png]


Once you've done that, go back to the link you put in for the badge. If you haven't already, and want to now, just use this instead:

Replace:
Code:
<a href="{xen:link full:members, $user}">
With:

Code:
<a href="{$user.customFields.badge_link}">
That will allow users to set their own links via the UCP. Again, you can choose whether you want this to be a permanent option or a one time deal.
[Image: UeTXrZ5.png]

RE: Personal User badge

#2
thank you my friend i need 15 post for download!

RE: Personal User badge

#3
Thanks for this tutorial! will be implimenting on my forum shortly

RE: Personal User badge

#4
Awesome tutorial, implemented onto my forums so easy!

RE: Personal User badge

#5
Mk just posting so I can get a dl lmao GG No ReMk just posting so I can get a dl lmao GG No Re

RE: Personal User badge

#6
23-12-2015, 01:40 PM
Oxyge Wrote:
This modification was created by tweaking the YouTube on Profile Page modification by Sheldon.

Link didn't working for me :(. Please change to new link.
[Image: 76561198166476726.png]

Users browsing this thread: 2 Guest(s)