Awesome toolbar for your forum

Nov

2009

The original Jalokim Graphics toolbar

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

Tutorial Written by Jalokim

1 Jalokim, on 28/11/2009 at 20h59

PUNBB and PHPBB2 installation guide (templates)

PUNBB and PHPBB2 installation
toolbar on all pages

For template editing enabled sites, you can make the toolbar appear on every single page of your forum.

You will copy the above installation guide exactly the same but you will add it in a different place.

step1 - add the CSS

go to admin panel-> display -> colors -> CSS

add the same CSS that I posted in the above post. post the myfooter ID either on top or at the bottom of your CSS.

step2 - Add the script to the overall footer tpl

admin panel-> display -> templates -> general -> overall footer

open the template, scroll all the way down to the very bottom.

you should see something like this:

Code:: </div> </body> </html>

Paste the script inbetween the last div and the body closing tag

your code should look like this:

Code:: </div> <div id="myfooter" style="height: 40px; position: fixed; width: 800px; top: auto; right: 0; margin: 0 auto; bottom: 0; left: 0;" ><p align="center"> your icons data here </p> </div> </body> </html>

Warning! Don't get mixed up. My code also ends with a </div>

So if you see after pasting :

Code:: </div> </body> </html>

don't freak!
If you pasted the code between the last </ div> and the </ body> you are ok.

Save and publish
This concludes the template editing.

follow the customization instructions above and you can try some of my bars below.

Tutorial Written by Jalokim

2 Jalokim, on 28/11/2009 at 21h00

Code:: [img]http://i81.servimg.com/u/f81/11/91/65/81/mac_ba10.png[/img]

mac style translucent

Code:: [img]http://i81.servimg.com/u/f81/11/91/65/81/mac_ba11.png[/img]

mac style

mac dark translucent

Code:: [img]http://i81.servimg.com/u/f81/11/91/65/81/mavdar10.png[/img]

mac dark

Code:: [img]http://i81.servimg.com/u/f81/11/91/65/81/simple10.png[/img]

simple

please retweet (or submit to other social networks) this tutorial if you liked it.

3 Jalokim, on 28/11/2009 at 21h00

Facebook auto add page status javascript.

Code:: <a onmouseover="return escape('<center>Share this page on Facebook</center>')" href="http://www.facebook.com/sharer.php?u=http://tealeafgraphics.7forum.net" target="_blank"><img src="url of image" title="Share this page on facebook" border="0" /></a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

OK, this is the facebook button javascript. after clicking this facebook automatically launches an add link widget.

You can use this js to link to facebook.

all you have to change in this code is:
Code:
onmouseover="return escape('<center>Share this page on Facebook</center>')"
- add your own title for the button

href="http://www.facebook.com/sharer.php?u=http://tealeafgraphics.7forum.net" - add your sites address not mine

Code:
<img src="url of image" title="Share this page on facebook" border="0"
- add the image of your icon, and a title

You add the code as your next toolbar item (link)