vB Version: 3.8.xWHAT 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:
[ltr]<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>[/ltr]Now, find
Code:
[ltr]$ad_location[ad_footer_end][/ltr]Above that add...
Code:
[ltr]<!---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--->[/ltr]Go to your Admin CP->>>Your Style>>>All style options>>>Additional CSS Definitions>>>In the second box add this
Code:
[ltr]/* 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;
}[/ltr]Upload the folder social to your forum root.
If you wanna center your columns, add this to the additional.css
Code:
[ltr].footer1 .container {
width: 1090px;
margin: auto;
}[/ltr]*********************
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.
الرئيسية
Attached Files
social.zip (14.1 KB, 21 views)