Resource icon

XenForo 1 XenForo: Social Icons in Postbit

Learned this little tip from Klaudius at AdminExtra. Big thanks to him for allowing me to post this.


SETTING UP USERFIELD
First, navigate to AdminCP ---> Users ---> Custom User Fields
View attachment 460

Once going inside, you will see all the "contact" information:
View attachment 461

To make this easy, we can use Facebook, since it is a default one. Click on Facebook, and go to the "General Options" tab. This is where each one you set up will be changed.
View attachment 462

As you can see, the "Viewable in message user info" is now checked, as well as some HTML added. This is the HTML code for Facebook:

HTML:
<a href="http://www.facebook.com/{$valueUrl}" target="_blank"><img src=" YOUR IMAGE LOCATION" alt="Facebook Profile"/></a>

TEMPLATE MODIFICATION

You can do this with TMS, or without, it doesn't matter. Open your template message_user_info

Find and REMOVE:
Code:
{xen:helper userFieldTitle, $fieldId}:

For TMS, in Search field, enter this:
Code:
<dl class="pairsInline userField_{$fieldId}">
								<dt>{xen:helper userFieldTitle, $fieldId}:</dt>
								<dd><xen:contentcheck>{xen:helper userFieldValue, $fieldInfo, $user, {$user.customFields.{$fieldId}}}</xen:contentcheck></dd>

In Replace field, enter this:
Code:
<dl class="pairsInline userField_{$fieldId}">
								<dt></dt>
								<dd><xen:contentcheck>{xen:helper userFieldValue, $fieldInfo, $user, {$user.customFields.{$fieldId}}}</xen:contentcheck></dd>

Go to extra.css

Add:
Code:
.messageUserBlock .userField_facebook, .userField_twitter, .userField_Youtube  {
				float: left !important;
				margin-top: 12px !important;
				margin-right: -1px !important;
}

*Note, this may or may not have to change, depending on icons used, size of icons, size of postbit, etc....

Once you are finished adjusting your css and adding your icons to suit your needs, you will then be able to enter your information in the "Contact Details" area. http://www.awalkerbit.me/account/contact-details
View attachment 463


Once you have added your identities on your postbit, you will now see this (these are my icons, they will not be released). Once you click on the ribbon, it would open that social site:
View attachment 464

And on your profile page, it will appear like this:
View attachment 463

If you need help figuring out what url to have in the html field, feel free to ask here. I will help with what I can.

Oh. Important. Make sure you go into

Style Properties --->Message Elements ---> CHECK THE BOX "Show custom user fields"
  • social1.png
    social1.png
    3.1 KB · Views: 54
  • social2.png
    social2.png
    4.7 KB · Views: 61
  • social3.png
    social3.png
    16.9 KB · Views: 59
  • social4.png
    social4.png
    21.9 KB · Views: 57
  • social5.png
    social5.png
    10.6 KB · Views: 55
  • social6.png
    social6.png
    41.8 KB · Views: 54
Author
Sheldon
Views
192
First release
Last update
Rating
0.00 star(s) 0 ratings
Back
Top