HomeMottie's Help SiteResourcesSupport Tickets
Sign Up! • Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Toolbar
1 2Next
Mottie (MVP) 8/14/2009 4:22 PM EST : Toolbar link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
Main Toolbar | Any Widget | Donate | Games | Translate
Toolbar v1.01

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>
>>help-site<<
Top • Bottom

Mottie (MVP) 8/14/2009 11:38 PM EST : RE: Toolbar link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
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
>>help-site<<
Top • Bottom

Mottie (MVP) 8/16/2009 9:51 PM EST : RE: Toolbar link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
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.
>>help-site<<
Top • Bottom

Eph (MVP) 8/18/2009 3:30 AM EST : RE: Toolbar link
GuildPortal MVP
Eph
Posts: 596
Zomgawsh Poster
WHEW! Finally got this thing working, and customized. It's totally awesome Mottie!

Link to my test site

Just a few questions: For the search box, I can't seem to get any popup to change where I'm searching when I click the google icon. Here is the code I replaced the wowhead code with:

addToolbarSearch.push (["Armory","http://i144.photobucket.com/albums/r176/8r9/Aion/armory.png","http://www.aionarmory.com/search.aspx?search_text="]);

*edit* Just noticed, it does not work for me on you test sites toolbar either.

One more question, is it possible to add an image in the pop up code? Not a big deal for me though.

"popup:x"

addToolbarLink.push(["center","popup:200","My Announcement","Announce.png","<h2>HELLO!</h2>This is an example announcement!"]);

Thanks again for your awesome work on everything you bring to the community!
Top • Bottom

Mottie (MVP) 8/18/2009 12:10 PM EST : RE: Toolbar link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
Hi Eph!!

I'm glad you're finding it useful! 
  • Ok, so I fixed the search function. I had to add a new variable to set the size of the search popup.
  • I also added a new icon into the popup that lets you move it across the bar.
  • And lastly, I added an example into the alert popup to show you how to add images (make sure you use single quotes inside). Oh, and because of this I realized I needed to change the CSS around since it was resizing all the images inside the popup to the toolbar icon size.
Thanks for finding the problem! My eyes start crossing from looking at this thing and I forget to test every part of it when I make little changes.. keep on the look out for problems for me! 
>>help-site<<
Top • Bottom

Guppy Queen (New Admin) 8/20/2009 12:19 AM EST : RE: Toolbar link
Guppy Queen
Posts: 41034
Zomgawsh Poster
This looks really awesome Mottie. I'll check out the features later this month.
Top • Bottom

Mottie (MVP) 8/21/2009 8:10 PM EST : RE: Toolbar link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
Updated the toolbar so the icons don't look all messed up on IE - which happened from my last update =/
>>help-site<<
Top • Bottom

Guppy Queen (New Admin) 8/25/2009 10:13 PM EST : RE: Toolbar link
Guppy Queen
Posts: 41034
Zomgawsh Poster
Thanks for helping me add the toolbar to my site Mottie.
Top • Bottom

Eph (MVP) 8/29/2009 6:41 AM EST : RE: Toolbar link
GuildPortal MVP
Eph
Posts: 596
Zomgawsh Poster
Is it possible to have the pop-up move icon on the left side of frames? I ask because I noticed most of the time when I want to move a pop-up around it is because it runs off the right side of the page, and the move icon is not in view.
Top • Bottom

Mottie (MVP) 8/29/2009 10:42 AM EST : RE: Toolbar link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
Hi Eph!

Which popups are going off the screen? I'd like to know so I can look into fixing the problem. I checked out your site with Firefox and IE and all of the popups looked fine to me.

Anyway, it's easy to move the icons, just change this part of, or add it below, the toolbar CSS:
#tbPopup .move { float: left; padding-right: 2px; }
#tbPopup .close { float: left; padding-right: 5px; }


>>help-site<<
Top • Bottom

1 2Next
Admins Online
There are   members online.
GuildPortal Home • Frequently Asked Questions • Videos • Recent Updates • Support • Terms of Use • Privacy Policy
GuildPortal™ Axiom Shift, LLC.  All Rights Reserved. All game-related trademarks are properties of their respective owners. Several adorable monkeys were harmed during the creation of this site, and for that, we are wholly unapologetic.
So-and-so has logged on!
%title%
%message%