Tutorial to make 4 column footer for MyBB

[Hyper]

Hello friends,
As requested by one of our friend, 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.

Kod: Tümünü Seç Tümünü Kopyala

#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 :

Kod: Tümünü Seç Tümünü Kopyala

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

Replace with :

Kod: Tümünü Seç Tümünü Kopyala

<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

Source:

Kod: Tümünü Seç Tümünü Kopyala

http://myskins.org/Thread-Tutorial-to-make-4-column-footer-for-MyBB