[CM] Social 5ive Icons - by ChiNa-Man vB4.x
Mod Version: 1.00, by ChiNa
| vB Version: 4.2.0 | Rating:  (3 votes - 4.33 average) |
Installs: 16 |
| Released: 20 Oct 2012 | Last Update: Never | Downloads: 78 |
 Not Supported
 Template Edits
Auto-Template
|
||
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
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.
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)
Code:
<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>
Thanks for following up on this TUTORIAL!
Download
social5_above_forums.xml (4.1 KB, 57 downloads) social5_below_forums.xml (4.1 KB, 36 downloads)
ICONS.zip (22.0 KB, 82 downloads)