Global Toolbar (Advanced)

2 posters

Go down

Global Toolbar (Advanced) Empty Global Toolbar (Advanced)

Post by Pendo February 24th 2010, 3:41 am

I fully understand that there is already an existing tutorial in the Tips and Tricks section on how to create a toolbar, but I got an idea to expand such a tutorial. As I applied the code to my forum, I soon realized that the toolbar was fairly bland and only applied to the homepage of the forum. Due to such restrictions, I decided to share with you on how to make a more advanced and professional-looking toolbar for your forum!
(1) Firstly, you must access your 'Administration Panel', which requires you to solely be an administrator of the forum, as well as be logged in at the time.
(2) Once at your 'Administration Panel', you must make sure that you have it set to 'Advanced'. To do so, simply move your mouse to the top of the left sidebar and click the button that says 'Advanced'.
(3) Now, after step 2 you will be opened up to a much wider variety of options and areas that would usually be restricted or limited to your modification. Now, you must first make your way to the 'Display' tab, which you will find near the top of your administration panel, being the third tab from the left.
(4) When you arrive at the Display page, note the sidebar residing on the left of the section. Scroll down to where it says:
Global Toolbar (Advanced) Images_couleursPictures and Colors
and below that you will find two options. 'Pics Management' and 'Colors'. For this tutorial, you will only need to access the Colors. Once you're there, you will find two smaller tabs available to you. One of them will be "CSS Stylesheet", which you will click. Once you click it, you will be taken to the place you will paste the following code:
Code:
#myfooter{
background-image: url(INSERT BACKGROUND IMAGE FOR YOUR TOOLBAR);
background-repeat: repeat;
}
#myfooter img{
border: 0px;
margin-top: -20px;
padding-right: 20px;
          filter:alpha(opacity=69);
-moz-opacity: 0.65;
opacity: 0.65;
}
#myfooter img:hover{
border: 0px;
margin-top: -20px;
padding-right: 20px;
          filter:alpha(opacity=100);
-moz-opacity: 0.99;
opacity: 0.99;
}
I have changed the code so that the background image of the toolbar will repeat, rather than only appear once then leave the rest of the toolbar without a background. This is so that the background does not have to have a specific width.

I have also set it to where the images of your toolbar will be slightly translucent, yet still very visible, but will solidify when you hover your mouse over it. This gives the toolbar a more stylish effect to it. No one really likes hovering over plain images that don't change, so it will certainly make a difference.
(5) Of course your toolbar will need it's hyperlinked images so that your members can navigate the forum! To do this, in this version of the toolbar tutorial, you will need a sidebar on your forum. Go to to the tab marked 'Modules' which is the second to last of the tabs.
(6) Once there locate the section of the sidebar, which is at the top, that says:
Global Toolbar (Advanced) Portail Portal and Widgets
Below this, you will find an option titled 'Forum widgets management'; because this tutorial is for a Global Toolbar, and not how to make a sidebar, we will assume that you already have one.
(7) Scroll down and find the Global Toolbar (Advanced) Editer Create a Widget button and click it. Give it the following name and title:
Code:
 
And then move to the 'Widget source' section and paste the following code:
Code:
<div id="myfooter" style="margin: 0pt auto; height: 40px; position: fixed; width: 100%; top: auto; right: 0pt; bottom: 0pt; left: 0pt;">

<p align="center">
<a href="INSERT LINK HERE"><img src="INSERT IMAGE URL HERE" title="INSERT PAGE NAME HERE" border="0"></a>
<a href="INSERT LINK HERE"><img src="INSERT IMAGE URL HERE" title="INSERT PAGE NAME HERE" border="0"></a>
<a href="INSERT LINK HERE"><img src="INSERT IMAGE URL HERE" title="INSERT PAGE NAME HERE" border="0"></a>
<a href="INSERT LINK HERE"><img src="INSERT IMAGE URL HERE" title="INSERT PAGE NAME HERE" border="0"></a>
<a href="INSERT LINK HERE"><img src="INSERT IMAGE URL HERE" title="INSERT PAGE NAME HERE" border="0"></a>
</p></div><p></p>

Note the code:
Code:
<a href="INSERT LINK HERE"><img src="INSERT IMAGE URL HERE" title="INSERT PAGE NAME HERE" border="0"></a>
This is the overall code for each and every button. You can add and remove as many as you wish!

Once you are all done, save the widget, go back to 'Forum widgets management', scroll down, click the tab labeled 'Personal Widgets', drag the no-named widget to your sidebar, and click the 'Save' button. Now, go to your forum and check out the result!

I used this method on my own forum, and as an example, here is the code I used:
Code:
<div id="myfooter" style="margin: 0pt auto; height: 40px; position: fixed; width: 100%; top: auto; right: 0pt; bottom: 0pt; left: 0pt;">

<p align="center">
<a href="http://shinobilegacies.forumotion.com/announcements-f1/"><img src="http://i380.photobucket.com/albums/oo242/LH-Justin/info_48.png" title="Announcements" border="0"></a>
<a href="http://shinobilegacies.forumotion.com/rules-and-terms-f3/shinobi-legacies-rules-t21.htm"><img src="http://i89.servimg.com/u/f89/11/79/43/48/photos10.png" title="General Rules" border="0"></a>
<a href="http://shinobilegacies.forumotion.com/feedback-f4/"><img src="http://i380.photobucket.com/albums/oo242/LH-Justin/CFSChitChat.png" title="Feedback and Suggestions" border="0"></a>
<a href="http://shinobilegacies.forumotion.com/guides-help-f5/"><img src="http://i380.photobucket.com/albums/oo242/LH-Justin/help_48.png" title="Guides and Help" border="0"></a>
<a href="http://shinobilegacies.forumotion.com/konoha-no-kuni-leaf-country-f13/"><img src="http://i126.photobucket.com/albums/p99/Pendoray/Leaf.gif" title="Konoha no Kuni" border="0"></a>
<a href="http://shinobilegacies.forumotion.com/suna-no-kuni-sand-country-f14/"><img src="http://i126.photobucket.com/albums/p99/Pendoray/Sand.gif" title="Suna no Kuni" border="0"></a>
<a href="http://shinobilegacies.forumotion.com/kiri-no-kuni-mist-country-f15/"><img src="http://i126.photobucket.com/albums/p99/Pendoray/Mist.gif" title="Kiri no Kuni" border="0"></a>
<a href="http://shinobilegacies.forumotion.com/oto-no-kuni-sound-country-f16/"><img src="http://i294.photobucket.com/albums/mm103/mauro965/Sound.gif" title="Oto no Kuni" border="0"></a>
<a href="http://shinobilegacies.forumotion.com/earth-country-hidden-rock-village-f74/"><img src="http://i294.photobucket.com/albums/mm103/mauro965/Rock.gif" title="Iwa no Sato" border="0"></a>
<a href="http://shinobilegacies.forumotion.com/lightning-country-hidden-cloud-village-f75/"><img src="http://i294.photobucket.com/albums/mm103/mauro965/Cloud.gif" title="Kumo no Sato" border="0"></a>
<a href="http://shinobilegacies.forumotion.com/rain-country-hidden-rain-village-f76/"><img src="http://i294.photobucket.com/albums/mm103/mauro965/Rain.gif" title="Ame no Sato" border="0"></a>
<a href="http://shinobilegacies.forumotion.com/grass-country-hidden-grass-village-f77/"><img src="http://i294.photobucket.com/albums/mm103/mauro965/Grass.gif" title="Grass Village" border="0"></a>
<a href="http://shinobilegacies.forumotion.com/waterfall-country-hidden-waterfall-village-f78/"><img src="http://img200.imageshack.us/img200/7115/waterfalli.gif" title="Waterfall Village" border="0"></a>
</p></div><p></p>
And the resulting toolbar was:
Global Toolbar (Advanced) Toolbarr
~Note: the images become solid and more colored when hovered over.

Here are a couple of toolbar backgrounds you can use in the code stated in step (4):
Global Toolbar (Advanced) I_back_title
Global Toolbar (Advanced) Thtoolbb
~Note: these backgrounds work best on a dark-themed forum.
avatar
Pendo
Forumember

Male Posts : 215
Reputation : 13
Language : English
Location : USA

View user profile http://lorecraft.forumotion.com/

Back to top Go down

Global Toolbar (Advanced) Empty Re: Global Toolbar (Advanced)

Post by MrMario February 25th 2010, 3:44 am

You need to PM this to a staff member not on the forum.


=> Lockex
MrMario
MrMario
Helper
Helper

Male Posts : 22186
Reputation : 1839
Language : test

View user profile

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum