XenForo XenForo: Social Icons in Postbit

[Sheldon]

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:

<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:

{xen:helper userFieldTitle, $fieldId}:

For TMS, in Search field, enter this:

<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:

<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:

.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"

 

[Dante_B]

How come my icons are not in the userblock? I followed the instructions correctly and placed the css into my extra.css.

 

[Sheldon]

It might have something to do with your theme. Not all themes are the same.

What theme are you using by chance?

 

[Dante_B]

I am using the Aurora theme

 

[Sheldon]

.pairsInline.userField_googleplus > dt {
	display: none !important;
	float: left;
}
 
.pairsInline.userField_instagram > dt {
	display: none !important;
}
 
.pairsInline.userField_twitter > dt {
	display: none !important;
}
 
.pairsInline.userField_facebook > dt {
	display: none !important;
}
 
.pairsInline.userField_facebook img {
	max-width: 22px !important;
}
 
.pairsInline.userField_twitter img {
	max-width: 22px !important;
}
 
.pairsInline.userField_googleplus img {
	max-width: 22px !important;
}
 
.pairsInline.userField_instagram img {
	max-width: 22px !important;
 
}

That is my CSS from here... but you have to change a couple things. With access, I might be able to get it to work...

 

[Dante_B]

And that css is in your extra.css?

 

[Sheldon]

And that css is in your extra.css?

Yes, but I also have it set to show custom profile fields in the Style Properties area...

 

[Maggot]

MIne are showing up one on top of the other :/