No replies to this topic

[Sean James]

I have been asked a few times how to do this so I will quickly write a small tutorial on how to add links inside columns in the footer of your forum, like I have at the bottom of our site.

In your footer template add this code below:

<div id="newfooter">
  <section id="footcol1">
   <h4>Links</h4>
   <ul>
    <li><a href="http://www.yourlink.com">Latest News &amp; Updates</a></li>
    <li><a href="http://www.yourlink.com">Presales Questions &amp; Feedback</a></li>
    <li><a href="http://www.yourlink.com">Frequently Asked Questions</a></li>
    <li><a href="http://www.yourlink.com">Join Our Mailing List</a></li>
   </ul>
  </section>
  <section id="footcol2">
   <h4>Customers</h4>
   <ul>
    <li><a href="http://www.yourlink.com">Customer Area</a></li>
    <li><a href="http://www.yourlink.com">Support Desk</a></li>
    <li><a href="http://www.yourlink.com">Support Forum</a></li>
    <li><a href="http://www.yourlink.com">Download Skin Update</a></li>
   </ul>
  </section>
  <section id="footcol3">
    <h4>Our Network</h4>
   <ul>
    <li><a href="http://www.yourlink.com">Bluepearl Network</a></li>
    <li><a href="http://www.yourlink.com">Bluepearl Web Design</a></li>
    <li><a href="http://www.yourlink.com">Bluepearl CMS Templates</a></li>
    <li><a href="http://www.yourlink.com">Bluepearl Blog</a></li>
   </ul>
  </section>
  <section id="footcol4">
    <h4>Our Friends</h4>
   <ul>
    <li><a href="http://www.yourlink.com">Wolfshead Solutions - vB Mods</a></li>
    <li><a href="http://www.yourlink.com">Innovation by Instinct - vB Mods</a></li>
   </ul>
  </section>
  <br class="clear">
</div> <!-- new footer -->  

In the above code you will need to change the link URL and name.

In your additional.css template add this:

#newfooter {
width: 948px;
height: 190px;
margin: 0 auto;
border-top: 1px solid #c6c6c8;
background: #c0c0c0 url('/images/background2.png') repeat-x top left;
padding: 10px;
}

#newfooter h4 {
    color: #282d7a;
    padding: 0 0 8px 0;
    margin: 0;
    font-size: 14px;
    text-shadow: 1px 1px 1px #fff;font-weight: bold;
}

#footcol1 li a:hover, #footcol2 li a:hover, #footcol3 li a:hover {
    text-decoration: none;
}

#footcol1 {
    padding: 0 28px;
    float: left;
    border-right: 1px solid #fff;
    margin-left: 7px;
}

#footcol2 {
    padding: 0 28px;
    float: left;
    border-right: 1px solid #fff;
}

#footcol3 {
    padding: 0 28px;
    float: left;
border-right: 1px solid #fff;

}

#footcol4 {
    padding: 0 28px;
    float: left;
}

#footcol1 li, #footcol2 li, #footcol3 li, #footcol4 li {
    list-style-type: square;
    margin:;
    padding: 2px;
    font-size: 13px;
    text-shadow: 1px 1px 1px #fff;
}

#footcol1 li:hover, #footcol2 li:hover, #footcol3 li:hover {
    background-color: #fff;
    -moz-border-radius: 2px 2px 2px 2px;
    -webkit-border-radius: 2px 2px 2px 2px;
    -khtml-border-radius: 2px 2px 2px 2px;
    border-radius: 2px 2px 2px 2px;
}

#footcol1 ul, #footcol2 ul, #footcol3 ul {
    margin: 0 0 0 10px;
    padding: 0;
}

You might want to change the color values above to match your style.