• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Adding Social Icons To User Banner / Member Card

Adding Social Icons To User Banner / Member Card 0.1

No permission to download
userbanner membercard social icon links
Compatible XF 1.x versions
1.3, 1.4
Visible branding
No
Allow your users to share their social channels, if you run a gaming community, allow them to share their gamertags - to easily identify eachother on the forums.

membercard.png


Included in this post:
Code required
Icons (at bottom of post)
Support if you need any assistance
It's very straight forward and takes moments to do :)

Firstly, create your Custom User Fields:

customfields.png


End up with something like this:
customfieldlist.png


In the template "message_user_info"

messageuserinfo.png


Add your custom field names e.g.

Code:
<div align="centre" class="socialmemcard1"><br>
<xen:if is="{$user.customFields.facebook}">
<a href="{$user.customFields.Facebook}" target="_blank" ><img src="***URL=ImageIconHere***"></img></a>
    </xen:if>
                        <xen:if is="{$user.customFields.twitter}">
    <a href="{$user.customFields.Twitter}" target="_blank" ><img src="***URL=ImageIconHere***"></img></a>
    </xen:if>
                        <xen:if is="{$user.customFields.memYouTube}">
    <a href="{$user.customFields.memYouTube}" target="_blank" ><img src="***URL=ImageIconHere***"></img></a>
    </xen:if>
                <xen:if is="{$user.customFields.Askfm}">
    <a href="{$user.customFields.Askfm}" target="_blank" ><img src="***URL=ImageIconHere***"></img></a> <br>
    </xen:if></div>
<div align="left" class="socialmemcard">
                        <xen:if is="{$user.customFields.XboxGT}"><br>
    <img src="***URL=ImageIconHere***"></img> {$user.customFields.XboxGT}
    </xen:if>
                        <xen:if is="{$user.customFields.PSNGT}"><br>
    <img src="***URL=ImageIconHere***"></img> {$user.customFields.PSNGT}
    </xen:if>
                        <xen:if is="{$user.customFields.SteamGT}"><br>
    <img src="***URL=ImageIconHere***"></img> {$user.customFields.SteamGT}
    </xen:if>
</div>
^ Obviously add which fields you want to include where is says "$user.customFields.XXXXXX" replace XXXXXX with the field name you label your Custom Field with.

( I inserted mine before the XenForo Custom Field call *search for: <xen:if is="@messageShowCustomFields AND {$user.customFields}">*)

Open up EXTRA.css

extracss.png


and insert the code:
Code:
.user_banners .avatarCropper { margin-bottom: 16px;}
.socialmemcard { padding-top: 2.5px; margin-left: 0px;}
.socialmemcard xenforo { margin-right: -4px; }

.user_banners .avatarCropper { margin-bottom: 16px;}
.socialmemcard1 {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 85% !important;
}
.socialmemcard1 xenforo {
    margin-left: auto;
    margin-right: auto;
}
*Note*

The user must input the correct field data for this to work:

upload_2014-8-17_3-2-19.png




---------------------



Icons:

socialicons.jpg

askfm.png
facebook.png
instagram.png
playstation.png
steam.png
twitter.png
xbox.png
youtube.png
Author
Dan Hawkins
Downloads
67
First release
Last update
Rating
0.00 star(s) 0 ratings

Latest updates

  1. Included Icons

    Included are the icons in a zip folder - required to use this code change properly.
  2. Included Social Icons

    Hi, My server will have hotlink protection (So the icons wont work for you unless you use your...