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
Prev 1 2
Eph (MVP) 8/29/2009 1:38 PM EST : RE: Toolbar link
GuildPortal MVP
Eph
Posts: 596
Zomgawsh Poster
Thanks Mottie!

It's more of a consideration for someone that might have a smaller screen size. I have 4 computers in the house all with different size monitors, and on the smaller ones, like the 19"/17" standards, the Frame I have for the Aion Armory was running off the screen.

Soon after I posted my previous question though, I had gone in, and moved things around so the frame pop-ups were as far to the left of the bar as possible. So when you went and looked I had gotten it working better.

Again thank you very much for taking a look!

Top • Bottom

Mottie (MVP) 9/2/2009 2:39 AM EST : RE: Toolbar link
GuildPortal MVP
Mottie
Posts: 3872
Zomgawsh Poster
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"]);
>>help-site<<
Top • Bottom

Guppy Queen (New Admin) 9/3/2009 1:15 PM EST : RE: Toolbar link
Guppy Queen
Posts: 41034
Zomgawsh Poster
Mottie said:
Add Any Widget to the toolbar


wow Mottie, this is a great feature! thank you.
Top • Bottom

Mottie (MVP) 10/26/2009 7:33 AM EST : RE: Toolbar link
GuildPortal MVP
Mottie
Posts: 3872
Zomgawsh Poster
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:  
>>help-site<<
Top • Bottom

Mottie (MVP) 10/26/2009 7:54 AM EST : RE: Toolbar link
GuildPortal MVP
Mottie
Posts: 3872
Zomgawsh Poster
Note: The jQuery UI script to make the popups draggable was removed from GP. You can add this functionality back by adding this to your site: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>, it's been added to the main toolbar code as well.
>>help-site<<
Top • Bottom

Guppy Queen (New Admin) 10/26/2009 10:56 AM EST : RE: Toolbar link
Guppy Queen
Posts: 41034
Zomgawsh Poster
I missed the translate feature. Thanks for the additional updates Mottie. They are fantastic.
Top • Bottom

Prev 1 2
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%