06-11-2010, 11:21 PM
Cutomising your forum - how to add a footer bar
This is a quick tutorial on how to add a "footer bar" to your forum. In this tutorial we'll be editing the global css and the footer template. An image of the outcome is at the bottom of the tutorial.
Part 1
All of this will be done in the ACP (Admin control panel) on your forum.
1) Go to Templates & Style
2) themes
3) *your theme*
4) global.css
5) Edit stylesheet: advanced mode
Add the following anywhere. DO NOT add the line numbers (If you're copy and pasting)
[code=css].bottommore {
background: #555555;
color: #000000;
font-size: 11px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin-bottom: 10px;
padding: 10px 10px 5px 10px;
}[/code]
Part 2
1) Go to Templates & Style
2) Templates
3) *your theme*
4) Footer Templates
5) footer
Add the following, at the top of the file. Just customise it to suit yourself.
[code=html]<div class="bottommore">
<a href="{$mybb->settings['bburl']}/showthread.php?tid=475" title="mcompute - web hosting"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/bottommore/vidahost.png" title="mcompute - web hosting" alt="mcompute - webhosting"></a>
</div>[/code]
It will be above:
[code=html]<div class="bottommenu">[/code]
The outcome should look similar to this:
This is a quick tutorial on how to add a "footer bar" to your forum. In this tutorial we'll be editing the global css and the footer template. An image of the outcome is at the bottom of the tutorial.
Part 1
All of this will be done in the ACP (Admin control panel) on your forum.
1) Go to Templates & Style
2) themes
3) *your theme*
4) global.css
5) Edit stylesheet: advanced mode
Add the following anywhere. DO NOT add the line numbers (If you're copy and pasting)
[code=css].bottommore {
background: #555555;
color: #000000;
font-size: 11px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin-bottom: 10px;
padding: 10px 10px 5px 10px;
}[/code]
Part 2
1) Go to Templates & Style
2) Templates
3) *your theme*
4) Footer Templates
5) footer
Add the following, at the top of the file. Just customise it to suit yourself.
[code=html]<div class="bottommore">
<a href="{$mybb->settings['bburl']}/showthread.php?tid=475" title="mcompute - web hosting"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/bottommore/vidahost.png" title="mcompute - web hosting" alt="mcompute - webhosting"></a>
</div>[/code]
It will be above:
[code=html]<div class="bottommenu">[/code]
The outcome should look similar to this: