Have an original toolbar

Hey
here you are the tutorial...



Tools you may need:
+ Photoshop or Gimp to create the bottom bar. (maybe in the future I'll provide some bars)
+ A set of icons and an idea of what you want on your bar.
+ Applies to any forumotion forum.
+ a few minutes and motivation
+ CSS and html skills to super customize the bar



Step1 - the magic code.

Well its just a simple div, that hover over all content and is always aligned at the bottom of the page. Since its a div you can add anything to it.

Code: ----------Select content

<div id="myfooter" style="height: 40px;  position: fixed;
        width: 800px;
      top: auto;
        right: 0;
margin: 0 auto;
        bottom: 0;
        left: 0;" >

<p align="center">

<a href="link to forum page or social site"><img src="URL of icon" title="pop up title of page" border="0"></a>
<a href="link to second forum page or social site"><img src="URL of 2 icon" title="pop up title of page 2" border="0"></a>

</p></form></div></p></div>

Go to admin panel-> display -> homepage message -> generalities.

paste the above code inside your homepage message box.

Edit the content to your liking and save.

Step2 - general edits


in the above code you have an inline style. The inline style makes the div go to the bottom.

Code: ----------Select content

style="height: 40px;  position: fixed;
        width: 800px;
      top: auto;
        right: 0;
margin: 0 auto;
        bottom: 0;
        left: 0;"

the only parts of this code you can edit is the height and width properties.

If you want your bar to go across the entire board make the width:100%;

the height of the bar depends on how big your icons are. The bigger the icons the bigger the bar has to be.



Step3 - CSS addons


In addition to the inline style you need an img definer and a bar definer.

So we add these 2 classes to your css.
paste this code at the top or bottom of your CSS
(admin panel-> display-> colors-> css)

Code: ----------Select content

#myfooter{
background-image: url(url of the bar image);
background-repeat: no-repeat;
}
#myfooter img{
border: 0px;
margin-top: -12px;
padding-right: 20px;
}

The id myfooter img has a few purposes.

First: border: 0px; - makes it so you don't have to add border 0 to each image.

margin-top: - this moves your images. If they are too far down on your bar you can move them up by making the margin top bigger

padding-right: - instead of adding spaces next to each image this code makes an automatic space of 20px between images.
you can make it bigger if you want



After you done, save your CSS.


Now you are set, the toolbar should appear on your forum, with your desired icons, and bar.


Notice! For phpbb3 and IPB the toolbar only appears on the index page!