Hi Chosen3001!

Actually all of that is possible!...

• To add an image into the recruitment area, just add the image HTML into the variables... here I'm adding the druid icon inside the tooltip (in green):
  
  classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/druid.gif",
   "<img src='http://www.guildportal.com/GuildImages/WOWRosterImages/druid.gif' style='float:right;'><font color=#ff7d0a>Druid</font>",
   "Feral<br>Resto"
  ]);
  
  * Notice that inside the variable you must use single quotes. I added the style='float:right;' to position the image on the right side of the tooltip, you could leave this out and the icon will stay to the left of the text. Additionally I could have put the <img> HTML into the status variable.
  
  
• To add a boss image into the progress tooltip is pretty much the same idea. But since the tooltip is arranged into a table, you'll have to add some style to align the text with the image. Here I added the EoE icon next to Malygos' name (in green)
  
  // 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)"]
  ,["<img style='vertical-align:middle;' src='http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/EoE-10.gif'>Malygos", "", ""]
  ]);
  
  * Notice the use of single quotes here as well.
  
  
• And lastly, the random banner image. You'll have to add this code on to the very end of your "guildbar.js" file and change one line of the CSS. The limitation with this is that you can't use a flash image with the way it's written and all your banner images must be the same height or the guildbar icons will not be positioned properly - I can modify this later if you need.
  
  
  • CSS to change - remove the URL inside the banner background... it's distracting seeing one banner then it getting replaced with another:
    
    #banner { background: url() top center no-repeat; height:150px; border: transparent 1px solid; }
    
    
  • Script to add - replace the image URL in orange with your banner images:
    
    /*************************************
    Rotating Banner
    **************************************/
    var images = new Array();
    
    /* ********************************
     Add images: images.push (["Add URL here"]);
     ******************************** */
    images.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_cobblestone.gif"]);
    images.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_dirt.gif"]);
    images.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_floor.gif"]);
    images.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_grass.gif"]);
    images.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_lava.gif"]);
    images.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_outland2.gif"]);
    
    // ********************************
    // Don't change anything below this line
    // ********************************
    var inc = Math.floor( Math.random() * images.length );
    var img = "url(" + images[inc][0] + ")";
    $("#banner").css('background-image',img);
    
    

nevermind, i decided to go with a different mod to place there instead.

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.22 - Trial of the Crusader update

Changes from v1.21:

• Added the Trial of the (Grand) Crusader instance to the script as well as the new boss in the Vault.
• Updated all the icon links
• Everything else in this script is the same (I copied and pasted it LOL)

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; }

#tooltip { 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 = 9;
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.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.gif"]
,["Vault of Archavon", "(10 man)", "(25 man)"]
,["Archavon the Stone Watcher", "Killed", "Killed"]
,["Emalon the Storm Watcher", "", ""]
,["Kolaron the Flame Watcher", "", ""]
]);

// CHAMBER OF ASPECTS
progress.push ([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/OS.gif"]
,["Chamber of Aspects", "(10 man)", "(25 man)"]
,["Sartharion the Onyx Guardian", "Killed", "Killed"]
,["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.gif"]
,["The Eye of Eternity", "(10 man)", "(25 man)"]
,["Malygos", "", ""]
]);

// ULDUAR
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/ulduar.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", "", ""]
]);

// TRIAL OF THE CRUSADER
progress.push([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Crusader.gif"]
,["Trial of the Crusader", "(10 man)", "(25 man)"]
,["Northrend Beasts", "", ""]
,["Lord Jaraxxus", "", ""]
,["Faction Champions", "", ""]
,["Twin Val'kyr", "", ""]
,["Anub'arak", "", ""]
]);

// TRIAL OF THE GRAND CRUSADER
progress.push([
["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/GrandCrusader.gif"]
,["Trial of the Grand Crusader", "(10 Heroic)", "(25 Heroic)"]
,["Northrend Beasts", "", ""]
,["Lord Jaraxxus", "", ""]
,["Faction Champions", "", ""]
,["Twin Val'kyr", "", ""]
,["Anub'arak", "", ""]
]);

// ONYXIA
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/onx.gif"]
,["Onyxia", "(10 Heroic)", "(25 Heroic)"]
,["Onyxia", "", ""]
]);





// 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 (9/23/2009): Added Onxyia to the list. Also make sure you increase this value: var recruitImagesPerRow = 10;

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.23 - Icecrown Citadel update

Changes from v1.22:

• Added the Icecrown Citadel instance - Thanks to Deuteros_CHAOS for collecting the next patch boss information
• The script is now using new tooltips, so there is some new tooltip CSS
• Everything else in this script is the same (I copied and pasted it LOL)

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>
<script src="http://www.axiomfiles.com/Files/######/guildbar.js"></script>

<!-- Stylesheet
************************************ -->
<style type="text/css">
.guildBar { width:500px; margin-right:auto; margin-left:auto; margin-top:110px;}
#banner { background: #000 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_rez2.jpg) top center no-repeat; height:150px; border: transparent 1px solid; }
.dim { opacity: .4; filter: alpha(opacity=40); }

#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; }
</style>

Make a "guildbar.js" file

If you want to add this guild bar into the banner area, it will be necessary to upload the javascript below to your file area. You need to do this because the script is too long to fit into the Banner Area.

• First off, copy (Ctrl-C) and paste (Ctrl-v) the code below into notepad, update the instance and boss statuses to match your progression, then save the file to your desktop as "guildbar.js".
  Upload the file to your site using the File Manager (Control Panel > General Settings & Tools > File Manager) built into Guild Portal. With the GuildPortal File Manager, you can upload the updated file and it should replace the existing one, but you need to click on the file link in the manager, then reload the page to ensure the updated file is loaded into your browser cache.
• Update the URL in orange above to where you saved your file.
  
  <script src="http://www.axiomfiles.com/Files/######/guildbar.js"></script>
• Move the guildbar.js file from your desktop into an archive on your computer, so it'll be easy to replace the online file if is accidentally gets messed up.

• The CODE:

var classrq = [];
var progress = [];

/* 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 recruitIconsPerRow = 10;
var recruitTooltipWidth = 150;
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",
 "<img src='http://www.guildportal.com/GuildImages/WOWRosterImages/druid.gif' style='float:right;'><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:
   wowWotLK.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 raidingIconsPerRow = 10;
var tooltipBossWidth = 275;
var tooltipKilledWidth = 80;
var linkToRaidingSite = "http://wow.guildprogress.com/";

/* ********************************************
   Wrath of the Lich King
   ******************************************** */
// NAXXRAMAS II
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Nax2.gif"]
,["Naxxramas II", "(10 man)", "(25 man)"]
,["AW: Patchwerk", "", ""]
,["AW: Grobbulus", "", ""]
,["AW: Gluth", "", ""]
,["AW: Thaddius", "", ""]
,["PW: Noth the Plaguebringer", "", ""]
,["PW: Heigan the Unclean", "", ""]
,["PW: Loatheb", "", ""]
,["SW: Anub'Rekhan", "", ""]
,["SW: Grand Widow Faerlina", "", ""]
,["SW: Maexxna", "", ""]
,["DW: Instructor Razuvious", "", ""]
,["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.gif"]
,["Vault of Archavon", "(10 man)", "(25 man)"]
,["Archavon the Stone Watcher", "", ""]
,["Emalon the Storm Watcher", "", ""]
,["Kolaron the Flame Watcher", "", ""]
]);

// CHAMBER OF ASPECTS
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/OS.gif"]
,["Chamber of Aspects", "(10 man)", "(25 man)"]
,["Sartharion the Onyx Guardian", "", ""]
,["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.gif"]
,["The Eye of Eternity", "(10 man)", "(25 man)"]
,["Malygos", "", ""]
]);

// ULDUAR
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/ulduar.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", "", ""]
]);

// ONYXIA
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/onx.gif"]
,["Onyxia", "(10 Heroic)", "(25 Heroic)"]
,["Onyxia", "", ""]
]);

// TRIAL OF THE CRUSADER
progress.push([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Crusader.gif"]
,["Trial of the Crusader", "(10 man)", "(25 man)"]
,["Northrend Beasts", "", ""]
,["Lord Jaraxxus", "", ""]
,["Faction Champions", "", ""]
,["Twin Val'kyr", "", ""]
,["Anub'arak", "", ""]
]);

// TRIAL OF THE GRAND CRUSADER (HEROIC)
progress.push([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/GrandCrusader.gif"]
,["Trial of the Grand Crusader", "(10 Heroic)", "(25 Heroic)"]
,["Northrend Beasts", "", ""]
,["Lord Jaraxxus", "", ""]
,["Faction Champions", "", ""]
,["Twin Val'kyr", "", ""]
,["Anub'arak", "", ""]
]);

// ICECROWN CITADEL
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/icc.png"]
,["Icecrown Citadel", "(10 man)<br>-closed-", "(25 man)<br>-closed-"]
,["Lord Marrowgar", "", ""]
,["Lady Deathwhisper", "", ""]
,["Icecrown Gunship Battle", "", ""]
,["Deathbringer Saurfang", "", ""]
,["Festergut", "", ""]
,["Rotface", "", ""]
,["Professor Putricide", "", ""]
,["Prince Valanar", "", ""]
,["Prince Keleseth", "", ""]
,["Prince Taldram", "", ""]
,["Blood-Queen Lana'thel", "", ""]
,["Valithria Dreamwalker", "", ""]
,["Sindragosa", "", ""]
,["The Lich King", "", ""]
]);

// ICECROWN CITADEL HEROIC
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/icc.png"]
,["Icecrown Citadel Heroic", "(10 Heroic)<br>-closed-", "(25 Heroic)<br>-closed-"]
,["Lord Marrowgar", "", ""]
,["Lady Deathwhisper", "", ""]
,["Icecrown Gunship Battle", "", ""]
,["Deathbringer Saurfang", "", ""]
,["Festergut", "", ""]
,["Rotface", "", ""]
,["Professor Putricide", "", ""]
,["Prince Valanar", "", ""]
,["Prince Keleseth", "", ""]
,["Prince Taldram", "", ""]
,["Blood-Queen Lana'thel", "", ""]
,["Valithria Dreamwalker", "", ""]
,["Sindragosa", "", ""]
,["The Lich King", "", ""]
]);

/*********************************************
 Don't change anything below
 *********************************************/
// Recruitment bar
var sQ = '&quot;';
var rb = '<div><a href="' + linkToRecruitmentPost + '">' + recruitTitle + '</a></div>';
 for (var j=0; j<classrq.length; j++) {
  rb += '<a href="' + linkToRecruitmentPost + '" class="tooltip" rel="' + recruitTooltipWidth + '" title="<span class=recruitToolTip>' +
   classrq[j][1].replace(/\"/g,sQ) + '</span><br>' + classrq[j][2].replace(/\"/g,sQ) + '"><img src="' + classrq[j][0].replace(/\"/g,sQ) + '"';
  if (classrq[j][2].match(recruitKeyWord)) { rb += ' class=dim'; }
  rb += '></a>';
  if ( (j+1)%recruitIconsPerRow == 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 + '" class="tooltip" title="<table><tr><td class=raidingToolTip width=' +
   tooltipBossWidth + '>' + progress[inst][1][0].replace(/\"/g,sQ) + '</td><td align=center valign=top nowrap width=' +
   tooltipKilledWidth + '>' + progress[inst][1][1].replace(/\"/g,sQ) + '</td><td align=center valign=top nowrap width=' +
   tooltipKilledWidth + '>' + 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>" rel="' + (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)%raidingIconsPerRow == 0 ) { pb += '<br>'; }
 }
 pb += '</a>';
 $('#recruitBar').html(rb);
 $('#raidingBar').html(pb);

Customizing the Script

Required Tooltip Script

• To make the Guild Bar work properly, you will need to have the modified tooltip script installed. If you don't already have it, add the following to your Footer Area (Control Panel > Custom HTML & Script > Footer Area). Adjust the styles in blue to match your site.
  

  <style type="text/css">
  .tooltip, .preview, .screenshot { cursor:pointer; }
  #tooltip, #tooltip2, #preview, #screenshot { color:#dddddd; background: #222222; border: 1px solid #333333; padding:5px; display:none; opacity: 0.9; filter: alpha(opacity=90); text-align:left; border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; }
  </style>
  <script src="http://www.axiomfiles.com/Files/258012/tooltip.js" type="text/javascript"></script>

Overall CSS

• The class ".guildBar" defines the container for the recruit and progression bars. It is set as a default to width of 500 pixels (in red), 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 orange with your image URL.
  • Adjust the height of the image to match your image height (text in red).
• "#tooltip" defines the tooltip CSS. The code includes a border-radius attribute which makes the tooltip have rounded corners (in all browsers but IE).

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 (recruitIconsPerRow):
  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. Set this to 1 if you want a vertical bar.
• Tooltip Width (recruitTooltipWidth):
  You can define the width of the recruitment tooltip, default width is 150 pixels.
• Icon link (linkToRecruitmentPost):
  The URL to your recruitment requirements or application thread should be typed in here. Default is "http://recruitme.com". Change this link to point to your forum post or tab with more information.
• 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, but replace any quotes with the HTML escape code &quot;

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

• 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 (raidingIconsPerRow):
  With the ICC patch, there will be ten raid encounters (for WotLK expansion, some are repeated). The bar is designed to allow you to set the number of icons per row, default is set to 10.
• 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://wow.guildprogress.com/". You can update this to point specifically to your guild progression on that site.
• 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. 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 (2/24/2010): Added a Required Tooltip Script section and moved the tooltip CSS from the Guild bar section to here.

Hi Sindaryn02!

Try replacing your HTML with the following, but I can modify it a bit more if you want to scrunch the images together more

<!-- HTML Combined Box (with image)
************************************ -->
<div id="banner" style="text-align: center;">
<table border="0" class="guildBar">
 <tbody>
  <tr>
   <td align="top"><img alt="" src="http://www.axiomfiles.com/Files/348053/symbol_horde.jpg" /></td>
   <td id="wowImage"><img alt="" src="http://www.axiomfiles.com/Files/348053/wotlk_logo.jpg" /></td>
   <td align="top"><img alt="" src="http://www.axiomfiles.com/Files/348053/symbol_horde.jpg" /></td>
  </tr>
  <tr>
   <td id="recruitBar"> </td>
   <td> </td>
   <td id="raidingBar"> </td>
  </tr>
 </tbody>
</table>
</div>
<script src="http://www.axiomfiles.com/Files/348053/guildbar.js"></script>

As for the tooltips, they appear to be working for me, but you aren't using the modified tooltip script which will stop the varying tooltip widths on the guildbar. Add the following to your Footer Area (Control Panel > Custom HTML & Script > Footer Area)

<style type="text/css">
.tooltip, .preview, .screenshot { cursor:pointer; }
#tooltip, #tooltip2, #preview, #screenshot { color:#dddddd; background:#222222; border: 1px solid #333333; padding:5px; display:none; opacity: 0.9; filter: alpha(opacity=90); text-align:left; border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; }
</style>
<script src="http://www.axiomfiles.com/Files/258012/tooltip.js" type="text/javascript"></script>