Forum Home Enhancements - [CM] Social 5ive Icons (Grayscale effect by hover)

This was brought to you by ChiNa-Man

First of all I am a free soul, So if one of you guys decided to post this on another forum or a website, I would be appreciated if you give some CREDITs to the Developer simply typing his name: Credits to: ChiNa-Man, and do not CHANGE or DELETE the ORIGINAL CONTENT! Thank you!

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

A big thanks to everyone who have helped me get started on making Products, Such as Scanu, LancerForHireLCC & later on KH99. THANKS A LOT !

=================================

Social 5ive may obviously stand for Social Five! I have made this mod from the bottom! I made this 3-4 years ago for my old MYBB forum, since it has been everywhere, but not her on vBulletin. And I had no time to make a refreshment of this! The original comes with 3 Icons, while I have build this one with 5 icons!
Its placed right under your forum header,,, On the left side!

By the way, my screen recorder was not showing my mouse cursor!
Sorry about that!

How to Install:
First of all, dowload the "Images.zip" from the attachments below.
Inside the "Images.zip" there are 1 folder, called "images"! If you use any FTP software then either Drag or upload the images folder to your forum root!

Simply go to your ADMINCP, and scroll down to Plugins & Products, and then choose Manage Products, and in the new windows that opens scrool down till you see the Add/Import Product. Click on it and on your right choose BROWSE! Now look for the product-social5ive.xml XML file and simply click on IMPORT!

Thats It, Its now Installd!

Thanks alot for following up, Make sure to click Installed, and thanks to those who already have clicked Installed!

EXTRA Tutorial (Manual Add)

Now this Addon is set to install the Social Five icons in your header template! But if if you want to add it WHERE you want it, then I will provide you the FULL CODE instead of using the XML file! Then you decide you want it to appear.

Step 1: First of all upload the images to your forum root.

Step 2: Then add the Code below wherever you want in your template Header or forumhome template!

You can also add it in your postbit or postbit_legacy! Decide where you want the ICONS to appea

Add the code below:

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

If you wanted to place the Icons in middle or center. Then add 2 extra codes!
Add one code at the start of the code, and one at the end!

Codes for CENTERING the icons:

Start Code: <div align="center">
End Code: </div>

If you wanted to change it to the RIGHT or LEFT side of your screen! Simply change the word "center", to right or left!

Thats it! Thats it, thanks for following up on my tutorial!

[initiald]

Can you make a version for vbulletin 4?

[3raq4all]

Thank you, King