Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Archive > WoW Guild Bar
Nooq (Member) 9/17/2009 7:43 PM EST : RE: WoW Guild Bar v1.21 (Ulduar)

Nooq
Posts: 438

0
Like

0
Dislike

Hey, also wanted to let you know aboout this website:

www.guildprogress.com

In the code above i see that its linked to wow-jutsu... unfortunately wow-jutsu is not updated as regularly as guild progress is, even though guild progress isnt perfect, it gives you a good idea of how well the guild is doing on your server and in the world.. for example, the below i have on our welcome page and soon to be recruitment page

Hope it helps!
Nooq


 
Also Known as:
Kyaine / Nooq / Cooper / Vaszer
TopBottom

Mottie (SuperAdmin) 9/17/2009 8:30 PM EST : RE: WoW Guild Bar v1.21 (Ulduar)
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Thanks Nooq!

I'll update it in the next version of this script
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Neltron (Applicant) 10/21/2009 7:04 PM EST : RE: WoW Guild Bar v1.21 (Ulduar)

Neltron
Posts: 13

0
Like

0
Dislike

Hi there! I'm sure glad I stumbled over this site, as it had exactly what I needed!

However, I am in need of a bit more help, if you could. A buddy and myself are admining our guild's site (found here), and as you can see, it's a little bit messed up. He has designed a banner that we want to use at the top, preferably above the Recruitment & Progression listings. As it is, everything is overlapping. What do I need to change in order to fix this?

Thanks in advance!
TopBottom

Mottie (SuperAdmin) 10/22/2009 12:00 AM EST : RE: WoW Guild Bar v1.21 (Ulduar)
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Neltron!

I don't see the guild bar on your site. If you want the overlapping to work right and have the bar in your banner area, you'll need to make the banner image you have there into a background image - I think I have that in the instructions. If you need help fixing something, add the bar to your site then hollar at me and I'll see what needs to be adjusted to make it look right 
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Neltron (Applicant) 10/22/2009 11:27 AM EST : RE: WoW Guild Bar v1.21 (Ulduar)

Neltron
Posts: 13

0
Like

0
Dislike

Oops! I disabled CSS to change some visual aspects of the site and forgot to re-enable it when I was done. It should be there now.

If, for the background, you mean this line: "#banner { background: url(YOUR BANNER IMAGE URL) top center no-repeat; height:150px; border: transparent 1px solid; }", I tried replacing the green text with our logo, but it ended up placing the logo in the middle of the page over some of the text, so I took it back out. I'm grateful for any help you can give steering me in the right direction. This CSS stuff is new to me but it seems to be pretty robust, hopefully I can get the hang of it.

Okay, scratch that! We figured it out! Now, I have a new problem. In Internet Explorer, the site looks perfect, just how I want it. Unfortunately, I can't say the same for Firefox. Is this just a limitation of how the two handle CSS, or is there something I can do to make the site look in Firefox like it does in IE?
TopBottom

Mottie (SuperAdmin) 10/22/2009 4:53 PM EST : RE: WoW Guild Bar v1.21 (Ulduar)
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Neltron!

It looks like you need to make your banner height a little taller... I looked at the page in IE and I couldn't even see the guildbar. It was off on Chrome and Firefox as well.

Try this; look in the CSS you added for the GuildBar and change the height of the banner (in purple) to 400px:
#banner {
 background: url(http://farm3.static.flickr.com/2475/3986622626_e60f8c6100_b.jpg) top center no-repeat;
 border: transparent 1px solid;
 height: 400px;
}

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Deuteros_CHAOS (Applicant) 11/27/2009 4:37 PM EST : RE: WoW Guild Bar v1.21 (Ulduar)
Deuteros_CHAOS
Posts: 635

0
Like

0
Dislike

Throwing up Icecrown Citadel Part with bosses/encounters. May need some final finishing esp the raid icon

// 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-"]
,["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/Unk-10.gif"]
,["Icecrown Citadel Heroic", "(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", "", ""]
]);
TopBottom

Mottie (SuperAdmin) 11/28/2009 12:48 AM EST : WoW Guild Bar v1.23 (Icecrown Citadel)
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.23 - Icecrown Citadel update

GuildPortal admin site link to original post

Changes from v1.22:
  • Added the Icecrown Citadel instance - thanks to Deuteros_CHAOS!
  • 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.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

AillieBom (Applicant) 1/3/2010 6:43 PM EST : RE: WoW Guild Bar v1.23 (Icecrown Citadel)

AillieBom
Posts: 106

0
Like

0
Dislike

ok so ive done exactly what you have said here in this post - a few times now actually - and still the progression icons are much larger than the recruitment ones and the popup tooltips background is white not black as on this site. Please help me, i would much prefer to use this guildbar rather than the 2 boxes which take up alot more space on site

My Site

**went back to the vertical boxes cause they work for me**
TopBottom

Mottie (SuperAdmin) 1/3/2010 9:39 PM EST : RE: WoW Guild Bar v1.23 (Icecrown Citadel)
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi AillieBom!

Well, I'm not sure what is going on with the code. Maybe try moving the CSS portion (inside the <style> tag) to the footer HTML.

I just got back from a week out of town, so if you want to try and post the guild bar on your site, I could take a look at it and help troubleshoot.



Update: Ugh, sorry it took me so long... I totally forgot about updating this post. Check out the next post.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
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%