Profile Enhancements - Personal User Badges

This is something I came up with for a site I help manage. It gives users the option to set a custom badge that is displayed in the postbit_legacy. Sorry if I got the prefix wrong, I couldn't think which one this best belonged in.

Anyway, this is going to take advantage of template modification and profile field creation.

So, for starters, we're going to make the profile field that will be used for the badges. Open up your ACP and click on 'Add New User Profile Field'. Select 'Single-Line Text Box'. Title 'Personal User Badge'. Description can be whatever. Put it in the appropriate Profile Field Category.

Leave the default value blank. Make sure the field length is high, I use 100. That's for long image links. Set field length to 50. Don't mess with display order. Make sure field required is set to no. Field editable by user should be set to yes. Private field should be set to yes. This makes it so users can't see each others links. It makes the profile page look bad. Staff will still be able to see the links.

Field searchable on members list and show on members list should both be set to no. That's it, now click save. You should be redirected to the profile field manager.

When finished, it should look something like this when you click on edit:


Take note in the field manager of the 'name' column. This is important and will be needed later on. Find the 'name' for the newly created profile field.

Next your going to want to open your master style so this template edit will inherit. If it will not inherit you will have to add this manually to each individual style.

Find and open the template: postbit_legacy

Find this code:

<dl class="userinfo_extra">

You're going to want to place this before the closing tag:

<vb:if condition="$post['fieldxx']"><p style="text-align:center; margin-top:3px;"><img src="{vb:raw post.fieldxx}" alt="Badge" width="180" height="26"></p></vb:if>

So it will look like this:

<dl class="userinfo_extra">
    *stuff that's already here*
    <vb:if condition="$post['fieldxx']"><p style="text-align:center; margin-top:3px;"><img src="{vb:raw post.fieldxx}" alt="Badge" width="180" height="26"></p></vb:if>
</dl>

Now take the 'name' mentioned earlier. Replace the red text with that. Save your template and you're done!! Users can now add their own personal badges. Resolution is 180x26 by default. If you'd like to change that simply edit the green portions of the code.

If this receives enough attention I'll update with the personal links option. This allows users to set a link for their badges so that when users click on the image they'll be redirected.

EDIT: Here's a demo site.

I've directed you to a post by me. As you can see there are two badges. I used this feature to make one for staff only. That's how it will appear though.

EDIT2: Here's a screen capture of what it would look like for those of you who don't or can't view the demo site.

[Jordan S Smith]

Reserved.

[K4GAP]

Demo or images?

[Jordan S Smith]

Originally Posted by GaryT

Demo or images?

Sorry about that. I've added the demo link.

[Skyrider]

Demo's tend to go down in the future though (like the demo is down now), would be nice to show images in the main post uploaded on vbulletin.

[Amaury]

Originally Posted by FF|Skyrider

Demo's tend to go down in the future though (like the demo is down now), would be nice to show images in the main post uploaded on vbulletin.

The site's working fine.

[STR8H8TEx]

down for me

[Amaury]

Originally Posted by STR8H8TEx

down for me

Well, it's working here.

It's most likely just you, so check and see what Down for Everyone or Just Me says.

[Jordan S Smith]

Once again, I have updated the OP. This time with a screen of how the modification would appear. Note, there are two in this screen because I used it twice. If you only want one, that's what this modification will give you. Lest you have the ingenuity to figure out how to place two within the postbit.

The link is not solely a demo site. It is an actual live forum. The site is currently working, I see no issues. As Amaury said, check to make sure that it's not something wrong on your end. I uploaded the image anyway for ease of access.

If you have any more issues viewing what this modification would look like, you'll have to try it out and see because I don't have any more options. I'm afraid anything short of a youtube video will not do any better.

Any further questions, please do not be afraid to PM me instead of flooding the thread with questions about what it looks like. If you do run into a problem using the modification, however, feel free to post in the thread.

Thank you.

[xFuZioNx]

I know this may not be about this mod but can you tell me what size your avatars are for the unicorn? also can you tell me what mod you used for the online on that posts its pink and all that information, and what award system do you use?