XenForo Tutorials
Personal User badge
Submitted by Oxygen, 23-12-2015, 01:40 PM, Thread ID: 16049
Thread Closed
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:
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:
Add this directly after on a new line:
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:
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:
Put this in front of it:
Put this after it:
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:
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:
With:
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.
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:
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 -->
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>
This is the end result:
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">
Code:
<a href="{xen:link full:members, $user}">
Code:
</a>
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:
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}">
Code:
<a href="{$user.customFields.badge_link}">
Users browsing this thread: 1 Guest(s)