Forum Home Enhancements - [CM] Social 5ive Icons - by ChiNa-Man vB4.x

Now also available for vBulletin 3.8.x
Click HERE for vB3.8 Version

Brought to you by

ChiNa-Man

I am a free soul, so if you decided to copy or post this on another forum or website, I would be appreciate it if you put some credits below - Thank you

Credits To: ChiNa-Man

Social 5ive Icons

Hi guys, I just finished this ADDON today 19-OKT-2012!
Get some Fancy Social Icons with a GrayScale Hover Effect below your Forums or on top of your forums! (Forum Home)

When you hover you will see the color in the icons, while they are in GrayScale (Black & White) as normal ! I first made this Addon for vBulletin 3.8 and now you can get it for vBulletin 4.x as well!

This Addon was Configured to work with vBulletin 4.2!
But I am almost sure that It will work on all vB4.x versions, since I have used the Template-Hooks to replace with the Social 5ive Icons! And all vB4.x is using the same Template-Hooks! But do not hang me, if it does not work for other vB4.x Versions!

About Installation & Product:

There are 2 Different XML PRODUCTS + ICONS.zip file.

Social5_above_forums.xml: Product is for the Icons to show up on TOP of the forums (AboveForums)
Social5_below_forums.xml: Product is for the Icons to show up BELOW the forums (Below Forums)

I will also add the full code at the end, so you can decide where you want the ICONS to appear, instead of Above & Below the forums.
Not many developers provides the full code, but I will.

Installation:

Step 1. First of all Download the ICONS.zip from the Attachments, inside the zip file extract "images" to your desktop, and simply Upload the "images" folder from the ICON.zip file to you forum root using FTP Software or from your Web-Hosting CPanel - FTP Manager!

Step 2. After Images are uploaded, Goto your ADMINCP and Plugins & Product Manager >> Manager Products.
Scroll all the way down till you see Add/Import Product! Locate one of the XML Products and CLICK "IMPORT"!

Thats it, We are done.

Make sure to click on the INSTALLED button if you use this Addon.

Extra & Manual Installation


If you wanted to ADD the Icons to a specific spot in the Templates to show up in your forum, then I will now past the full code below.
Make sure that you still have to have your Images Uploaded to use this! I suggest that you do not Install the XML product if you wanna use this code! But you can if you want to!


Full Code To Add (Any where in your template)

<style type="text/css">

#facebook
{
     background: url('images/social5/facebookb.png');

     height: 36px;
     width: 36px;
     display: block;
}

#facebook:hover
{
    background: url('images/social5/facebook.png');
 
}

#twitter
{
     background: url('images/social5/twitterb.png');

     height: 36px;
     width: 36px;
     display: block;
}

#twitter:hover
{
    background: url('images/social5/twitter.png');
 
}

#digg
{
     background: url('images/social5/diggb.png');

     height: 36px;
     width: 36px;
     display: block;
}

#digg:hover
{
    background: url('images/social5/digg.png');
 
}

#linkedin
{
     background: url('images/social5/linkedinb.png');

     height: 36px;
     width: 36px;
     display: block;
}

#linkedin:hover
{
    background: url('images/social5/linkedin.png');
 
}

#youtube
{
     background: url('images/social5/youtubeb.png');

     height: 36px;
     width: 36px;
     display: block;
}

#youtube:hover
{
    background: url('images/social5/youtube.png');
 
}

</style>
<div style="width:410px; height:36px; border:0px solid red; padding:5px;">
<a id='facebook' href='http://www.facebook.com'alt="Facebook" src="#"  style="width:36px; height:36px; border:0px solid blue; float:left;"  /></a>
<a id='twitter' href='http://www.twitter.com' alt="Twitter" src="#"  style="width:36px; height:36px; border:0px solid blue; float:left;"  /></a>
<a id='digg' href='http://www.digg.com' alt="Digg" src="#"  style="width:36px; height:36px; border:0px solid blue; float:left;"  /></a>
<a id='linkedin' href='http://linkedin.com' alt="Linkedin" src="#"  style="width:36px; height:36px; border:0px solid blue; float:left;"  /></a>
<a id='youtube' href='http://www.youtube.com' alt="Youtube" src="#"  style="width:36px; height:36px; border:0px solid blue; float:left;"  /></a>
</div>

PS. You can also change the URL to for each ICON!
Thanks for following up on this TUTORIAL!

[ChiNa]

Hi Everyone, Sorry for late reply!

About if it can be added on other spots on your forum, like Postbit_legacy or below postitl..--- Yes it can! But I will have to make a new product for that..

::::::::::::::::::::::::::::::::::::::::::::::

Answer to @tricksodave, if you could please send a a PM with your full TEMPLATE CODEs, and the name of your template, then I will make you a product that fits exactly how you want it! But I require a PM from you mate...

Answer to @kartheekb, about the links to open in a new window, I am soon working on a new project, and I will def make it to open in a new window, and later send an update to all of you!

Thanks for the feedback

[gsmlover4u]

sir how can add google+ in it ?
and how can open link in new tab ?