Tutorial to make 4 column footer for Your MyBB Forum

[envira]

Hello friends,

Original Post here : http://myskins.org/Thread-Tutorial-to-ma...r-for-MyBB

Here is a tutorial on how to make a 4 column footer for MyBB.

The tutorial is simple with few edits in templates and addition of css.
Lets get into the tut.

1. Adding the Css :

Add this css at the bottom of your theme's global.css and save the theme.

#foot *{
    box-sizing:border-box;
}

#foot {
width: 100%;
height: 250px;
background: #111;
}

.col {
    background: #111;
    float: left;
    padding: 5px 15px;
    width: 25%;
}

h3 { 
    background: none;
    color: #FFF;
    font: bold 18px Arial, Helvetica, sans-serif;
    font-variant: small-caps;
    margin: 0 0 20px 0;
    padding: 9px 0 0 19px;
    height: 33px;
    color:#E04006;
}

div.col ul{ 
    list-style: none;
    margin: 0;
    padding: 0;
}

div.col li { 
    height: 35px;
    margin: 3px 0;
    padding: 0;
}

div.col li a { 
    color: #FFF;
    display: block;
    font: normal 12px Verdana, Geneva, sans-serif;
    padding: 10px 0 0 19px;
    text-decoration: none;
}

div.col li:hover { 
    background: #212121;
}

2. Editing the templates :

Now go to templates and find footer templates> footer
Replace the following code in it with the code below

Find :

<div class="bottommenu">
<div class="float_right">{$lang_select}</div>
<div>
<span class="smalltext">links here 
</div> </div>

Replace with :

<div id="foot">
<div class="col">
<h3>Navigation 1</h3>
<ul>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
</ul>
</div>
    
<div class="col">
<h3>Navigation 2</h3>
<ul>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
</ul>
</div>
    
<div class="col">
<h3>Navigation 3</h3>
<ul>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
</ul>
</div>
<div class="col">
<h3>Navigation 4</h3>
<ul>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
</ul>
</div>
</div>

Save the templates.
This gives you a 4 column footer for MyBB.

Here is a demo of what you wanted to achieve. : Link

Note : Please retain original credits to the author if you are posting this on any other site.

Hope this helps you guys,
regards

[marcus123]

Thanks for sharing I may use it on my forum.

[Rymax99]

I probably won't use this is the near future, but thanks! Will come in handy.

[aster]

Thank you for sharing.
I use this tutorial for my next skin.