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!

[v123shine]

5 star from me, thanks

[ChiNa]

Originally Posted by v123shine

5 star from me, thanks

This is what I appreciate about people! Some doesnt Install it but still they go for a vote! Just like I do... Thanks a lot for your time to come and vote!

Cheers:up:

[akademikper]

Thank you, good mod

[ProFifaLeagues]

Superb thanks ChiNa-Man

[ibrahimkoky]

at the beginning of every first post only. where to put it?

rated 5*
thanks

[ChiNa]

Originally Posted by ibrahimkoky

at the beginning of every first post only. where to put it?
rated 5*
thanks

@Thanks for Commenting and Rating guys, you are all awesome

@ibrahimkoky You mean on postbit? or postbit_legacy right?

If thats what you mean, please tell what version of vBulletin you use! But its easy!
I will let you know as soon as you told me your vBulletin Version! Thanks for commenting and rating !

[ibrahimkoky]

I am using 4.2-psotbit_legacy
BTW if you can tell me where to put it if i want it to show under the thread title.

one more thing, Is it possible to make it like a share button with facebook and twitter istead of just linking it with the facebook link.

thank you

[Disco_Dave]

Great add-on China-Man I'm havin a wee problem, there showing up just left of center for me, what's the best way to center?

Cheers
Dave

[kartheekb]

can u change code to make links to open in new tab..

although its simple to add target="_blank" , when i tried i am not getting opened.

i hope every one requires this