Awesome footer with Social Icons
Provided by http://eminemtalk.com/
WHAT DOES THIS DO? This will help you in achieving a 4colum footer with social icons & you can customize it to match your needs. Screen Shot: ![]() Lets get it started ![]() Backup your footer template before making any changes. This was tested on vbulletin 3.8.x Default skin & it worked fine. Go to your Admin CP->>>Your Style>>>Edit Templates>>>footer Remove the following code first. Code:
<div align="center"> <div class="smallfont" align="center"> <!-- Do not remove this copyright notice --> $vbphrase[powered_by_vbulletin] <!-- Do not remove this copyright notice --> </div> <div class="smallfont" align="center"> <!-- Do not remove cronimage or your scheduled tasks will cease to function --> $cronimage <!-- Do not remove cronimage or your scheduled tasks will cease to function --> $vboptions[copyrighttext] </div> </div> </form> Now, find Code:
$ad_location[ad_footer_end] Code:
<!---Awesome Footer---> </br></br> <div class="footer1"> <div class="container"> <div class="col4"> <h3>About Eminem Talk</h3> <div class="hfont"> Eminem Talk is an Forum Devoted To Eminem Fans from all over the world. Let's Have A Chat About the greatest rap legend of all time now and forever. </div> </div> <div class="col4"> <h3>Recommended Links </h3> <ul> <li><a href="http://www.eminem.com/">Official Eminem Site</a></li> <li><a href="http://www.drdre.com/">Official Dr. DRe Site </a></li> <!--<li><a href="http://www.8-mile.com/">8-mile Site</a></li>--> <li><a href="http://www.d12online.com/">Official D12 Site</a></li> <li><a href="http://www.shadyrecords.com/">Official Shady Records Site</a></li> </ul> </div> <div class="col4"> <h3>Quick Links</h3> <ul> <li><a href="/usercp.php">My User CP</a></li> <li><a href="/f4/eminem-song-you-listening-right-now-13/">Which Eminem song are you listening to right now?</a></li> <!--<li><a href="/f8/list-all-eminem-albums-their-achievements-awards-17/">List of All Eminem Albums With their Achievements & Awards!</a></li>--> </ul> </div> <div class="col4 fallowus"> <h3>Follow us on</h3> <p> <a href="#" target="_blank"><img width="28" height="28" border="0" alt="Twitter" src="social/social_twitter.png"></a> <a href="#" target="_blank"><img width="28" height="28" border="0" alt="Facebook" src="social/social_fb.png"></a> <a href="#" target="_blank"><img width="28" height="28" border="0" alt="youtube" src="social/youtube.png"></a> <a href="#" target="_blank"><img width="28" height="28" border="0" alt="Flickr" src="social/social_flickr.png"></a> <a href="#" target="_blank"><img width="28" height="28" border="0" alt="DavianArt" src="social/social_da.png"></a> <a href="#" target="_blank"><img width="28" height="28" border="0" alt="Dribbble" src="social/social_dribbble.png"></a> <a href="#"><img width="28" height="28" border="0" alt="RSS Feed" src="social/icon_rss.png"></a></p> </br> <div class="smallf" align="center"> <!-- Do not remove this copyright notice --> $vbphrase[powered_by_vbulletin] <!-- Do not remove this copyright notice --> </div> <div class="smallf" align="center"> <!-- Do not remove cronimage or your scheduled tasks will cease to function --> $cronimage <!-- Do not remove cronimage or your scheduled tasks will cease to function --> $vboptions[copyrighttext] </div> </div> <div class="clear"></div> </div> </div> </br> <!---Awesome Footer---> Code:
/* Awesome Footer ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ .footer1 { background: none repeat scroll 0 0 #000000; border-radius: 5px 5px 5px 5px; margin-top: -13px; min-height: 210px; padding: 5px 0 35px; } .footer1 .container .col4 h3 { font-family: 'BodoniStd-BookItalic',"Times New Roman",Times,serif !important; font-size: 25px; font-style: normal; margin-bottom: 22px; text-shadow: none; border-bottom: 1px solid #FFFFFF; color: #FF0000; font-size: 18px; margin-bottom: 10px; padding-bottom: 7px; } .hfont { color: #fff; font:small-caps bold 13px Tahoma,Calibri,Verdana,Geneva,sans-serif; } .footer1 p { text-shadow: none; } .footer1 a { color: whitesmoke; text-shadow: 0 1px 0 #373736; font:small-caps bold 13px Tahoma,Calibri,Verdana,Geneva,sans-serif; } .footer1 a:hover { color: #1B93DF; } .footer1 ul li { background: url("social/icon_dot.gif") no-repeat scroll 0 8px transparent; margin-bottom: 7px; padding-left: 10px; } .col4 { float: left; margin-left: 56px; width: 262px; } .footer1 .container .col4 h3 { margin-bottom: 20px; } .fallowus { width: 226px; } .smallf { color: #FFFFFF; font: small-caps bold 13px Tahoma,Calibri,Verdana,Geneva,sans-serif; } If you wanna center your columns, add this to the additional.css Code:
.footer1 .container { width: 1090px; margin: auto; } ********************* INSTALLATION INSTRUCTIONS *********************** 1 - Edit your footer template 2 - Additional CSS Definitions edit 3 - Upload the folder social to your forum root. 4- Make the appropriate changes to the description & links to match with your site. http://www.vbulletin.org/forum/showthread.php?p=2352991 Please click Mark as Installed if you are using this hack. Feel free to click on the Support Developer link and donate any amount you feel is appropriate. Download
|
Similar Mods
65 Awesome Post Icons | Miscellaneous Images |
Forum Home Enhancements Awesome footer with Social Icons. | vBulletin 4.x Template Modifications |
Black + Yellow Awesome Status Icons | vBulletin Status Icon Sets |