HomeMottie's Help SiteResourcesSupport Tickets
Sign Up! • Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Progression Box & Guild Bar
1 2 3 4 5 6Next
Mottie (MVP) 12/6/2010 3:42 PM EST : WoW Progression Box & Guild Bar link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster

WoW Progression Box & Guild Bar (v2.3 - Cataclysm)

I made a separate post for this version of the progression box because it uses a slightly different script and method from before. I saved the actual scripting in my guild files and I'll have you save your progression variables in your guild files (preferred) or in a free form widget. The nice thing about this new method is you can use the same variables for both the progression box and the guild bar. Once again, I've included three sets of code: (1) Progression box code for just the Cataclysm expansion, (2) Code for a progression Box (one page only) and Guild bar (on every page), (3) Cataclysm plus WotLK, (4) All expansions.

If your tooltips are messed up, you are probably missing the modified tooltip script.

Progression Box
Guild Bar

Add this script to your site as follows:
1. Step 1, pick a base code.
  • This code will be added to different places depending on what you want on your site.
  • The guild bar code goes into the footer HTML (Control Panel > Custom HTML & Script > Footer HTML). This is the complete guild bar code.
  • The progression box code goes into a Free Form Text/HTML widget.
2. Step 2, pick the code depending on which expansion(s) you want to show.
  • This code is for the progression box only.
  • Add this code to the end of the base code above (in a Free Form Text/HTML widget) only if no guild bar was added.
3. Step 3, Copy (Ctrl-C) the recruitment and/or progression code then paste it into a non-rich text editor.
  • Save the file and name it something like "progression-wow.js"
  • Upload it to your GuildPortal guild files.
  • Copy the link and replace the base code (in orange) from step 1 - the URL to the variable file.
  • This is the file you will need to update to change your guild progression - it will need to be uploaded each time.
  • After re-uploading the file, make sure you reload your guild page using Shift-reload (the reload icon in the browser) to bypass the cached site information.
4. Customize the Guild bar and progression box as desired.
  • Modify the CSS (in step 1) to match your site colors. Or if you want to see the default css file, download and modify this file (upload it to your site, then change the url from step 1).
  • Modify the recruitment and progression code from step 3 as desired.
  • Add additional instances and bosses following the instructions at the end of this post.
Step 1: Pick a base Code (use code from one box below)

Progression Box Only

Progression Box & Guild Bar

Step 2: Decide on which expansions to show (use code from one box below)

Progression Box - Cataclysm Only

Progression Box - Cataclysm & WotLK only

Progression Box - All expansions


Step 3: Progression variables (use code from one box below - goes into a separate file)

Guild Bar Recruitment + progression for both - Cataclysm only

Progression Box - Cataclysm only

Progression Box - WotLK & Cataclysm

Progression - All Expansions

Customizing the Script

CSS
  • Guild Bar

    • ".guildBar" defines the guild bar position and size.
    • "#recruitBar" defines the recruit icon wrapper position, size and font style.
    • "#raidingBar" defines the progression icon wrapper position, size and font style.
    • ".recruitTooltip" defines the recruitment default header color - the recruit class names are changed in the variables
    • ".raidingTooltip" defines the progression default header color.

  • Progression Box

    • "#progBox" defines the progression box style and font size.
    • ".instance" defines the instance name color & style.
    • ".instanceImgCell" defines the size of the cell that contains the instance image (only change if you're using a different image).
    • ".instance img" defines the styling and size of the instance image. Use the iconWidth & iconHeight variables below to set the img (icon) size.
    • ".bossCount" defines the text color and alignment of the bosses killed count "(5/6)".

  • Progression Box Tooltip

    • ".tooltipHeader" 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 boss.
Variables
Note that all of these variables must end with a comma, except the last one (or if only one option is set). If your script doesn't work, check the commas first. If the script works in all browsers but IE, then you have a comma after the last option (this breaks IE).
  • Guild Bar Recruitment options

    Default options shown below, change them as desired... you can remove options that aren't changed.
    $("#recruitBar").guildBarRecruit( classrq, {
     recruitTitle          : "Recruitment",
     recruitKeyWord        : "Closed",
     recruitIconsPerRow    : 10,
     recruitTooltipWidth   : 150,
     linkToRecruitmentPost : "javascript:void(0)"
    });
    • classrq (in red) - This is the variable defined in "progression-wow.js" file that contains all of the recruitment status info - this shouldn't be changed.
    • recruitTitle - This title can be changed to any title above the recruitment icons (including nothing "").
    • recruitKeyWord - This keyword is a word in the recruitment status that the script looks for and if found, it dims the icon. Add additional keywords by separating other words with a vertical bar "|" (type shift-\, the key above Enter). For example: "Closed|No".
    • recruitIconsPerRow - This is the number of icons to put in one row. If you set it to 5, then you'll end up with two rows of five icons.
    • recruitTooltipWidth - This is the width of the recruitment tooltip (in pixels).
    • linkToRecruitmentPost - With the default above, clicking on the icons will be ignored. Change it to point to your recruitment forum group.
  • Guild Bar Progression options

    Default options shown below, change them as desired... you can remove options that aren't changed.
    $("#raidingBar").guildBarProgress( wowCat, {
      raidingTitle         : "Progression",
      raidingKeyWord       : "No|closed|unknown",
      bossKilledKeyWord    : "Killed",
      bossAttemptedKeyWord : "Attempted|%",
      raidingIconsPerRow   : 10,
      tooltipBossWidth     : 275,
      tooltipKilledWidth   : 80,
      linkToRaidingSite    : "http://wow.guildprogress.com/"
    });
    • wowCat (in red) - This is the variable defined in the "progression-wow.js" file that contains the WoW Cataclysm data.
    • raidingTitle - This title can be changed to any title above the raiding icons (including nothing "").
    • raidingKeyWord - This keyword is a word in the instance status that the script looks for and if found, it dims the icon. Add additional keywords by separating other words with a vertical bar "|" (type shift-\, the key above Enter). For example: "No|Closed|unknown".
    • bossKilledKeyWord - This keyword is a word for the boss status that the script looks for and if found applies the "killedBoss" class name otherwise it added "toKillBoss" or "attemptedBoss" based on if it finds the bossAttemptedKeyWord below.
    • bossAttemptedKeyWord - This keyword is a word that the script looks for and if found it adds the "attemptedBoss" class to the boss name.
    • raidingIconsPerRow - This is the number of icons to put in one row. If you set it to 5, then you'll end up with five icons in the top row and the remaining in the second row.
    • tooltipBossWidth - This is the width of the boss name cell inside the tooltip (it's value is in number of pixels)
    • tooltipKilledWidth - This is the width of the boss status (killed, attempted, etc).
    • linkToRaidingSite - The default above will change the page to a WoW progress site when any of the icons are clicked. Change it to point to any progression site you desire.

  • Progression Box options
    The options are found in the code from step 1 (guild bar) or step 2 (progression box) above (in purple).

    Cataclysm only
    $(document).ready(function(){
     var     progressionOptions = {
          // Add progression box options here
     };
      $('#progBox').progression(     wowCat, progressionOptions)
    });
    Multiple expansions
    $(document).ready(function(){
     // Change "wowCat" to choose another default expansion
     pickWoWExp( wowCat );
    });
    var progressionOptions = {
          // Add progression box options here
    };
    Default options
    Shown below, change them as desired... you can remove options that aren't changed.
    var progressionOptions = {
         // Add progression box options here
     tooltipWidth         : 300,
     tooltipBossWidth     : 250,
     tooltipKilledWidth   : 80,
     iconHeight           : 30,
     iconWidth            : 30,
     raidingKeyWord       : "No|closed",
     bossKilledKeyWord    : "Killed",
     bossAttemptedKeyWord : "Attempted|%",
     ignore1stColumnCount : false,
     ignore2ndColumnCount : false,
     hide1stColumn        : false,
     hide2ndColumn        : false,
     showAllRows          : true
    };
    • wowCat (in red) - This is the variable defined in the "progression-wow.js" file that contains the WoW Cataclysm data.
    • tooltipWidth - This is the tooltip width in pixels.
    • tooltipBossWidth - This is the boss name table cell width, in pixels
    • tooltipKilledWidth - This is the boss status table cell width, in pixels.
    • iconHeight - Sets the height of the icon.
    • iconWidth - Sets the width of the icon.
    • raidingKeyWord - This keyword is a word in the instance status that the script looks for and if found, it dims the icon. Add additional keywords by separating other words with a vertical bar "|" (type shift-\, the key above Enter). For example: "No|Closed".
    • bossKilledKeyWord - This keyword is a word for the boss status that the script looks for and if found applies the "killedBoss" class name otherwise it added "toKillBoss" or "attemptedBoss" based on if it finds the bossAttemptedKeyWord below.
    • bossAttemptedKeyWord - This keyword is a word that the script looks for and if found it adds the "attemptedBoss" class to the boss name.
    • ignore1stColumnCount - Set this to false to use, or true to ignore the first column (10 man) count. The progress count is shown in the progress box (outside the tooltip)
    • ignore2ndColumnCount - Set this to false to use, or true to ignore the second column (25 man) count. The progress count will change to the 25 man count if the 10 man progress is 100% complete, unless this variable is true.
    • hide1stColumn - Set this to true to completely hide the first column (10 man boss status) if your guild doesn't track 10 man content.
    • hide2ndColumn - Set this to true to completely hide the second column (25 man boss status) if your guild doesn't track 25 man content.
    • showAllRows - Set this to false to hide instances with no progress (zero out of # bosses).
Progression status
  • Status Format:
    Change your instance and boss status as desired (in orange). The script is set up as follows:
    • progress.push ([
     ["Thumbnail Image URL"],
    ,["Instance Name", "Instance 10 man Status", "Instance 25 man Status" ]
    ,["Instance Boss #1", "Boss #1 10 man Status", "Boss #1 25 man Status"]
    ,["Instance Boss #2", "Boss #2 10 man Status", "Boss #2 25 man Status"]
    , ...
    ,["Last Instance Boss", "Last Boss 10 man Status", "Last Boss 25 man Status"]
    ]);
  • Add Instance:
    To add a new instance, copy another instance from the same expansion (e.g. Onyxia because it only has one boss and the variable (in blue) matches the expansion "wowWotLK", Cataclysm would be "wowCat"). Then replace the Instance name & icon (in orange) and then replace and/or add boss names (in purple).
    // ONYXIA
    wowWotLK.push ([
     ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/onx.gif"]
    ,["Onyxia's Lair", "(10 man)", "(25 man)"]
    ,["Onyxia", "", ""]
    ]);
  • Add Boss:
    To add an additional boss, just add the following line (inside or at the bottom of the instance variable)
    ,["NEW BOSS", "", ""]
    • so the result would be something like this:
    // ONYXIA
    wowWotLK.push ([
     ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/onx.gif"]
    ,["Onyxia", "(10 man)", "(25 man)"]
    ,["Onyxia", "", ""]
    ,["NEW BOSS", "", ""]
    ]);
Edit (12/20/2010): Updated the css and the code in steps 1 and 2 - tooltips should no longer have dark text.
Edit (1/14/2011): Fixed some Cataclysm boss names - thanks takeover2007!
Edit (6/14/2011): Updated to include Fireland instance - thanks Deuteros_CHAOS!
>>help-site<<
Top • Bottom

Tyrenbane (New Admin) 12/14/2010 10:47 PM EST : RE: WoW Progression Box & Guild Bar link

Tyrenbane
Posts: 96
Posts With Wolves
Mottie,

I am trying to get this to work on my site: Iconoclasm. I cannot get the actual dungeons to work so that I can modify them. I am not sure what you mean by pasting that section into a seperate file. I am using the Free Form widget as instructed but when I attempt to paste the actual dungeons piece it puts it in the design field automatically. I only want the Progression box for all expansions, I do not want the recruitment or guild piece. Please Help!

Thank you
Top • Bottom

Mottie (MVP) 12/15/2010 1:47 AM EST : RE: WoW Progression Box & Guild Bar link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
Hi Tyrenbane!

Well I see you have it working on your site - nice looking site btw - hmmm, ok the first problem I see is that the expansion icons are under the progression. That's my fault, I need to remove the extra ones. So if you look at the code you have, you will see two '<div id="progBox"></div>', just completely remove the top one.

If you want to keep your dungeon variables in the Free Form Text/HTML widget, you will need to wrap the entire code in a script tag:
<script type="text/javascript">

// all of the progression variables go here

</script>
Also make sure the editor is in Raw mode before attempting to paste in the code.
>>help-site<<
Top • Bottom

Nivo007 (New Admin) 12/15/2010 6:30 AM EST : RE: WoW Progression Box & Guild Bar link
Nivo007
Posts: 54
Posts With Wolves
Hey Mottie,
Guildbar is looking nice again.. goodstuff
Question for you though.. On our site we used to have the guildbar in its own content box rather than under the banner.
Is there any chance you can give some tips how to get it functioning like that again? I've tried mimicking the instructions for 1.23 and swapping in and out various pieces to no avail.
I'm not the best with these things.. so if you can help I'd be grateful.
Top • Bottom

Tyrenbane (New Admin) 12/15/2010 8:52 AM EST : RE: WoW Progression Box & Guild Bar link

Tyrenbane
Posts: 96
Posts With Wolves
Mottie,

THANK YOU! That was perfect! It is fixed. I appreciate the help.

Thanks again
Top • Bottom

Mottie (MVP) 12/15/2010 8:59 AM EST : RE: WoW Progression Box & Guild Bar link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
Hi Nivo007!

Oops sorry, I should have included that in the instructions. It is actually very simple (thank goodness LOL). Basically look in the GuildBar code, which should be in a Free Form Text/HTML widget now, and remove the following line:
.appendTo('#bannerCell')
That's the line that moves the Guild Bar to the Banner. And You'll have to adjust the CSS a bit as well, Change the top margin to fit your space, so either add the following to the same widget or duplicate the "progression-style.css" file and make this change there:
<style type="text/css">
.guildBar { margin-top: 100px; }
</style>
@Tyrenbane!

You're Welcome!
>>help-site<<
Top • Bottom

Nivo007 (New Admin) 12/15/2010 12:29 PM EST : RE: WoW Progression Box & Guild Bar link
Nivo007
Posts: 54
Posts With Wolves
Hey again Mottie,

Thanks very much for the help. I've managed to get the content box sorted, and it looks nice. Had to change a couple of size values but nothing major

Although I have noticed something else, not sure if its intended? Using guildbar, the instance icon does not dim, regardless of whether you mark it closed. Whereas unwanted classes on the recruitment side DO have their icons dimmed.
EDIT: Ignore this... I'm an idiot.. forgot about keywords being case sensitive

And if i may trouble you again....another, more general question
Is there a way, using guildbar, to hide the 25 man column? I saw there was a way to do it for the progression box, but I haven't managed to replicate it for the whole bar.
Top • Bottom

Mottie (MVP) 12/15/2010 4:59 PM EST : RE: WoW Progression Box & Guild Bar link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
Hi Nivo007!

After looking at your page, the tooltip text color is black, so I'll include this bit of css to fix it. Also, more css to hide the 25 man column. You can hide the 10 man column using "r10" instead of "r25".
#tooltip td { color: #eeeeee; }
.r25 { display: none; }
Add the CSS to the same free form text/HTML widget inside the <style></style> tags.
>>help-site<<
Top • Bottom

Nivo007 (New Admin) 12/15/2010 6:09 PM EST : RE: WoW Progression Box & Guild Bar link
Nivo007
Posts: 54
Posts With Wolves
Thank you very much Mottie!

After your fixes it looks a treat! Top stuff
Top • Bottom

takeover2007 (New Admin) 1/5/2011 4:39 AM EST : RE: WoW Progression Box & Guild Bar link
takeover2007
Posts: 1107
Zomgawsh Poster
Hey Mottie, I got the guildbar working (I had the WotLK version working before as well), but with the new bar there is a giant gap between the progression bar, and the logo, did I miss something?
Lacrimosa
Top • Bottom

1 2 3 4 5 6Next
Admins Online
There are   members online.
GuildPortal Home • Frequently Asked Questions • Videos • Recent Updates • Support • Terms of Use • Privacy Policy
GuildPortal™ Axiom Shift, LLC.  All Rights Reserved. All game-related trademarks are properties of their respective owners. Several adorable monkeys were harmed during the creation of this site, and for that, we are wholly unapologetic.
So-and-so has logged on!
%title%
%message%