Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Toolbar > Toolbar
Mottie (SuperAdmin) 8/14/2009 12:13 AM EST : Toolbar
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Main Toolbar | Any Widget | Donate | Games | Translate

Toolbar v1.01

GuildPortal admin site link to original post

This toolbar was inspired by Wibiya. It's still in beta and I tried to register to take a look at it, but since it's in beta they added me to a que... Hmmm, I bet I could make a toolbar. Well here it is LOL! It doesn't have all the options that I've seen on their bar because some of it requires server side scripts. But with this toolbar on your site you can get easy access to:
  • Search sites
  • Site navigation
  • Common links
  • Guild Notices/Announcements
  • Any web page inside a frame (like your server status)
  • Image galleries ( Flickr, Picassa or any other media feed)
  • New Feeds
  • Chat - GuildPortal, Facebook and Google
Basic Toolbar
Toolbar with components (labeled)

Adding this to your site

The code below is a basic setup (no options or links added).
*NOTE* While installing this toolbar on my help site I noticed that my footer HTML filled up and truncated the remaining code. So it may be better add the bulk of the custom variables into an external file:
  • Load up a text editor (non-rich text) and add all the custom variables for the toolbar.
  • Add all your custom links and customize the variables to suit your needs.
  • Save the file as something like "toolbar-options.js"
  • Upload it to a hosting site like MyOtherDrive.com (free hosting with unlimited bandwidth)
  • Get the direct link to your toolbar-options file.
  • Add a script tag that points to your file (in orange).
  • Then add the code below into your Footer HTML (preferred) or Banner HTML.
<!-- Add Custom HTML here -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
// Add custom variables here
</script>
<script type="text/javascript" src="http://www.myotherdrive.com/ ... /toolbar-options.js"></script>
<link type="text/css" href="http://www.axiomfiles.com/Files/258012/toolbar.css" rel="Stylesheet" media="screen">
<script type="text/javascript" src="http://www.axiomfiles.com/Files/258012/toolbar.js"></script>
<style type="text/css">
/* Add Custom Styles here */
</style>

Complete Code (click to view)
Customizing

The bar is broken up into five areas, you can put your links into the center three areas any way you wish, but I've tried to organize it as follows (for ease of this tutorial):
  1. Search Box
  2. Left Side (Site navigation & links)
  3. Center (Important announcements & examples in this case)
  4. Right Side (Galleries, feeds and chat windows)
  5. Toolbar Controls (far right)
> Overall Toolbar Options & CSS

These options control the look & behavior of the toolbar, what you see below are the default values, so changing these variables are optional. Add these variables into the "custom variables" area
// Toolbar Options
// ****************

 var tbStartShowing = true;
 var tbStartBottom = true;
 var tbOpenLinksInNewWindow = true;

// Feeds
 var tbNumberOfFeeds = 5;

// Chat
 var enableGuildPortalChat = true;
 var enableFacebookChat = true;
 var enableGoogleChat = true;

// Info icon
 var hideToolbarInfo = false;

// Cooliris Gallery Variables
// ****************

 var tbGalleryRows = 3;
 var tbGalleryBkgdStyle = "dark";
 var tbGalleryBkgdColor = "#333333";

// Toolbar Icons
// ****************

 var tbHideIcon = '<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/close-2.png">';
 var tbShowIcon = '<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/show.png">';
 var tbMoveIcon = '<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/move.png">';
 var tbPopupClose = '<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/close-2.png">';
 var tbPopupMove = '<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/move-1.png">';
  • tbStartShowing (optional) - Setting this to false will initially hide the toolbar, but it can be easily opened by clicking on the show icon.
  • tbStartBottom (optional) - Setting this to false will move the toolbar to the top of the screen.
  • tbOpenLinksInNewWindow (optional) - Setting this to false will make all clicked links on the toolbar open in the same window.
  • tbNumberOfFeeds (optional) - This variable sets the number of feeds to display in the popup window
  • enableGuildPortalChat (optional) - Setting this to false will hide the GuildPortal chat icon (there is still a link in the state (top) bar)
  • enableFacebookChat (optional) - Setting this to false will hide the Facebook chat icon.
  • enableGoogleChat (optional) - Setting this to false will hide the Google chat icon.
  • hideToolbarInfo (optional) - Setting this to true will hide the () icon, I like taking credit for making this toolbar, but I don't want to shove it down your throat 
  • tbHideIcon (optional) - Setting this will replace the default toolbar hide icon () with one of your choosing.
  • tbShowIcon (optional) - Setting this will replace the default show toolbar icon () with one of your choosing.
  • tbMoveIcon (optional) - Setting this will replace the default move toolbar icon () with one of your choosing.
  • tbPopupClose (optional) - Setting this will replace the default close popup icon () with one of your choosing.
  • tbPopupMove (optional) - Setting this will replace the default move popup icon ( ) with one of your choosing.
> Adding Components

Currently there are seven types of components you can add to the toolbar. They all use the basic template below. You can add as many as you wish (but adding too many may knock some of the icons to the next row and break the style of the toolbar, so don't crazy LOL):
var addToolbarLink = new Array();
// Toolbar Links - Add more links below. The top link in a section will end up on the far left side of it's set location (left, center or right)
addToolbarLink.push(["location","type","Title","Icon URL","Link/Code"]);
> Search Box

The following variables can be customized for the search box, including adding additional sites to the selection. Add these variables into the "custom variables" area of the code.
// Search Variables
// ****************

 var tbSearchBoxWidth = 100
 var tbSearchDefault = "Google";
 var tbSearchIcon = "http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/search-1.png";

var addToolbarSearch = new Array();
addToolbarSearch.push (["WowHead","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wowhead.png","http://www.wowhead.com/?search="]);
  • tbSearchBoxWidth (optional) - Sets the width of the popup that lets you choose the search site.
  • tbSearchDefault (optional) - Sets the default search site. This is case-sensitive. The built-in searchs include "Google" and "Wikipedia" to be as general as possible.
  • tbSearchIcon (optional) - Changes the default search button () icon. There is no need to add this to the code if you aren't changing the icon.
  • var addToolbarSearch = new Array(); (required, if adding more sites) - This line defines the array for adding new search sites - you must add this if you plan on adding more sites
  • addToolbarSearch.push(...) (required, if adding more sites) - Use the template below to add more sites.

    addToolbarSearch.push (["Site Name","Site Icon URL","Search URL Code"]);

    1. Site Name - Replace this text with the name of the search site.
    2. Site Icon URL - Replace this text with the URL to your image
    3. Search URL Code - Replace this text with the site URL that does the search - please refer to the Search Box post on how to obtain this "Search URL Code"
> Gallery

The following variables can be customized for the cooliris image gallery. Add these variables into the "custom variables" area of the code.
// Cooliris Gallery Variables
// ****************

 var tbGalleryRows = 3;
 var tbGalleryBkgdStyle = "dark";
 var tbGalleryBkgdColor = "#333333";
  • tbGalleryRows (optional) - Sets the number of rows the Cooliris gallery displays at once. The range of this value is 1 - 7.
  • tbGalleryBkgd (optional) - Sets the overall style of the gallery (including the buttons & bar). There are four options: black, dark, white & light.
  • tbGalleryBkgdColor (optional) - Sets the background color of the cooliris gallery.
> Custom CSS

You can add CSS to the area below the code between the <style> tags. Adding CSS will override the default CSS that is seen below.
/* Add Custom Styles here */
/* Toolbar & Minibar (tbShow) that is visible when the bar is hidden */

#toolbar, #tbShow {
 background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/toolbar-dark.jpg) repeat-x;
 color: #dddddd;
 height: 30px;
}
/* Toolbar & Popup Positioning */
.tbPopupTop { top: 35px }
.tbPopupBottom { bottom: 35px }
/* Toolbar image size & spacing */
.tbMain img, .tbSearch img, #tbHide img, #tbMove img, #tbShow img {
 height: 18px;
 width: 18px;
}
/* Search box area & color */
#toolbar .tbsearch input { background: #333333; color: #dddddd; }
/* Toolbar Popup */
#tbPopup {
 background-color: #333333;
 color: #ffffff;
}
/* Popup Title */
.tbPopupTitle { color: #dddddd; font-size: 120%; font-weight: bold; }
/* Feed Title */
.gfc-resultsHeader .gfc-title { color: #ffffff; font-size: 120%; font-weight: bold; }

Edit (8/18/2009): Fixed the search box, added new variables (search box width & popup move icon), and included an example image in the announcement popup
Edit (10/26/2009): Added jQuery UI script to the main code. No idea why but for some reason the script to make the popups draggable was removed, you can add it back by adding this to the code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 8/14/2009 11:36 PM EST : RE: Toolbar
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Main Toolbar | Any Widget | Donate | Games | Translate

Adding a Donate Button to the toolbar

This post teaches you how to add a Donate button (link) to your toolbar.

The Code
addToolbarLink.push(["about","code","Donate!","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/money.png", "window.open('PAYPAL EMAIL CODE GOES HERE', 'newwindow', 'height=800, width=800, toolbar=yes, menubar=no,  scrollbars=yes,resizable=yes, location=no, directories=no, status=no')"]);
  • First off copy this code & paste it with the rest of your toolbar variables.

  • Now you need to get your Paypal e-mail link code:
    • Log into your Paypal account (or make one if you haven't already)

    • Click on the Merchant Services tab

    • Under Create Buttons, click on "Donate"

    • Fill in or select the following

      Orangization name/Service
      Currency
      Contribution amount
      Plain text e-mail address

    • Click on Create Button

    • In the new window that opens, click on the Email tab

    • Click the Select Code button, then copy (Ctrl-C) the code.

  • Replace "PAYPAL EMAIL CODE GOES HERE" (in orange) with the Paypal email code you obtained.
Customizing
  • Toolbar Icon

  • Window size

    • The window is set to be 800 x 800 in size. It's set to fit the paypal site, but you can adjust it if you desire.

    • *Note* The code above opens a new browser window as paypal will not allow you to open it inside a frame
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 8/16/2009 9:43 PM EST : RE: Toolbar
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Main Toolbar | Any Widget | Donate | Games | Translate

Adding a Game Widget to the Toolbar

This post will show you how to add this specific HeyZap widget to your toolbar... I've updated this thread with a better way to add any widget to the toolbar.



The Code
// Add custom variables here
 addToolbarLink.push(["center","frame:650,650","Play Games","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/games.png","http://www.heyzap.com/embed"])
Customizing
  • The javascript portion should be added along with all the other toolbar link definitions. The frame is set to go into the center part of the toolbar with the popup size being 650px x 650px.
Edit (8/18/2009): Added a note and alternative script for the HeyZap Game Widget... this alternative method doesn't load the widget until you click on the toolbar icon and thus makes your page load faster
Edit (9/2/2009): Edited this post to only have the toolbar variable... I'm adding another post in this thread on the best way to add any widget.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Guppy Queen (Applicant) 8/25/2009 6:06 PM EST : RE: Toolbar
Guppy Queen
Posts: 41034

0
Like

0
Dislike

This is working on my forum now. Thanks for helping me on chat Mottie. Your the best!
TopBottom

Mottie (SuperAdmin) 9/2/2009 2:24 AM EST : RE: Toolbar
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Main Toolbar | Any Widget | Donate | Games | Translate

Add Any Widget to the toolbar

This thread will teach you the best way to add any widget to your toolbar.
  1. First off find a widget you want to add... a good place to start is Google or Widgetbox.
  2. Adjust the colors, size and any other options of the widget online.
  3. Now open up your favorite text editor (non-rich text editor, like notepad)
  4. Copy the template below into your text editor
    <html>
    <head>
    <style type="text/css">
    body, table { margin: 0 auto !important; }
    a:link { color: #dddddd; }
    a:hover { color: #ffcc00; }
    .gadget td a, .powered { display: none; }
    .gadget td { height: auto !important; }

    </style>

    <!-- PASTE THE WIDGET CODE HERE -->

    </head>
    <body>
    </body>
    </html>
  5. Now go back to your browser and get the widget code... Select All (Ctrl-A), then copy (Ctrl-C) the code for the widget.
  6. Replace the text in green with the widget code.
  7. Save the file with the name of your widget with a ".htm" on the end (e.g. "mywidget.htm")
  8. Upload your file to where ever you host the files for your site (e.g. GP file manager or myOtherDrive.com)
  9. Now add the following template to your toolbar definitions (in your toolbaroptions.js file if you made one)

     addToolbarLink.push(["right","frame:x,y","myWidget's Name","myWidget's Icon","http://.../mywidget.htm"]);

    • "right" - Change this to where you want the widget's icon to be place on the toolbar (left, center or right).
    • "frame:x,y" - What you're doing is adding an frame containing the page you just saved, replace the x,y with the size of the widget but you may have to add a little extra as some widgets include ads =(
    • "myWidget's Name" - Name of your Widget of course
    • "myWidget's Icon" - Location (URL) of your icon for this widget
    • "http://.../mywidget.htm" - This is the URL pointing to the file you just uploaded.
  10. Save these changes, upload the toolbar options or whatever you need to do here to get this new icon on your toolbar
  11. Reload your page and go back and adjust the frame size as needed.
*Note: the CSS in orange is specifically for Google widgets... it hides the links to add a google widget and other stuff so you maximize your window. You can add a body background color or text color here but I've left it transparent.

Add a Mini Facebook Widget (Google widget)

This is basically done exactly the same as the steps above. You can use my "facebook.htm" if you wish.



Code (HTML) - * You don't need to make this file if you use my facebook.htm in the javascript part of the code below *
<html>
<head>
<style type="text/css">
body, table { margin: 0 auto !important; }
a:link { color: #dddddd; }
a:hover { color: #ffcc00; }
.gadget td a, .powered { display: none; }
.gadget td { height: auto !important; }

</style>

<!-- PASTE THE WIDGET CODE HERE -->
<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/100080069921643878012/facebook.xml&amp;synd=open&amp;w=350&amp;h=400&amp;title=Facebook&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>

</head>
<body>
</body>
</html>
Code (Javascript)
addToolbarLink.push(["right","frame:360,430","Mini Facebook","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/facebook-1.png","http://www.axiomfiles.com/Files/258012/facebook.htm"]);

Add a All-In-One Mail Widget (Google Widget)

This widget is also made using the steps above.



Code (HTML) - * You don't need to make this file if you use my allinonemail.htm in the javascript part of the code below *
<html>
<head>
<style type="text/css">
body, table { margin: 0 auto !important; }
a:link { color: #dddddd; }
a:hover { color: #ffcc00; }
.gadget td a, .powered { display: none; }
.gadget td { height: auto !important; }

</style>

<!-- PASTE THE WIDGET CODE HERE -->
<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/104342096967082496017/multipurpose-all-in-one-gadget.xml&amp;synd=open&amp;w=400&amp;h=400&amp;title=All+in+One+Mail&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>

</head>
<body>
</body>
</html>
Code (Javascript)
addToolbarLink.push(["right","frame:415,415","All In One Mail","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/mail.png","http://www.axiomfiles.com/Files/258012/allinonemail.htm"]);
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 10/26/2009 7:46 AM EST : RE: Toolbar
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Main Toolbar | Any Widget | Donate | Games | Translate

Translate your page

I haven't been able to test this throughly since I haven't seen any GuildPortal pages that aren't in English, but this code should work. It should automatically translate the page to your default language using google's translator. Just add this code to your toolbar.

Code
addToolbarLink.push(["left","code","Translate","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/translate.png","window.location.href='http://translate.google.com/translate?u=' + encodeURIComponent(window.location.href);"]);
Customizing
  • The basic template to add a link to your toolbar is this, the only customizable parts of this link are the location, Title and Icon URL:

    addToolbarLink.push(["location","type","Title","Icon URL","Link/Code"]);

  • To move the icon to the desired position on the toolbar, change the location to "left", "center" or "right". Also note that the higher up the link is in your HTML, the further left it will be on the toolbar.
  • Replace the image if desired, the current icon looks like this:  
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%