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! > Recruiting box, item link, Raiding box
Mottie (MVP) 7/28/2008 8:15 AM EST : RE: WoW Guild Bar
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

I only used a table for alignment issues. The resulting codes can be put into pretty much anything. So I don't see why you couldn't put a flash banner behind it.
TopBottom

Nybors (New Admin) 7/29/2008 10:17 AM EST : RE: WoW Guild Bar
Nybors
Posts: 436
Fingers of Fury!

This rocks

I am attempting to do this in the content box

I had it working with your placed .js file looked great i got all excited and then...
 i edited my /js file uploaded it to ripaway like u said and now it says my message it too long and needs to be under 7000 characters except i only have 1044

now all i get is the burning crusade logo

edit**GP does not seem to update my changes very quickly either. I changed the script link from the one in your post to http://h1.ripway.com/eternity-wow/guildbar.js several times but GP does not seem to save it either

edit2** seems to ahve finally save my correct url there but just a logo thus far
TopBottom

Mottie (MVP) 7/29/2008 10:28 AM EST : RE: WoW Guild Bar
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

I checked it out and I see you added some remarks at the top of the javascript file:

**********needs to be saved as guildbar.js*********** and uploaded
********** place killed between the " " to change over*********


The browser's javascript engine is choking on this, so you need to add a /* to the beginning of that comment and a */ to the end. The javascript engine will then ignore that portion. I tested it out and it and your guild bar appears to be working just fine.


TopBottom

Nybors (New Admin) 7/29/2008 12:05 PM EST : RE: WoW Guild Bar
Nybors
Posts: 436
Fingers of Fury!

Mottie said:
I checked it out and I see you added some remarks at the top of the javascript file:

**********needs to be saved as guildbar.js*********** and uploaded
********** place killed between the " " to change over*********


The browser's javascript engine is choking on this, so you need to add a /* to the beginning of that comment and a */ to the end. The javascript engine will then ignore that portion. I tested it out and it and your guild bar appears to be working just fine.



I deleted the whole section and started over
My poor attempt at notating things

copy and paste with your url to the .js file works like a champ

I deleted my .js file
Pasted your scripting changed to my link (unedited)
put my link in .. nothing works just the logo

you deserve props for putting up with us noobs and ones that know enough to wreck it

**edit i did it again and just changed the url and no luck yet and just get a mesage that it is too long in the content box as soon as i dont use your link it does not work, switch it back and it works just fine
TopBottom

Mottie (MVP) 7/30/2008 9:01 AM EST : WoW Guild Bar v1.1
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

AoC Guild Bar v1.0 (outdated) | WoW Guild Bar: v1.0 (outdated) | v1.1 (TBC) | v1.2 (WotLK) | 1.21 (Ulduar) | v1.22 (Crusader) | v 1.23 (Icecrown)

Guild Bar Version 1.1 has these changes:
  • It was difficult to adjust the recruit bar and progression bar sizes so that the icon wouldn't wrap, so I changed them to a percentage and now you should only need to adjust the ".guildbar" size in the CSS.
  • Moved the center image out of the CSS, as it was getting scrunched with different bar sizes. It's now an <img> in the table.
  • Added a new banner CSS which adds a background image to the bar. It basically looks like the logo is overlapping this image for a nicer look

  • I also updated the javascript so you won't need to replace your single quotes/apostrophes with "&#92;&#39;"... the code does it for you now.
Banner Area or Content Box
<!-- HTML Combined Box (with image)
************************************ -->
<div id="banner" align="center">
<table class="guildBar" border=0>
<tr>
 <td id="recruitBar"></td>
 <td id="wowImage"><img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/TBC.png"></td>
 <td id="raidingBar"></td>
</tr>
</table>
</div>


<!-- Stylesheet
************************************ -->
<style type="text/css">
.guildBar { width:500px; margin-right:auto; margin-left:auto; margin-top:110px;}
#banner { background: url(YOUR BANNER IMAGE URL) top center no-repeat; height:150px; border: transparent 1px solid; }
.dim { opacity: .3; filter: alpha(opacity=30); }

#recruitBar { width:33%; text-align:right; vertical-align:bottom; font-family:sans-serif; font-size:70%; white-space:nowrap; }
#recruitBar a, #recruitBar img { color:#999; text-decoration:none; border:0px; width:20px; height:20px; padding:0px 1px 0px 0px; }
.recruitToolTip { color: orange; font-weight: bold; vertical-align:top; }

#raidingBar { width:33%; text-align:left; vertical-align:bottom; color:#999; font-family:sans-serif; font-size:70%; white-space:nowrap; }
#raidingBar a, #raidingBar img { color:#999; text-decoration:none; border:0px; width:20px; height:20px; padding:0px 1px 0px 0px; }
.raidingToolTip { color: #0080ff; font-weight: bold; vertical-align:top; }

.killedBoss { color:#888888; text-decoration: line-through; }
.toKillBoss { color: #dddddd; text-decoration: none; }
.killedText { color: #ff0000; }

#dhtmltooltip { position: absolute; width: 150px; border: #888888 1px solid; padding: 3px; background: #222222; color: #dddddd; visibility: hidden; z-index: 100; }
</style>
<script src="URL TO YOUR guildbar.js"></script>

"guildbar.js" File
var classrq = new Array();
var progress = new Array();

/* Recruitment Bar - Class Needs
 ********************************************
- Each class variable is set up as follows:
   class.push ([ "Thumbnail Image URL",
    "Class Name",
    "Class Needs"
   ])
- recruitKeyWord defines the word to match in the "Class Needs" to
  set icon dimmer, the text is case sensitive.
 ******************************************** */
var recruitTitle = "Recruitment";
var recruitKeyWord = "Closed";
var recruitImagesPerRow = 10;
var linkToRecruitmentPost = "http://recruitme.com";

classrq.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/dk.png",
 "<font color=#c41f3b>Death Knight</font>",
 "Only Gnomes need apply"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/druid.gif",
 "<font color=#ff7d0a>Druid</font>",
 "Feral<br>Resto"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/hunter.gif",
 "<font color=#abd473>Hunter</font>",
 "BM/Marksman (650+ DPS only fo' shizzle)"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/mage.gif",
 "<font color=#69ccf0>Mage</font>",
 "Frost/Arcane"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/paladin.gif",
 "<font color=#f58cba>Paladin</font>",
 "Prot<br>Holy"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/priest.gif",
 "<font color=#ffffff>Priest</font>",
 "Shadow<br>Holy"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/rogue.gif",
 "<font color=#fff569>Rogue</font>",
 "Closed"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/shaman.gif",
 "<font color=#2459ff>Shaman</font>",
 "Resto"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/warlock.gif",
 "<font color=#9482ca>Warlock</font>",
 "Affliction"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/warrior.gif",
 "<font color=#c79c6e>Warrior</font>",
 "Closed"
]);

/* Progress Bar - Instance and Boss status
********************************************
- Each progression variable is set up as follows:
   progress.push ([
    ["Thumbnail Image URL"],
    ["Instance Name", "Instance Status"],
    ["Instance Boss #1", "Boss #1 Status"],
    ["Instance Boss #2", "Boss #2 Status"],
    ...
    ["Last Instance Boss", "Last Boss Status"]
   ]);
- The "raidingKeyWord" defines the word to match in the "Instance Status"
  to set icon dimmer, the text is case sensitive. Default is set to "No"...
  so, the words "No", "Not", "None" and "Noogies" will all cause the
  instance icon to dim. Also, leaving the "Instance Status" and the first
  boss status ("Boss #1 Status") blank will dim the icon.
- The "bossKilledKeyWord" defines the word to match to then apply the
  "killedBoss" and "killedText" CSS classes to the text.
******************************************** */
var raidingTitle = "Progression";
var raidingKeyWord = "No";
var bossKilledKeyWord = "Killed";
var raidingImagesPerRow = 11;
var linkToRaidingSite = "http://www.wowjutsu.com/us/";

/* ********************************************
   The Burning Crusade
   ******************************************** */
// KARAZHAN
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Kar.gif"],
 ["Karazhan", "(Farm)"],
 ["Animal Boss", "Killed"],
 ["Attumen the Huntsman", "Killed"],
 ["Moroes", "Killed"],
 ["Maiden of Virtue", "Killed"],
 ["Opera Event", "Killed"],
 ["Nightbane", "Killed"],
 ["The Curator", "Killed"],
 ["Shade of Aran", "Killed"],
 ["Terestian Illhoof", "Killed"],
 ["Netherspite", "Killed"],
 ["Chess Event", "Killed"],
 ["Prince Malchezaar", "Killed"]
]);
// ZUL'AMAN
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/ZA.gif"],
 ["Zul'Aman", "(in progress)"],
 ["Nalorakk", "Killed"],
 ["Akil'Zon", "Killed"],
 ["Jan'Alai", "Killed"],
 ["Halazzi", "Killed"],
 ["Malacrass", "60%"],
 ["Zul'jin", ""]
]);
// DOOM LORD KAZZAK
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/DLK.gif"],
 ["Doom Lord Kazzak", "Noogied us"],
 ["Doom Lord Kazzak", ""]
]);
// DOOMWALKER
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/DW.gif"],
 ["Doomwalker", ""],
 ["Doomwalker", ""]
]);
// GRUUL'S LAIR
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/GL.gif"],
 ["Gruul's Lair", "(Farm)"],
 ["High King Maulgar", "Killed"],
 ["Gruul", "Killed"]
]);
// MAGTHERIDON'S LAIR
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Mag.gif"],
 ["Magtheridon's Lair", "(Farm)"],
 ["Magtheridon", "Killed"]
]);
// SERPENTSHRINE CAVERN
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/SSC.gif"],
 ["Serpentshrine Cavern", ""],
 ["Lurker", "Killed"],
 ["Hydross", "Killed"],
 ["Morogrim", "Killed"],
 ["Leotheras", "Killed"],
 ["Karathress", "Killed"],
 ["Lady Vashj", "Killed"]
]);
// THE EYE, TEMPEST KEEP
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/TK.gif"],
 ["The Eye", ""],
 ["Void Reaver", "Killed"],
 ["Al'ar", "Killed"],
 ["Solarian", "Killed"],
 ["Kael'thas", "Killed"]
]);
// BATTLE FOR MOUNT HYJAL
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/MH.gif"],
 ["Battle for Mount Hyjal", "(in progress)"],
 ["Rage Winterchill", "Killed"],
 ["Anetheron", "Killed"],
 ["Kaz'rogal", "Killed"],
 ["Azgalor", "Killed"],
 ["Archimonde", "10%"]
]);
// BLACK TEMPLE
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/BT.gif"],
 ["Black Temple", "(in progress)"],
 ["High Warlord Naj'entus", "Killed"],
 ["Supremus", "Killed"],
 ["Shade of Akama", "Killed"],
 ["Teron Gorefiend", "40%"],
 ["Gurtogg Bloodboil", ""],
 ["Reliquary of Souls", ""],
 ["Mother Shahraz", ""],
 ["The Illidari Council", ""],
 ["Illidan Stormrage", ""]
]);
// SUNWELL PLATEAU
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/SP.gif"],
 ["Sunwell Plateau", "Nothing to see here, move along"],
 ["Kalecgos", ""],
 ["Brutallus", ""],
 ["Felmyst", ""],
 ["Eredar Twins", ""],
 ["M'uru", ""],
 ["Kil'jaeden", ""]
]);

/* ********************************************
   Don't change anything below
   ******************************************** */
// Recruitment bar
var sQ = "&#92;&#39;";
var rb = "<div><a href=\"" + linkToRecruitmentPost + "\">" + recruitTitle + "</a></div>";
 for (var j=0; j<classrq.length; j++) {
  rb += "<a href=\"" + linkToRecruitmentPost;
  rb += "\" =\"ddrivetip('<span class=recruitToolTip>";
  rb += classrq[j][1].replace(/\'/g,sQ);
  rb += "</span><br>" + classrq[j][2].replace(/\'/g,sQ);
  rb += "', '', '300');\" =\"hideddrivetip()\"><img src=\"";
  rb += classrq[j][0].replace(/\'/g,sQ) + "\"";
   if (classrq[j][2].match(recruitKeyWord)) { rb += " class=dim"; }
  rb += "></a>";
 if ( (j+1)%recruitImagesPerRow == 0 ) { rb += "<br>"; }
 }
 rb += '</a>';

// Progression Bar
var pb = "<div><a href=\"" + linkToRaidingSite + "\">" + raidingTitle + "</a></div>";
 for (var inst=0; inst < progress.length; inst++) {
  pb += "<a href=\"" + linkToRaidingSite;
  pb += "\" =\"ddrivetip('<table><tr><td class=raidingToolTip width=200px>";
  pb += progress[inst][1][0].replace(/\'/g,sQ) + "</td><td>" + progress[inst][1][1].replace(/\'/g,sQ) + "</td></tr>";
  for (var boss=2; boss < (progress[inst].length); boss++) {
   if (progress[inst][boss][1].match(bossKilledKeyWord)) {
    pb += "<tr><td class=killedBoss>" + progress[inst][boss][0].replace(/\'/g,sQ) + "</td><td class=killedText>";
   } else {
    pb += "<tr><td class=toKillBoss>" + progress[inst][boss][0].replace(/\'/g,sQ) + "</td><td>";
   }
  pb += progress[inst][boss][1] + "</td></tr>";
  }
  pb += "</table>', '', '300');\" =\"hideddrivetip()\"><img src=\"";
  pb += progress[inst][0] + "\"";
   if (progress[inst][1][1].match(raidingKeyWord) || (progress[inst][1][1] == "" && progress[inst][2][1] == "")) pb += " class=dim";
  pb += "></a>";
   if ( (inst+1)%raidingImagesPerRow == 0 ) { pb += "<br>"; }
 }
 pb += "</a>";
 document.getElementById('recruitBar').innerHTML = rb;
 document.getElementById('raidingBar').innerHTML = pb;
Customizing the Script
  • Please refer back to the first post in this thread for the details on changing the recruitment, instance and boss status. I just didn't want to cut and paste it all here.
Changes with this verion

The biggest difference from version 1 and this version is the CSS

Guild Bar Spacing
  • The default of the ".guildBar" class is 500 pixels (in purple), you can adjust this as needed to fit your content box or header.
  • If you end up with your guild bar uncentered, adjust the #recruitBar and #raidingBar width percentages to adjust it.
Banner Image
  • Remove your previous image because this one is set up for the over lap of the guild bar.
  • Change the "#banner" class in the CSS:

    • Replacing the text in green with your image URL
    • Adjust the height of the image to match your image height (text in purple).
  • Change the ".guildbar" class

    • Adjust the "margin-top:100px;" in purple to position the guildbar near the bottom of your image. This number is about 40 pixels less than your banner image height.
Edit (10/28/2008): Added "border: transparent 1px solid;" into the "#banner" definition in the CSS. This was done to remove the gap from the top as seen in Chrome and I believe older versions of IE.
Edit (11/4/2008): Added recruitment class colors.
TopBottom

LochenTwo (Guild Admin) 8/6/2008 1:04 PM EST : RE: WoW Guild Bar v1.1
Artiste!
LochenTwo
Posts: 2072
Zomgawsh Poster

I seem to be getting the same error that prevents you from copy/pasting the css into the stylesheet, claming html markup woes. So far, no luck with Firefox or Safari on a mac, using Text Edit. I'm trying to paste it into a content box and the style sheet. Could it be I just have too much going on in the stylesheet already? I've got the repeating banner set up in there.

Thanks in advance for the cool tricks

TopBottom

Mottie (MVP) 8/6/2008 2:41 PM EST : RE: WoW Guild Bar v1.1
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

There is a limit on the amount of stuff you can add into the header. That's why I changed this to have all the javascript in an external file. I'm not sure about the custom stylesheet, but you can always put the CSS into an external file too. Copy your CSS into a file and name it ".css", then put this into the banner area.
<link rel="stylesheet" href="URL TO YOUR .css FILE" type="text/css" media="screen">
There isn't that much scripting for the repeating banner, but you could always put that into an external javascript file (.js) too.

Edit: Oh DUH, I just realized... when you copy the CSS into the style sheet, remove the <style type="text/css> from the top and </style> from the bottom, that would give you the markup error.
TopBottom

LochenTwo (Guild Admin) 8/6/2008 5:30 PM EST : RE: WoW Guild Bar v1.1
Artiste!
LochenTwo
Posts: 2072
Zomgawsh Poster

Hmm. I guess I have the room as nothing is getting cut off. I tried taking off the tags (actually remembered that from another nifty Mottie thread). I narrowed it down to this line: <script src="URL TO YOUR guildbar.js"></script>
It really doesn't like that one. I tried nixing the script tags but I get a WoW logo and nothing else with both my js file and yours

/rolls up shirtsleeves

TopBottom

Mottie (MVP) 8/6/2008 6:27 PM EST : RE: WoW Guild Bar v1.1
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Ok I looked at your site and you should just add the script line into the content box with the HTML.

I didn't realize but the auto-resizing banner also has a "banner" class defined, so I changed the div id below to "banner2". Then I figured since you're not putting it in the banner area, why not just remove it? Then with that removed, you'll need to change your CSS a tiny bit... LOL it just keeps getting changed. Also you'll need to remove the src="http://www.axiomfiles.com/Files/243007/guildbar.js" from the Custom Stylesheet

CSS
.guildBar { width:500px; margin-right:auto; margin-left:auto; }
.dim { opacity: .3; filter: alpha(opacity=30); }

#recruitBar { width:33%; text-align:right; vertical-align:bottom; font-family:sans-serif; font-size:70%; white-space:nowrap; }
#recruitBar a, #recruitBar img { color:#999; text-decoration:none; border:0px; width:20px; height:20px; padding:0px 1px 0px 0px; }
.recruitToolTip { color: orange; font-weight: bold; vertical-align:top; }

#raidingBar { width:33%; text-align:left; vertical-align:bottom; color:#999; font-family:sans-serif; font-size:70%; white-space:nowrap; }
#raidingBar a, #raidingBar img { color:#999; text-decoration:none; border:0px; width:20px; height:20px; padding:0px 1px 0px 0px; }
.raidingToolTip { color: #0080ff; font-weight: bold; vertical-align:top; }

.killedBoss { color:#888888; text-decoration: line-through; }
.toKillBoss { color: #dddddd; text-decoration: none; }
.killedText { color: #ff0000; }
Content Box
<table class="guildBar" border=0>
<tr>
 <td id="recruitBar"></td>
 <td id="wowImage"><img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/WotLK.png"></td>
 <td id="raidingBar"></td>
</tr>
</table>
<script src="http://www.axiomfiles.com/Files/243007/guildbar.js"></script>

TopBottom

LochenTwo (Guild Admin) 8/7/2008 6:01 AM EST : RE: WoW Guild Bar v1.1
Artiste!
LochenTwo
Posts: 2072
Zomgawsh Poster

Woot!

Wish I could give you one of the cookies I made this morning. But I'll have to settle for passing on the recipe.

TopBottom

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