Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Archive > WoW Guild Bar
Mottie (SuperAdmin) 7/17/2008 3:45 AM EST : WoW Guild Bar
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

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

Adding a WoW Guild Bar

GuildPortal admin site link to original post

Edit: I apologize for rushing to finish this, I didn't even test it on Internet explorer, nor did I try to actually put it into the banner area (half the script gets cut) *hang head*. So, this post is now updated

This is a combined World of Warcraft status bar. It's original form is seen on the Crit Happens website, but it has been modified here for easier updating for everyone. This bar is best added in the Banner Area of your website (you will need a paid subscription), but you can add it anywhere on the page - read the customizing section below for more details. See this bar in action here



Banner Area or Content Box

The HTML portion can be put into the banner area or a content box. The CSS can also be put into the Custom StyleSheet, but the "#dhtmltooltip" is automatically added by GuildPortal and is over-ridden. So if you don't care about the tooltip background color or it's border, then put it into the Custom StyleSheet.
<!-- HTML Combined Box (with image)
************************************ -->
<table class="guildBar" align="center">
<tr>
 <td id="recruitBar"></td>
 <td id="wowImage"></td>
 <td id="raidingBar"></td>
</tr>
</table>


<!-- Stylesheet
************************************ -->
<style type="text/css">
.guildBar { width:740px; margin-right:auto; margin-left:auto;}
#wowImage { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/TBC.png) center center no-repeat; width:175px; height:90px; }
.dim { opacity: .3; filter: alpha(opacity=30); }

#recruitBar { width:280px; 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:280px; 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="http://www.axiomfiles.com/Files/243007/guildbar.js"></script>

File to make "guildbar.js"

If you want to add this guild bar into the banner area, it will be necessary to put the javascript below into a file. Copy and paste the code below into notepad and save the file as "guildbar.js". You need to do this because the script is too long to fit into the Banner Area. If you put this into a content box and want to include the javascript, just slap a "<script type=text/javascript>" to the top and a "</script>" at the bottom.

You can use the File Manager (Control Panel > File Manager) built into Guild Portal, but I recommend using a free hosting site like "ripway.com" to host the file. The reason is ripway provides an online text editor, you can easily update the information in the script, save and you're done. With the GuildPortal File Manager, you can upload the updated file and it should replace the existing one, but it's been hit or miss for me. Update the URL in green above to where you saved your file.

var classrq = new Array();
var progress = new Array();

/* Recruitment Bar - Class Needs
 ********************************************
- Each class variable is set up as follows:
   classrq.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.
- All apostrophes/single quotes (') are replaced
  with "&#92;&#39;". This is required for the
  tooltips to work properly.
 ******************************************** */
var recruitTitle = "Recruitment";
var recruitKeyWord = "Closed";
var recruitImagesPerRow = 10;
var linkToRecruitmentPost = "http://recruitme.com";

classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/druid.gif",
 "Druid",
 "Feral<br>Resto"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/hunter.gif",
 "Hunter",
 "BM/Marksman (650+ DPS only)"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/mage.gif",
 "Mage",
 "Frost/Arcane"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/paladin.gif",
 "Paladin",
 "Prot<br>Holy"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/priest.gif",
 "Priest",
 "Shadow<br>Holy"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/rogue.gif",
 "Rogue",
 "Closed"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/shaman.gif",
 "Shaman",
 "Resto"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/warlock.gif",
 "Warlock",
 "Affliction"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/warrior.gif",
 "Warrior",
 "Closed"
]);
classrq.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/dk.png",
 "Death Knight",
 "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.
- The "bossKilledKeyWord" defines the word to match
  to then apply the "killedBoss" and "killedText"
  CSS classes to the text.
- All apostrophes/single quotes (') are replaced
  with "&#92;&#39;". This is required for the
  tooltips to work properly.
******************************************** */
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&#92;&#39;Aman", "(in progress)"],
 ["Nalorakk", "Killed"],
 ["Akil&#92;&#39;Zon", "Killed"],
 ["Jan&#92;&#39;Alai", "Killed"],
 ["Halazzi", "Killed"],
 ["Malacrass", "60%"],
 ["Zul&#92;&#39;jin", ""]
]);
// DOOM LORD KAZZAK
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/DLK.gif"],
 ["Doom Lord Kazzak", ""],
 ["Doom Lord Kazzak", ""]
]);
// DOOMWALKER
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/DW.gif"],
 ["Doomwalker", "We be Noobs"],
 ["Doomwalker", ""]
]);
// GRUUL'S LAIR
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/GL.gif"],
 ["Gruul&#92;&#39;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&#92;&#39;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&#92;&#39;ar", "Killed"],
 ["Solarian", "Killed"],
 ["Kael&#92;&#39;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&#92;&#39;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&#92;&#39;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&#92;&#39;uru", ""],
 ["Kil&#92;&#39;jaeden", ""]
]);

/* ********************************************
   Don't change anything below
   ******************************************** */
// Recruitment bar
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];
  rb += "</span><br>" + classrq[j][2];
  rb += "', '', '300');\" =\"hideddrivetip()\"><img src=\"";
  rb += classrq[j][0] + "\"";
   if (classrq[j][2] == 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] + "</td><td>" + progress[inst][1][1] + "</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] + "</td><td class=killedText>";
   } else {
    pb += "<tr><td class=toKillBoss>" + progress[inst][boss][0] + "</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

Recruitment Bar
CSS
  • "#recruitBar" defines the recruitment box size and font size.
  • "#recruitBar a, #recruitBar img" defines the text color of the title and the image size and border color.
  • ".recruitToolTip" defines the style and color of the tooltip title.
  • "#dhtmltooltip" define the tooltip box, this is basically a copy of the default one with a different background color.
Variables (in red)
  • Box Title (recruitTitle):
    Default is set to "Recruitment". See the CSS above on how to change it's style.
  • Icon dimming (recruitKeyWord):
    The script looks for a keyword in your class needs to determine if the class image needs to be dimmed. Default is set to "Closed". The keyword is case sensitive.
  • Icon arrangement (recruitImagesPerRow):
    At this time, there are ten classes. The bar is designed to allow you to set the number of icons per row, default is set to 10. See the second image above to see what it looks like set to 5.
  • Icon link (linkToRecruitmentPost):
    The URL to your recruitment requirements or application thread should be typed in here. Default is "http://recruitme.com".
  • Class needs:
    Change your class needs as desired. The script is set up as follows:

    classrq.push ([ "Thumbnail Image URL",
      "Class Name",
      "Class Needs"
    ])

    You only need to change the "Class Needs" portion. In the example for Druids, you will see the class needs text looks like this: "Feral<br>Resto". The <br> in the middle is HTML code for new line. You can basically type in anything you want here except for apostrophes/single quote (') - if you want to add one, replace it with "&#92;&#39;". Sorry, but this is the only way to do it without breaking the tooltip.
Progression Bar
CSS
  • "#raidingBar" defines the progression box size and font size
  • "#raidingBar a, #raidingBar img" defines the text color of the title and the image size and border color.
  • ".raidingToolTip" defines the style and color of the tooltip title.
  • "#dhtmltooltip" defines the tooltip box, this is basically a copy of the default one with a different background color.
  • ".killedBoss" defines the boss name style when it has been killed. The default is set to put a line through the name.
  • ".toKillBoss" defines the boss name style when it hasn't been killed.
  • ".killedText" defines the style for the boss status when it has been killed. The default style makes the text red.
Variables (in red)
  • Box Title raidingTitle):
    Default is set to "Progression". See the CSS above on how to change the style of this text.
  • Icon dimming (raidingKeyWord):
    The script looks for a keyword in your instance status to determine if the image needs to be dimmed. Default is set to "No". The keyword is case sensitive. You can also leave the instance status blank, and as long as the first boss status is also blank, the instance icon will be dimmed.
  • Style for a killed boss (killedKeyWord):
    The script looks for this keyword in your boss status text to determine if it needs to apply CSS to it. Default is set to "Killed". The keyword is case sensitive.
  • Icon arrangement (raidingImagesPerRow):
    At this time, there are Eleven boss encounters listed (for TBC expansion). The bar is designed to allow you to set the number of icons per row, default is set to 11. See the second image above to see what it looks like set to 6.
  • Icon link (linkToRaidingSite):
      The URL to your a raiding status/ranking site can be added here. The default is "http://www.wowjutsu.com/us/".
  • Progression status:
    Change your instance and boss status as desired. The script 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"]
    ]);

    You only need to change the "Instance Status" and "Boss ## Status" portions of each instance. You can basically type in anything you want as a status except for an apostrophes/single quote (') - if you want to add one, replace it with "&#92;&#39;". Sorry, but this is the only way to do it without breaking the tooltip.
Bar Style
The Guild Bar has three portions. The left side has the recruitment bar, the middle has the logo and the right side has the raiding bar. The HTML is in blue above. If you want to switch them or use only one of the bars. Replace the HTML in blue with:
Recruitment Bar only:
<div id="recruitBar></div>

Raiding Bar only:
<div id="raidingBar></div>
If you decided to have these two bars switch places, edit the "#recruitBar" and "#raidingBar" in the CSS and switch the "text-align:" as well.

The WoW image in the middle can be replaced by your guild tabard or anything you want. Keep the image narrow, no more than 200px wide - you can adjust the size of the image box in the CSS (#wowImage) as needed. I also have a WotLK logo prepared, link to it at:
http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/WotLK.png



Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 7/30/2008 9:08 AM EST : WoW Guild Bar v1.1
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

AoC Guild Bar v1.0 (outdated) | WoW Guild Bar: v1.0 (outdated) | v1.1 (TBC) | v1.2 (WotLK) | v1.21 (Ulduar) | v1.22 (Crusader) | v1.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://www.guildportal.com/GuildImages/WOWRosterImages/druid.gif",
 "Druid",
 "Feral<br>Resto"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/hunter.gif",
 "Hunter",
 "BM/Marksman (650+ DPS only fo' shizzle)"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/mage.gif",
 "Mage",
 "Frost/Arcane"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/paladin.gif",
 "Paladin",
 "Prot<br>Holy"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/priest.gif",
 "Priest",
 "Shadow<br>Holy"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/rogue.gif",
 "Rogue",
 "Closed"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/shaman.gif",
 "Shaman",
 "Resto"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/warlock.gif",
 "Warlock",
 "Affliction"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/warrior.gif",
 "Warrior",
 "Closed"
]);
classrq.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/dk.png",
 "Death Knight",
 "Closed, for now"
]);

/* 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): Changed the "#banner" CSS by adding a border definition - adding this will fix the big gap at the top on Chrome and I believe older versions of IE.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 11/12/2008 3:38 AM EST : WoW Guild Bar v1.2 (WotLK)
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

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

Guild Bar Version 1.2 - WotLK update

*NOTE: Click on these links if you only want the recruitment portion or the progression portion of this bar.

Changes from v1.1:
  • The script is updated to include the new WotLK instances that I could find information on prior to it's release. I will try to update it as more instances become available (including the icons).
  • The javascript was changed to allow the tooltip to show a second status column. The first column has the instance & boss names, the second column shows the 10 man instance status and the third column shows the 25 man instance status. See it in action on the "Warcraft" tab of my test-site.

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/WotLK.png"></td>
 <td id="raidingBar"></td>
</tr>
</table>
</div>


<!-- Stylesheet
************************************ -->
<style type="text/css">
.guildBar { width:700px; 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:300px; text-align:right; vertical-align:bottom; font-family:sans-serif; font-size:70%; white-space:nowrap; }
#recruitBar a, #recruitBar img { color:#999999; 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:300px; text-align:left; vertical-align:bottom; color:#999999; font-family:sans-serif; font-size:70%; white-space:nowrap; }
#raidingBar a, #raidingBar img { color:#999999; 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>

Footer area or make a "guildbar.js" file

If you want to add this guild bar into the banner area, it will be necessary to put the javascript below somewhere else. You need to do this because the script is too long to fit into the Banner Area.
  1. Footer: Copy (Ctrl-C) the script below and paste (Ctrl-V) it into your footer. If you already have too much stuff in the footer, some info may get lost.

    Control Panel > Style & Colors > Footer (under Advanced Style Settings)
  2. Separate "guildbar.js" file:

    First off, add this line to the end of the HTML above (in blue):

    <script src="URL TO YOUR guildbar.js"></script>

    Then copy (Ctrl-C) and paste (Ctrl-v) the code below into notepad, remove the <script type="text/javascript"> at the top and the </script> from the bottom, then save the file as "guildbar.js".

    You can use the File Manager (Control Panel > File Manager) built into Guild Portal, but I recommend using a free hosting site like "ripway.com" to host the file. The reason is ripway provides an online text editor, you can easily update the information in the script, save and you're done. With the GuildPortal File Manager, you can upload the updated file and it should replace the existing one, but it's been hit or miss for me.

    Update the URL in green above to where you saved your file.

<script type="text/javascript">
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 with an annoyingly large Dinosaur"
]);
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=#9482c9>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 - 10 man", "Instance Status - 25 man"],
    ["Instance Boss #1", "Boss #1 Status - 10 man", "Boss #1 Status - 25 man"],
    ["Instance Boss #2", "Boss #2 Status - 10 man", "Boss #2 Status - 10 man"],
    ...
    ["Last Instance Boss", "Last Boss Status - 10 man", "Last Boss Status - 10 man"]
   ]);
- 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|closed|unknown";
var bossKilledKeyWord = "Killed";
var raidingImagesPerRow = 7;
var tooltipBossWidth = 250;
var tooltipKilledWidth = 80;
var linkToRaidingSite = "http://www.wowjutsu.com/us/";

/* ********************************************
   Wrath of the Lich King
   ******************************************** */
// NAXXRAMAS II
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Nax2-10.gif"]
,["Naxxramas II", "(10 man)<br>In Progress", "(25 man)"]
,["AW: Patchwerk", "Killed", "Killed"]
,["AW: Grobbulus", "Killed", ""]
,["AW: Gluth", "Killed", ""]
,["AW: Thaddius", "Attempted", ""]
,["PW: Noth the Plaguebringer", "Attempted", ""]
,["PW: Heigan the Unclean", "", ""]
,["PW: Loatheb", "", ""]
,["SW: Anub'Rekhan", "Killed", "Ouchy"]
,["SW: Grand Widow Faerlina", "Killed", ""]
,["SW: Maexxna", "", ""]
,["DW: Instructor Razuvious", "Killed", ""]
,["DW: Gothik the Harvester", "", ""]
,["DW: The Four Horsemen", "", ""]
,["FL: Sapphiron", "", ""]
,["KC: Kel'Thuzad", "", ""]
]);

// VAULT OF ARCHAVON
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/VoA-10.gif"]
,["Vault of Archavon", "(10 man)", "(25 man)"]
,["Archavon the Stone Watcher", "Killed", "Killed"]
]);

// CHAMBER OF ASPECTS
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/CoA-10.gif"]
,["Chamber of Aspects", "(10 man)", "(25 man)"]
,["Sartharion the Onyx Guardian", "Killed", "Killed (no dragons up)"]
]);

// THE EYE OF ETERNITY
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/EoE-10.gif"]
,["The Eye of Eternity", "(10 man)", "(25 man)"]
,["Malygos", "", ""]
]);

// ULDUAR RAID (10 man)
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Unk-10.gif"]
,["Ulduar Raid", "(10 man)<br>-closed-", "(25 man)<br>-closed-"]
,["-unknown-", "", ""]
]);

// AZJOL-NERUB RAID (10 man)
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Unk-10.gif"]
,["Azjol-Nerub Raid", "(10 man)<br>-closed-", "(25 man)<br>-closed-"]
,["-unknown-", "", ""]
]);

// ICECROWN CITADEL
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Unk-10.gif"]
,["Icecrown Citadel", "(10 man)<br>-closed-", "(25 man)<br>-closed-"]
,["-unknown-", "", ""]
,["The Lich King", "", ""]
]);

/* ********************************************
   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 + "\"  =\"hideddrivetip()\"";
  pb += " =\"ddrivetip('<table><tr><td class=raidingToolTip width=" + tooltipBossWidth + "px>" + progress[inst][1][0].replace(/\'/g,sQ);
  pb += "</td><td align=center valign=top nowrap width=" + tooltipKilledWidth + "px>" + progress[inst][1][1].replace(/\'/g,sQ);
  pb += "</td><td align=center valign=top nowrap width=" + tooltipKilledWidth + "px>" + progress[inst][1][2].replace(/\'/g,sQ) + "</td></tr>";
  for (var boss=2; boss<(progress[inst].length); boss++) {
   pb += "<tr><td";
   pb += (progress[inst][boss][1].match(bossKilledKeyWord) && progress[inst][boss][2].match(bossKilledKeyWord)) ? " class=killedBoss>" : ">";
   pb += progress[inst][boss][0].replace(/\'/g,sQ) + "</td><td align=center";
   pb += (progress[inst][boss][1].match(bossKilledKeyWord)) ? " class=killedText>" : ">"
   pb += progress[inst][boss][1] + "</td><td align=center";
   pb += (progress[inst][boss][2].match(bossKilledKeyWord)) ? " class=killedText>" : ">"
   pb += progress[inst][boss][2] +"</td></tr>";
  }
  pb += "</table>', '', '" + (tooltipBossWidth + tooltipKilledWidth) + "');\"><img src=\"" + 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;
</script>

Customizing the Script

Overall CSS
  • The class ".guildBar" defines the container for the recruit and progression bars. It is set as a default to width of 700 pixels (in purple), centered using the auto margin and adjusted down 110 pixels to place the bar at the bottom of the banner. You can adjust this as needed to fit your content box or header.
  • In the "#banner" CSS
    • Replace the URL in green with your image URL
    • Adjust the height of the image to match your image height (text in purple).
  • "#dhtmltooltip" defines the tooltip box, this is basically a copy of the default one with a different background color.
Recruitment Bar
CSS
  • "#recruitBar" defines the recruitment box size and font size.
  • "#recruitBar a, #recruitBar img" defines the text color of the title and the image size and border color.
  • ".recruitToolTip" defines the style and color of the tooltip title only. This actually has been overridden because the class colors are now defined in the javascript variables ("<font color=#c41f3b>Death Knight</font>")
Variables (in red)
  • Box Title (recruitTitle):
    Default is set to "Recruitment". See the CSS above on how to change it's style.
  • Icon dimming (recruitKeyWord):
    The script looks for a keyword in your class needs to determine if the class image needs to be dimmed. Default is set to "Closed". The keyword is case sensitive.
  • Icon arrangement (recruitImagesPerRow):
    At this time, there are ten classes. The bar is designed to allow you to set the number of icons per row, default is set to 10. See the second image above to see what it looks like set to 5.
  • Icon link (linkToRecruitmentPost):
    The URL to your recruitment requirements or application thread should be typed in here. Default is "http://recruitme.com".
  • Class needs:
    Change your class needs as desired. The script is set up as follows:

    classrq.push ([ "Thumbnail Image URL",
      "Class Name",
      "Class Needs"
    ])

    You only need to change the "Class Needs" portion. In the example for Druids, you will see the class needs text looks like this: "Feral<br>Resto". The <br> in the middle is HTML code for new line. You can basically type in anything you want here including HTML tags.
Progression Bar
CSS
  • "#raidingBar" defines the progression box size and font size
  • "#raidingBar a, #raidingBar img" defines the text color of the title and the image size and border color.
  • ".raidingToolTip" defines the style and color of the tooltip title.
  • ".killedBoss" defines the boss name style when it has been killed. The default is set to put a line through the name.
  • ".toKillBoss" defines the boss name style when it hasn't been killed.
  • ".killedText" defines the style for the boss status when it has been killed. The default style makes the text red.
Variables (in red)
  • Box Title raidingTitle):
    Default is set to "Progression". See the CSS above on how to change the style of this text.
  • Icon dimming (raidingKeyWord):
    The script looks for a keyword in your instance status to determine if the image needs to be dimmed. Default is set to "No|closed|unknown". You can add more keywords if you separate them by a "|" (Shift-\). The keyword is case sensitive. You can also leave the instance status blank, and as long as the first boss status is also blank, the instance icon will be dimmed.
  • Style for a killed boss (killedKeyWord):
    The script looks for this keyword in your boss status text to determine if it needs to apply CSS to it. Default is set to "Killed". You can add more keywords if you separate them by a "|" (Shift-\). The keyword is case sensitive.
  • Icon arrangement (raidingImagesPerRow):
    At this time, there are seven raid encounters listed (for WotLK expansion - including upcoming raids). The bar is designed to allow you to set the number of icons per row, default is set to 7.
  • Icon link (linkToRaidingSite):
      The URL to your a raiding status/ranking site can be added here. The default is "http://www.wowjutsu.com/us/".
  • Progression status:
    Change your instance and boss status as desired. The script is set up as follows:

    progress.push ([
     ["Thumbnail Image URL"],
     ["Instance Name", "Instance Status - 10 man", "Instance Status - 25 man"],
     ["Instance Boss #1", "Boss #1 Status - 10 man", "Boss #1 Status - 25 man"],
     ["Instance Boss #2", "Boss #2 Status - 10 man", "Boss #2 Status - 10 man"],
     ...
     ["Last Instance Boss", "Last Boss Status - 10 man", "Last Boss Status - 10 man"]
    ]);

    You only need to change the "Instance Status" and "Boss ## Status" for both the 10 man and 25 man portions of each instance. You can basically type in anything you want here including HTML tags.
Bar Style
The Guild Bar above is basically a table with three cells. The left side has the recruitment bar, the middle has the logo and the right side has the raiding bar. The HTML is in blue above. If you want to switch them, just switch the id's in the table. If you only want to use one bar you can add the HTML below:
Recruitment Bar only:
<div id="recruitBar></div>

Raiding Bar only:
<div id="raidingBar></div>
If you did decide to switch the place of the recruitment and raiding bars, make sure you edit the "#recruitBar" and "#raidingBar" in the CSS and switch the "text-align:".

The WoW image in the middle can also be replaced by your guild tabard or any other image you want. Keep the image narrow, no more than 200px wide - you can also adjust the size of the image box in the CSS (#wowImage) as needed.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

bananadude (Applicant) 1/21/2009 12:43 AM EST : RE: WoW Guild Bar v1.2 (WotLK)

bananadude
Posts: 107

0
Like

0
Dislike

Mottie, I seem to be having problems getting the tooltips to show up properly, I am able to create the bar as a footer, but with or without the CSS the tooltips will not show up when I mouseover the icons to show classes we are recruiting or progression in raiding.  I essentially copied everything letter and character for letter and character so I have no idea what the problem is (because if thats the script you are using and it works on your homepage, then maybe I am fiddelin with something i shouldn't in the scripts).
TopBottom

Mottie (SuperAdmin) 1/21/2009 2:37 AM EST : RE: WoW Guild Bar v1.2 (WotLK)
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hey Bananadude!

I just posted about the problem here.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Frag Daddy (Applicant) 1/25/2009 6:04 PM EST : RE: WoW Guild Bar v1.2 (WotLK)
Frag Daddy
Posts: 103

0
Like

0
Dislike

My footer is empty yet it kicks some of the text out. Am I doing something wrong?
Frag
TopBottom

deshund (Member) 3/3/2009 1:45 PM EST : RE: WoW Guild Bar v1.2 (WotLK)
deshund
Posts: 105

0
Like

0
Dislike

I am trying to upgrade my recruit box and progression box to the recruit/progress bar at the top. i have gotten it to show up, but i cant get the mouse over to work[noob].  what am i doing wrong?

http://enemy2horde.guildportal.com

plz help[cry]
TopBottom

Mottie (SuperAdmin) 4/4/2009 1:38 PM EST : WoW Guild Bar v1.21 (Ulduar)
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

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

Guild Bar Version 1.21 - Ulduar update

Changes from v1.2:
  • The script is updated to include the new Ulduar instance that I could find information on prior to it's release.
  • Added Sartharion + 1, 2 and 3 drakes.
  • The javascript was changed to add an additional keyword "Attempted", which adds the CSS class "attemptedBoss"

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/WotLK.png"></td>
 <td id="raidingBar"></td>
</tr>
</table>
</div>


<!-- Stylesheet
************************************ -->
<style type="text/css">
.guildBar { width:700px; 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:300px; text-align:right; vertical-align:bottom; font-family:sans-serif; font-size:70%; white-space:nowrap; }
#recruitBar a, #recruitBar img { color:#999999; 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:300px; text-align:left; vertical-align:bottom; color:#999999; font-family:sans-serif; font-size:70%; white-space:nowrap; }
#raidingBar a, #raidingBar img { color:#999999; 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; }
.attemptedBoss { color: #00ff00; }

#dhtmltooltip { position: absolute; width: 150px; border: #888888 1px solid; padding: 3px; background: #222222; color: #dddddd; visibility: hidden; z-index: 100; }
</style>

Footer area or make a "guildbar.js" file

If you want to add this guild bar into the banner area, it will be necessary to put the javascript below somewhere else. You need to do this because the script is too long to fit into the Banner Area.
  1. Footer: Copy (Ctrl-C) the script below and paste (Ctrl-V) it into your footer. If you already have too much stuff in the footer, some info may get lost.

    Control Panel > Style & Colors > Footer (under Advanced Style Settings)
  2. Separate "guildbar.js" file:

    First off, add this line to the end of the HTML above (in blue):

    <script src="URL TO YOUR guildbar.js"></script>

    Then copy (Ctrl-C) and paste (Ctrl-v) the code below into notepad, remove the <script type="text/javascript"> at the top and the </script> from the bottom, then save the file as "guildbar.js".

    You can use the File Manager (Control Panel > File Manager) built into Guild Portal, but I recommend using a free hosting site like "ripway.com" to host the file. The reason is ripway provides an online text editor, you can easily update the information in the script, save and you're done. With the GuildPortal File Manager, you can upload the updated file and it should replace the existing one, but it's been hit or miss for me.

    Update the URL in green above to where you saved your file.

<script type="text/javascript">
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 with an annoyingly large Dinosaur"
]);
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=#9482c9>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 - 10 man", "Instance Status - 25 man"],
    ["Instance Boss #1", "Boss #1 Status - 10 man", "Boss #1 Status - 25 man"],
    ["Instance Boss #2", "Boss #2 Status - 10 man", "Boss #2 Status - 10 man"],
    ...
    ["Last Instance Boss", "Last Boss Status - 10 man", "Last Boss Status - 10 man"]
   ]);
- 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|closed|unknown";
var bossKilledKeyWord = "Killed";
var bossAttemptedKeyWord = "Attempted|%";
var raidingImagesPerRow = 7;
var tooltipBossWidth = 275;
var tooltipKilledWidth = 80;
var linkToRaidingSite = "http://www.wowjutsu.com/us/";

/* ********************************************
   Wrath of the Lich King
   ******************************************** */
// NAXXRAMAS II
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Nax2-10.gif"]
,["Naxxramas II", "(10 man)<br>In Progress", "(25 man)"]
,["AW: Patchwerk", "Killed", "Killed"]
,["AW: Grobbulus", "Killed", ""]
,["AW: Gluth", "Killed", ""]
,["AW: Thaddius", "Attempted", ""]
,["PW: Noth the Plaguebringer", "Attempted", ""]
,["PW: Heigan the Unclean", "25%", ""]
,["PW: Loatheb", "", ""]
,["SW: Anub'Rekhan", "Killed", "Ouchy"]
,["SW: Grand Widow Faerlina", "Killed", ""]
,["SW: Maexxna", "", ""]
,["DW: Instructor Razuvious", "Killed", ""]
,["DW: Gothik the Harvester", "", ""]
,["DW: The Four Horsemen", "", ""]
,["FL: Sapphiron", "", ""]
,["KC: Kel'Thuzad", "", ""]
]);

// VAULT OF ARCHAVON
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/VoA-10.gif"]
,["Vault of Archavon", "(10 man)", "(25 man)"]
,["Archavon the Stone Watcher", "Killed", "Killed"]
,["Emalon the Storm Watcher","",""]
]);

// CHAMBER OF ASPECTS
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/CoA-10.gif"]
,["Chamber of Aspects", "(10 man)", "(25 man)"]
,["Sartharion the Onyx Guardian", "Killed", "Killed (no dragons up)"]
,["Sartharion + 1 Drake", "", ""]
,["Sartharion + 2 Drakes", "", ""]
,["Sartharion + 3 Drakes", "", ""]
]);

// THE EYE OF ETERNITY
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/EoE-10.gif"]
,["The Eye of Eternity", "(10 man)", "(25 man)"]
,["Malygos", "", ""]
]);

// ULDUAR
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Uld.gif"]
,["Ulduar", "(10 man)", "(25 man)"]
,["Flame Leviathan", "", ""]
,["Ignis the Furnace Master", "", ""]
,["Razorscale", "", ""]
,["XT-002 Deconstructor", "", ""]
,["The Iron Council", "", ""]
,["Kologarn", "", ""]
,["Auriya", "", ""]
,["Mimiron", "", ""]
,["Watcher Freya", "", ""]
,["Watcher Thorim", "", ""]
,["Watcher Hodir", "", ""]
,["General Vezax", "", ""]
,["Yogg-Saron", "", ""]
,["Algalon the Observer", "", ""]
]);

// AZJOL-NERUB RAID
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Unk-10.gif"]
,["Azjol-Nerub Raid", "(10 man)<br>-closed-", "(25 man)<br>-closed-"]
,["-unknown-", "", ""]
]);

// ICECROWN CITADEL
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Unk-10.gif"]
,["Icecrown Citadel", "(10 man)<br>-closed-", "(25 man)<br>-closed-"]
,["-unknown-", "", ""]
,["The Lich King", "", ""]
]);

/* ********************************************
   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 + "\"  =\"hideddrivetip()\"";
  pb += " =\"ddrivetip('<table><tr><td class=raidingToolTip width=" + tooltipBossWidth + "px>" + progress[inst][1][0].replace(/\'/g,sQ);
  pb += "</td><td align=center valign=top nowrap width=" + tooltipKilledWidth + "px>" + progress[inst][1][1].replace(/\'/g,sQ);
  pb += "</td><td align=center valign=top nowrap width=" + tooltipKilledWidth + "px>" + progress[inst][1][2].replace(/\'/g,sQ) + "</td></tr>";
  for (var boss=2; boss<(progress[inst].length); boss++) {
   pb += "<tr><td";
   pb += (progress[inst][boss][1].match(bossKilledKeyWord) && progress[inst][boss][2].match(bossKilledKeyWord)) ? " class=killedBoss>" : ">";
   pb += progress[inst][boss][0].replace(/\'/g,sQ) + "</td><td align=center";
   pb += (progress[inst][boss][1].match(bossAttemptedKeyWord)) ? " class=attemptedBoss" : "";
   pb += (progress[inst][boss][1].match(bossKilledKeyWord)) ? " class=killedText" : "";
   pb += ">" + progress[inst][boss][1] + "</td><td align=center";
   pb += (progress[inst][boss][2].match(bossAttemptedKeyWord)) ? " class=attemptedBoss" : "";
   pb += (progress[inst][boss][2].match(bossKilledKeyWord)) ? " class=killedText" : "";
   pb += ">" + progress[inst][boss][2] +"</td></tr>";
  }
  pb += "</table>', '', '" + (tooltipBossWidth + tooltipKilledWidth) + "');\"><img src=\"" + 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>";
 $('#recruitBar').html(rb);
 $('#raidingBar').html(pb);
</script>

Customizing the Script

Overall CSS
  • The class ".guildBar" defines the container for the recruit and progression bars. It is set as a default to width of 700 pixels (in purple), centered using the auto margin and adjusted down 110 pixels to place the bar at the bottom of the banner. You can adjust this as needed to fit your content box or header.
  • In the "#banner" CSS
    • Replace the URL in green with your image URL
    • Adjust the height of the image to match your image height (text in purple).
  • "#dhtmltooltip" defines the tooltip box, this is basically a copy of the default one with a different background color.
Recruitment Bar
CSS
  • "#recruitBar" defines the recruitment box size and font size.
  • "#recruitBar a, #recruitBar img" defines the text color of the title and the image size and border color.
  • ".recruitToolTip" defines the style and color of the tooltip title only. This actually has been overridden because the class colors are now defined in the javascript variables ("<font color=#c41f3b>Death Knight</font>")
Variables (in red)
  • Box Title (recruitTitle):
    Default is set to "Recruitment". See the CSS above on how to change it's style.
  • Icon dimming (recruitKeyWord):
    The script looks for a keyword in your class needs to determine if the class image needs to be dimmed. Default is set to "Closed". The keyword is case sensitive.
  • Icon arrangement (recruitImagesPerRow):
    At this time, there are ten classes. The bar is designed to allow you to set the number of icons per row, default is set to 10. See the second image above to see what it looks like set to 5.
  • Icon link (linkToRecruitmentPost):
    The URL to your recruitment requirements or application thread should be typed in here. Default is "http://recruitme.com".
  • Class needs:
    Change your class needs as desired. The script is set up as follows:

    classrq.push ([ "Thumbnail Image URL",
      "Class Name",
      "Class Needs"
    ])

    You only need to change the "Class Needs" portion. In the example for Druids, you will see the class needs text looks like this: "Feral<br>Resto". The <br> in the middle is HTML code for new line. You can basically type in anything you want here including HTML tags.
Progression Bar
CSS
  • "#raidingBar" defines the progression box size and font size
  • "#raidingBar a, #raidingBar img" defines the text color of the title and the image size and border color.
  • ".raidingToolTip" defines the style and color of the tooltip title.
  • ".killedBoss" defines the boss name style when it has been killed. The default is set to put a line through the name.
  • ".toKillBoss" defines the boss name style when it hasn't been killed.
  • ".killedText" defines the style for the boss status when it has been killed. The default style makes the text red.
  • ".attemptedBoss" defines the style for an attempted kill on a boss. The default style makes the text green.
Variables (in red)
  • Box Title (raidingTitle):
    Default is set to "Progression". See the CSS above on how to change the style of this text.
  • Icon dimming (raidingKeyWord):
    The script looks for a keyword in your instance status to determine if the image needs to be dimmed. Default is set to "No|closed|unknown". You can add more keywords if you separate them by a "|" (Shift-\). The keyword is case sensitive. You can also leave the instance status blank, and as long as the first boss status is also blank, the instance icon will be dimmed.
  • Style for a killed boss (bossKilledKeyWord):
    The script looks for this keyword in your boss status text to determine if it needs to apply CSS to it. Default is set to "Killed". You can add more keywords if you separate them by a "|" (Shift-\). The keyword is case sensitive.
  • Style for an attempted boss (bossAttemptedKeyWord):
    The script looks for this keyword in the boss status text to determine if it needs to apply CSS to it. Default is set to "Attempted|%". The "%" sign will cover any number you enter with a % health of the boss (e.g. "25%"). You can add more keywords if you separate them by a "|" (Shift-\). The keyword is case sensitive.
  • Icon arrangement (raidingImagesPerRow):
    At this time, there are seven raid encounters listed (for WotLK expansion - including upcoming raids). The bar is designed to allow you to set the number of icons per row, default is set to 7.
  • Tooltip sizes (tooltipBossWidth & tooltipKilledWidth): This sets the width of the boss name on the left, and each column that shows the boss status. The name column is set to 275 pixels and each status column is set to 80 pixels wide.
  • Icon link (linkToRaidingSite):
      The URL to your a raiding status/ranking site can be added here. The default is "http://www.wowjutsu.com/us/".
  • Progression status:
    Change your instance and boss status as desired. The script is set up as follows:

    progress.push ([
     ["Thumbnail Image URL"],
     ["Instance Name", "Instance Status - 10 man", "Instance Status - 25 man"],
     ["Instance Boss #1", "Boss #1 Status - 10 man", "Boss #1 Status - 25 man"],
     ["Instance Boss #2", "Boss #2 Status - 10 man", "Boss #2 Status - 10 man"],
     ...
     ["Last Instance Boss", "Last Boss Status - 10 man", "Last Boss Status - 10 man"]
    ]);

    You only need to change the "Instance Status" and "Boss ## Status" for both the 10 man and 25 man portions of each instance. You can basically type in anything you want here including HTML tags.
Bar Style
The Guild Bar above is basically a table with three cells. The left side has the recruitment bar, the middle has the logo and the right side has the raiding bar. The HTML is in blue above. If you want to switch them, just switch the id's in the table. If you only want to use one bar you can add the HTML below:
Recruitment Bar only:
<div id="recruitBar></div>

Raiding Bar only:
<div id="raidingBar></div>
If you did decide to switch the place of the recruitment and raiding bars, make sure you edit the "#recruitBar" and "#raidingBar" in the CSS and switch the "text-align:".

The WoW image in the middle can also be replaced by your guild tabard or any other image you want. Keep the image narrow, no more than 200px wide - you can also adjust the size of the image box in the CSS (#wowImage) as needed.

Edit (4/16/2009): Added 2nd boss in Vault of Archavon
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

JaleiP (Member) 5/3/2009 5:21 AM EST : RE: WoW Guild Bar v1.21 (Ulduar)
JaleiP
Posts: 451

0
Like

0
Dislike

Nevermind.
I figured out what I was doing wrong.

It is by caffeine alone I set my mind in motion. It is by the beans of Java that thoughts acquire speed, the hands acquire shakes, the shakes become a warning.  It is by caffeine alone I set my mind in motion.



TopBottom

Vadle (Applicant) 5/12/2009 10:08 AM EST : RE: WoW Guild Bar v1.21 (Ulduar)

Vadle
Posts: 89

0
Like

0
Dislike

Still can't get the mouse over info to pop up.  I have tried copying to footer and placing a .js file.  Both are a no go still..

Any suggestions?

http://seram.guildportal.com/Guild.aspx?GuildID=133090&TabID=1132680

Footer always gets information cut off

.js file
http://www.axiomfiles.com/Files/133090/guildbar.js
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%