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

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!

How to Install:
Step 1: 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!

Step 2: Go to your ADMINCP, and on your right side menu, scroll down and choose Styles & Template, then click on Style Manager! Now on your right you should see your Template name and beside it you will see a DROPDOWN menu, now go to the dropdown menu and choose Edit Templates. Now you should be in the Template Area. Look for your "header" template!

Step 3: Now in your header, you should add the following code below EVERYTHING ELSE! So the Social Five icons will show up at the end of your header! You can also add it at the start, but I dont know how it will look like!

You decide where to put it, but I go for the header template:

Code to add:

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

Click SAVE, Thats it!

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

Extra & Optional Setup

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 either right or left!

Thats it!

Thats it, thanks for following up on my tutorial!