How to add links under normal footer links like on vBulletin.com Forums

[M@rc]

This tutorial shows you how to add links under the normal footer links, like on this forum, vBulletin.com Forums.

Screen Shot of Example :



First, create the CSS : ( Note : Edit the CSS to your liking if you wish to do so. )

.extra_footerlinks {
color: #484848;
margin-top:0px;
background: #f5f5f5 none;
}

.extra_footerlinks a {
color: #245A7A;
text-decoration:none;
}

.extra_footerlinks a:active {
color: #245A7A;
text-decoration:none;
}

.extra_footerlinks a:visited {
color: #245A7A;
text-decoration:none;
}

.extra_footerlinks a:hover {
color: #245A7A;
text-decoration:underline;
} 

Then, add the CSS :

Admin CP => Styles & Templates => Style Manager => Edit Templates => CSS Templates => additional.css

Now, you have to insert your extra links into the vBulletin forum :

Admin CP => Styles & Templates => Style Manager => Edit Templates => footer

Search for :

{vb:raw template_hook.footer_javascript}
</div>

( INSERT HTML HERE )

</div> <!-- closing div for body_wrapper --> 

Find and replace, "( INSERT HTML HERE )" with :

<div class="footer extra_footerlinks">Useful Links : <a href="http://www.example.com/">Link 1</a> | <a href="http://www.example.com/">Link 2</a> | <a href="http://www.example.com/">Link 3</a> | <a href="http://www.example.com/">Link 4</a>&nbsp;&nbsp;</div> 

Then save. Of course, modify your links from the HTML above to whatever you wish,