Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Couple of simple questions looking for some simple answers, please :D
Queen_of_Blades (New Admin) 2/3/2011 2:57 AM EST : RE: Couple of simple questions looking for some simpl...
Queen_of_Blades
Posts: 86
Posts With Wolves

Mottie said:
Hi Queen_of_Blades!

I didn't stop talking, I still here to help. What is your question? If you were asking about the toolbar, click the little house on the toolbar for one option.


mkay well im trying to work on getting that toolbar placed onto my site but i do have a few questions, but first let me give u a jist of what i have done so far.

i copied the complete code and placed it into a text program so that i could edit it as i saw fit to customize it to my site, here is the .js file (i actually uploaded it to that myotherdrive site that u listed but i cant seem to figure out how to get it so u can see it so i uploaded it to my guild sites files) so if u could go over it and make sure i got everything correct i would greatly appreciate it. just saves me from having to try and fix it once i put it onto the site

mkay next i know that on ur help site u posted this code
<!-- 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>
and it is supposed to go in the footer since the FULL code is too long for it, and when i finally get the toolbar options done correctly i would add my info in, yadda yadda yadda.

well my actual question is:
u said (and i quote), "
Add all your custom links and customize the variables to suit your needs. Save the file as something like "toolbar-options.js" so if i copied the whole code list would it be everything BUT the code that i linked in the box above? or what?

im still pretty noobish at this kinda stuff so i like to make sure before i do the final install on it, that and sometimes ur directions/instructions dont seem so simple to me even after i read and reread them five billion times

mkay so please let me know what u think mottie. and thanks. btw u need to answer ur chat pages
TopBottom

Mottie (MVP) 2/3/2011 9:29 AM EST : RE: Couple of simple questions looking for some simpl...
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Queen_of_Blades!

The file you linked has too much stuff in it!

So this is what I'll do:
  1. I think instead of adding the site menu into the footer, lets make a separate file. So save this file (toolbar-menu.htm) and upload it to your site. Copy the URL to this file.
  2. Now save this file (toolbar-options.js), replace the URL (in orange) in these options with the URL from step 1, then replace the options file you have. Also, the part in red has changed.

     addToolbarLink.push(["left","frame:250,310","Candara Guardians Site","http://i200.photobucket.com/albums/aa219/Widow-Of-D00m/Emotes/HomePage.png","http://dl.dropbox.com/u/1510510/testing/toolbar-menu.htm"]);

  3. Add this to your footer area html (Control Panel > Custom HTML & Script > Footer Area). Replace the URL in orange with the location of the file from step 2.

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://dl.dropbox.com/u/1510510/testing/toolbar-options.js"></script>
    <script type="text/javascript" src="http://www.axiomfiles.com/Files/258012/toolbar.js"></script>
    <link type="text/css" href="http://www.axiomfiles.com/Files/258012/toolbar.css" rel="Stylesheet" media="screen">
    <style type="text/css">
    /* Add Custom Styles here */
    /* Toolbar & Minibar (tbShow) that is visible when the bar is hidden */
    #toolbar, #tbShow {
     background: url(http://i200.photobucket.com/albums/aa219/Widow-Of-D00m/toolbar-blue.png) 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: #FFC000;
    }
    /* Popup Title */
    .tbPopupTitle { color: #dddddd; font-size: 120%; font-weight: bold; }
    /* Feed Title */
    .gfc-resultsHeader .gfc-title { color: #FFC000; font-size: 120%; font-weight: bold; }
    </style>
TopBottom

Queen_of_Blades (New Admin) 2/3/2011 8:14 PM EST : RE: Couple of simple questions looking for some simpl...
Queen_of_Blades
Posts: 86
Posts With Wolves

Mottie said:
Hi Queen_of_Blades!

The file you linked has too much stuff in it!

So this is what I'll do:
  1. I think instead of adding the site menu into the footer, lets make a separate file. So save this file (toolbar-menu.htm) and upload it to your site. Copy the URL to this file.
  2. Now save this file (toolbar-options.js), replace the URL (in orange) in these options with the URL from step 1, then replace the options file you have. Also, the part in red has changed.

     addToolbarLink.push(["left","frame:250,310","Candara Guardians Site","http://i200.photobucket.com/albums/aa219/Widow-Of-D00m/Emotes/HomePage.png","http://dl.dropbox.com/u/1510510/testing/toolbar-menu.htm"]);

  3. Add this to your footer area html (Control Panel > Custom HTML & Script > Footer Area). Replace the URL in orange with the location of the file from step 2.

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://dl.dropbox.com/u/1510510/testing/toolbar-options.js"></script>
    <script type="text/javascript" src="http://www.axiomfiles.com/Files/258012/toolbar.js"></script>
    <link type="text/css" href="http://www.axiomfiles.com/Files/258012/toolbar.css" rel="Stylesheet" media="screen">
    <style type="text/css">
    /* Add Custom Styles here */
    /* Toolbar & Minibar (tbShow) that is visible when the bar is hidden */
    #toolbar, #tbShow {
     background: url(http://i200.photobucket.com/albums/aa219/Widow-Of-D00m/toolbar-blue.png) 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: #FFC000;
    }
    /* Popup Title */
    .tbPopupTitle { color: #dddddd; font-size: 120%; font-weight: bold; }
    /* Feed Title */
    .gfc-resultsHeader .gfc-title { color: #FFC000; font-size: 120%; font-weight: bold; }
    </style>


im pretty sure i got it all done but one question before i press the save button.... would this (look in ur code above and the thing im talking about is colored GREEN) be my information? cause isnt that yours?
TopBottom

Queen_of_Blades (New Admin) 2/3/2011 8:36 PM EST : RE: Couple of simple questions looking for some simpl...
Queen_of_Blades
Posts: 86
Posts With Wolves

ok well i went ahead and saved it and everything works but some of the icons arent showing up. like on the bar itself and the menu ones too.... any thoughts?

also when i went to click on the roster from the menu, it opened up a window inside the pop up instead of changing the page itself... idk test it out and tell me what u think please?
TopBottom

Mottie (MVP) 2/4/2011 9:14 AM EST : RE: Couple of simple questions looking for some simpl...
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Queen_of_Blades!
  • Yes, the part in green is on my site, it's the main toolbar script.
  • The images that aren't working in your bar are because they are missing an image url for an icon. I didn't add them because I have no idea what they are supposed to look like. These are the two lines that need an icon (add the part in orange).
  • addToolbarLink.push(["right","feed:200","RoM Official News Feed","IMAGE URL","http://us.runesofmagic.com/us/news.rss"]);
    addToolbarLink.push(["right","feed:200","RoM Official Forum Announcement Feed","IMAGE URL","http://forum.us.runesofmagic.com/external.php?type=RSS2"]);
  • The menu popup isn't working because I forgot to add target="_parent" to each link... I've updated the toolbar-menu.htm file, just copy it again - sorry.

  • One last thing, there is an error on you page. The Join guild arrows script is missing an apostrophe at the end, I've highlighted it in red and made it bold:
    var leftArrow = 'http://i200.photobucket.com/albums/aa219/Widow-Of-D00m/Emotes/OMG___Watch_that__reverse__by_TheUncle2k.gif';
    var rightArrow = 'http://i200.photobucket.com/albums/aa219/Widow-Of-D00m/Emotes/OMG___Watch_that_by_TheUncle2k.gif';
TopBottom

Queen_of_Blades (New Admin) 2/4/2011 8:24 PM EST : RE: Couple of simple questions looking for some simpl...
Queen_of_Blades
Posts: 86
Posts With Wolves

well i got it all working properly, except the menu icons, i know u added the parent and i added that in u know like u told me, but it is still not working...

U_U


EDIT: nevermind i got it to work... thanks mottie ^.^
TopBottom

Queen_of_Blades (New Admin) 2/5/2011 6:26 PM EST : RE: Couple of simple questions looking for some simpl...
Queen_of_Blades
Posts: 86
Posts With Wolves

mkay... well ive come across something else for u to ponder over mottie

See some ppl have alot of medals awarded to them in our guild, and well thats why i asked u to come up with a condensed medal thingy for the roster. well when i was just looking around i clicked on someones roster profile and this happened.
Photobucket

now as u can see, when u look at someones roster profile it shows their medals (which is fine) but its very horizontal... which pushes the screen to stretch to the right and go off the page and so on.

is there a way that u could come up with some coding that would go in a hidden widget on the roster page (because thats where this information is located) that would make things after so many medals it would jump down to a new line?

heres an example of what i mean:

Awarded Medals:
M01 M02
M03
M04
M05
M06
M07
M08
M09
M10
M11
M12
M13
M14
M15
M16
M18
M19
M20
M21
M22
M23
M24
 M25
M26 M27 M28
M29
M30
M31
M32
M33
M34
M35
M36
M38
M39
M40
 --  --

anywho, something like that
TopBottom

Mottie (MVP) 2/6/2011 1:20 PM EST : RE: Couple of simple questions looking for some simpl...
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Queen_of_Blades!

Hmm, for a post named a "couple of simple questions" it sure has gotten long   LOL

Anyway, I put together this code for you. I incorporated it with the other medal code to keep it all together. Here you go 

Adjust the "medalsPerRow" variable to the number of medals you want in each row.
<script type="text/javascript">
$(document).ready(function(){
 var max = 30,
  medalsPerRow = 10,
  levels = {
   1  : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%201/award_star_bronze_1.png',
   5  : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%202/award_star_bronze_2.png',
   10 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%203/award_star_bronze_3.png',
   15 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%201/award_star_silver_1.png',
   20 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%202/award_star_silver_2.png',
   25 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%201/award_star_gold_1.png',
   30 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%202/award_star_gold_2.png'
  },
  /*******************************
   * Don't change anything below *
   *******************************/

  i, c, m, l, s;
 $('.gpWidget-rosterlrg').find('table[id$=_grdRoster]').find('tr').each(function(){
  c = $(this).find('td:eq(0)');
  l = c.find('img[title*="Medal"]').wrapAll('<span class="medals" style="display:none;" />').length;
  s = (l > max) ? max : Math.round(l/5) * 5;
  if (l < 5) { s = 1; }
  if (l > 0) {
   i = $('<span class="allMedals tooltip" title="Click to see all ' + l + ' medals"><img src="' + levels[s] + '"><span class="count">(' + l + ')</span>');
   i.appendTo(c)
    .click(function(){
     m = $(this).parent().find('.medals');
     if (!m.is('.modified')) {
      m.addClass('modified') // make popup medals easy to see
       .find('img').each(function(){
        $(this)
         .addClass('popupMedal')
         .after( '<span class="popupMedalName">' + this.title + '</span><br>' );
       });
     }
     $.facebox(m.html());
    });
  }
 });
 // this code fixes the medals on the character page
 if (window.location.href.match('CharacterID')){
  $('.gpWidget-rosterlrg').find('b:contains("Awarded Medals")').parent().find('img')
   .addClass('tooltip')
   .each(function(i){
    this.title = this.alt;
    if (i % medalsPerRow === 0) { $(this).before('<br>'); }
   });
 }
});
</script>
TopBottom

Queen_of_Blades (New Admin) 2/6/2011 5:31 PM EST : RE: Couple of simple questions looking for some simpl...
Queen_of_Blades
Posts: 86
Posts With Wolves

yea i know lol but i just seem to always come up with something new and admit it, u like it because it keeps u busy and think of new things to put in ur e-book
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%