Statistics

Roster

• Go to Axho's WoW Guild Feeds site.
• Click on "Guild Roster"
• Under "Generate Your Guild Roster Feed", enter your realm name, guild name and location (region).
• Select your server location, then enter the limit (number of latest feeds to show).
• Select "Output as:" XML then click [ Generate my Feed URL ]
• Under the button you just clicked you should see something like this:
  
  
  SUCCESS! Your URL for this feed is: http://wowfeeds.wipeitau.com/GuildRoster.php?location=REGION&rn=MY%20REALM&gn=MY%20GUILD&output=XML&callback=?
  
  The portions I highlighted in red should match the information you typed in for your guild. Copy this URL.

• Add Widget: Add a XML/XSL Transformation widget to your Roster page
  
  
  • Go to Control Panel > Pages & Content > { Roster Page }
  • Click the "Add Widget" tab
  • Title: { Enter a title for your Roster }
  • Type of Widget: XML/XSL Transformation
  • Location on Page: Center of Page
  • Click [ Add this Widget ]
  • Once saved, you should be returned to the "Widgets/Content" tab
    
    
• Setup Widget: Set up XML/XSL Transformation Widget
  
  
  • Click the "Edit" link inside of your newly added widget
  • From the XML Source tab:
    • XML Source: Choose "Remote File"
    • XML File URL: Add your WoW Armory page URL here (from the Feed URL section above)
      
      http://wowfeeds.wipeitau.com/GuildRoster.php?location=REGION&rn=MY%20REALM&gn=MY%20GUILD&output=XML&callback=?
      
      
  • In the XSL Source tab:
    • XSL Source: Choose "Remote File"
    • XSL File URL: Enter, http://www.axiomfiles.com/Files/258012/wow-roster.xsl
      
      
  • Click [ Save Changes ]
    
    
• Script: If you are only going to use the WoW Roster, but you want to replace the rank number with names, add this script to a Free Form Text/HTML widget anywhere on the same page. Or if you can add this script to the Footer Area (Control Panel > Custom HTML & Script > Footer Area) or into the Custom Javascript/JQuery area (Control Panel > Custom HTML & Script > Custom Javascript/JQuery > Additional Functions tab). Make sure you check "Enabled?" before clicking [ Save ].

  <script type="text/javascript">
  $(document).ready(function(){
  /* Replace "Rank #" with rank names */
   var replaceRanks = true;
   var ranks = {
    0 : "Guild Leader",
    1 : "Council",
    2 : "Officer",
    3 : "Raider",
    4 : "Member",
    5 : "Alt",
    6 : "New Recruit",
    7 : "Probation"
   };
  
   // ***************************
   // Don't Change Anything Below
   // ***************************
   var n, t, roster = $('#wowroster');
   if (replaceRanks) {
    roster.find('.wowRank').each(function(){
     n = parseInt( $(this).find('span').text().replace(/Rank /,''), 10);
     $(this).find('span').hide().after( ranks[n] );
    })
   }
  });
  // CODE TO RESORT THE ROSTER
  $(window).load(function(){
   $('#wowroster').trigger('sorton', [[ [3,1], [0,0] ]] );
  });
  </script>
  

• Change the guild ranks names (in blue) to match your guild naming.
  
  
• Sort Order
  
  
  • The code to change the initial sort order of the roster is found below the "// CODE TO RESORT THE ROSTER" comment in the code.
  • The bracketed numbers in red set the sort order of the roster.
  • The GPUser column is actually hidden if you don't use it, so it is column #1. That's why the [3,1] code above targets the Level column
    
    

    0	1	2	3	4	5	6	7	8	9	10
    Name	GPUser	AP	Level	Race	Class	Rank	Weekly XP	Lifetime XP	Notes	DKP

    
    
  • The blocks of numbers tell the tablesorter script which column and the sort direction:
    
    [ [columnIndex, sortDirection], ... ]
    
    columnIndex is the column number (see above).
    sortDirection is 0 for Ascending and 1 for Descending.
    , ... shows that you can optionally sort multiple columns by adding more blocks, separated by commas.
    
    
  • So, the block [3,1], [0,0] tells the tablesorter to sort:
    
    
    • [3,1] : The Level column in a descending order (highest number first)
    • [0,0] : The Name column in ascending order (A at the top, Z at the bottom).
• CSS:
  
  
  • Add the Following stylesheet tag to a Free Form Text/HTML widget on the same page as your Roster (this CSS file includes CSS for the statistics script)
    

    <link type="text/css" href="http://www.axiomfiles.com/Files/258012/wow-roster.css" rel="stylesheet" />

  • Or if you want to customize the colors, add the following to your Custom CSS ("Full Custom CSS" tab if you are using that, or "CSS Additions to Standard" tab if you are using only the Control panel to style your site)
    

    /********************
      WoW Roster XSL
     ********************/
    /* Center text in achievement, level and rank columns */
    td.wowAch, td.wowLevel, td.wowRank { text-align: center; }
    
    /* Right align xp columns */
    td.wowWeekly, td.wowLifeTime { text-align: right; }
    
    /* Add icons images to class and race columns */
    .wowClass span, .wowRace span {
     background-image: url(http://www.axiomfiles.com/Files/278466/icon-wowroster.gif);
     background-repeat: no-repeat;
     height: 18px;
     display: block;
     white-space: nowrap;
    }
    
    /* no image in header row */
    #wowroster th.wowClass, #wowroster th.wowRace { background-image: url(); max-width: 130px; }
    
    /* Shift class and race text (to right side of icon) - Add "text-indent: -99999em;" to hide text */
    td.wowClass span, td.wowRace span { margin-top: 2px; padding-left: 40px; }
    
    /* class color */
    .wowName.wowClassColor-1, .wowName.wowClassColor-1 a { color: #c79c6e; } /* Warrior */
    .wowName.wowClassColor-2, .wowName.wowClassColor-2 a { color: #f58cba; } /* Paladin */
    .wowName.wowClassColor-3, .wowName.wowClassColor-3 a { color: #abd473; } /* Hunter */
    .wowName.wowClassColor-4, .wowName.wowClassColor-4 a { color: #fff569; } /* Rogue */
    .wowName.wowClassColor-5, .wowName.wowClassColor-5 a { color: #ffffff; } /* Priest */
    .wowName.wowClassColor-6, .wowName.wowClassColor-6 a { color: #c41e3b; } /* DK */
    .wowName.wowClassColor-7, .wowName.wowClassColor-7 a { color: #2459ff; } /* Shaman */
    .wowName.wowClassColor-8, .wowName.wowClassColor-8 a { color: #69ccf0; } /* Mage */
    .wowName.wowClassColor-9, .wowName.wowClassColor-9 a { color: #9482ca; } /* Warlock */
    .wowName.wowClassColor-11, .wowName.wowClassColor-11 a { color: #ff7d0a; } /* Druid */
    
    /* roster class icons */
    .wowClass-1 { background-position: 20px 0; } /* Warrior */
    .wowClass-2 { background-position: 20px -100px; } /* Paladin */
    .wowClass-3 { background-position: 20px -150px; } /* Hunter */
    .wowClass-4 { background-position: 20px -200px; } /* Rogue */
    .wowClass-5 { background-position: 20px -250px; } /* Priest */
    .wowClass-6 { background-position: 20px -300px; } /* DK */
    .wowClass-7 { background-position: 20px -350px; } /* Shaman */
    .wowClass-8 { background-position: 20px -400px; } /* Mage */
    .wowClass-9 { background-position: 20px -450px; } /* Warlock */
    .wowClass-11 { background-position: 20px -50px; } /* Druid */
    
    /* roster race icons */
    .wowRace1-0 { background-position: 20px -500px; } /* Human M */
    .wowRace1-1 { background-position: 20px -550px; } /* Human F */
    .wowRace2-0 { background-position: 20px -800px; } /* Orc M */
    .wowRace2-1 { background-position: 20px -850px; } /* Orc F */
    .wowRace3-0 { background-position: 20px -900px; } /* Dwarf M */
    .wowRace3-1 { background-position: 20px -950px; } /* Dwarf F */
    .wowRace4-0 { background-position: 20px -1000px; } /* NE M */
    .wowRace4-1 { background-position: 20px -1050px; } /* NE F */
    .wowRace5-0 { background-position: 20px -1100px; } /* Undead M */
    .wowRace5-1 { background-position: 20px -1150px; } /* Undead F */
    .wowRace6-0 { background-position: 20px -1200px; } /* Tauren M */
    .wowRace6-1 { background-position: 20px -1250px; } /* Tauren F */
    .wowRace7-0 { background-position: 20px -1300px; } /* Gnome M */
    .wowRace7-1 { background-position: 20px -1350px; } /* Gnome F */
    .wowRace8-0 { background-position: 20px -1400px; } /* Troll M */
    .wowRace8-1 { background-position: 20px -1450px; } /* Troll F */
    .wowRace9-0 { background-position: 20px -1600px; } /* Goblin M */
    .wowRace9-1 { background-position: 20px -1650px; } /* Goblin F */
    .wowRace10-0 { background-position: 20px -600px; } /* BE M */
    .wowRace10-1 { background-position: 20px -650px; } /* BE F */
    .wowRace11-0 { background-position: 20px -700px; } /* Draenei M */
    .wowRace11-1 { background-position: 20px -750px; } /* Draenei F */
    .wowRace22-0 { background-position: 20px -1500px; } /* Worgen M */
    .wowRace22-1 { background-position: 20px -1550px; } /* Worgen F */
    
    /* roster table sort arrows */
    th.header {
     background: #222222 url(http://www.axiomfiles.com/Files/278466/sort-white.gif) left center no-repeat;
     cursor: pointer;
     font-weight: bold;
     text-align:center;
     padding-left: 10px;
     border-right: 1px solid #00000;
    }
    th.headerSortUp { background: #400000 url(http://www.axiomfiles.com/Files/278466/asc-white.gif) left center no-repeat; }
    th.headerSortDown { background: #804000 url(http://www.axiomfiles.com/Files/278466/desc-white.gif) left center no-repeat; }
    

• Custom CSS
  
  
  • Hopefully I commented the CSS well enough that you should be able to modify the Roster style. But there are a few notes:
    
    
  • To hide the class and roster text:
    
    
    • Add "text-indent: -99999em;" to that line.
    • Remove "padding-left" definition.
    • Then it might look better to have all of these images centered. Notice how the "20px" in ".wowClass-1", ".wowClass-2", etc and ".wowRace1-0", ".wowRace1-1", etc are highlighted in red? Yeah there are a lot of em, but to center the icon, you'll need to change the "20px" to "center".
      
      
  • Table sort arrows - To change the icons color from white to black, just change the file name "white" to "black". For example, change "asc-white.gif" to "asc-black.gif".

• Add Roster: Add the XML/XSL Transformation widget as described above, but don't set up the CSS just yet.

• Add Widget: Ideally, add a Free Form Text/HTML widget to your XML/XSL Transformation widget on your Roster page

• Go to Control Panel > Pages & Content > { Roster Page }
• Click the "Add Widget" tab
• Title: { Enter a title for your Roster }
• Type of Widget: Free Form Text/HTML
• Location on Page: Center of Page
• Click [ Add this Widget ]
• Once saved, you should be returned to the "Widgets/Content" tab
  
  
• Setup Widget: Set up the statistics widget as follows
  
  
  • Click the "Edit" link inside of this widget
  • Switch the editor to "Raw/Script" mode (link in the upper right corner)
  • Copy (Ctrl-C) and paste (Ctrl-V) the following code into that widget
    
    <div id="wowStats">
     <h3 class="statTitle statRace">Race Breakdown</h3>
     <table class="wowStatsRace" width="100%">
      <tr>
       <th class="wowHorde">Blood Elf</th>
       <th class="wowAlliance">Draenei</th>
       <th class="wowAlliance">Dwarf</th>
       <th class="wowAlliance">Gnome</th>
       <th class="wowHorde">Goblin</th>
       <th class="wowAlliance">Human</th>
       <th class="wowAlliance">Night Elf</th>
       <th class="wowHorde">Orc</th>
       <th class="wowHorde">Tauren</th>
       <th class="wowHorde">Troll</th>
       <th class="wowHorde">Undead</th>
       <th class="wowAlliance">Worgen</th>
      </tr>
      <tr>
       <td class="wowRace wowHorde" data-raceid="10"><br><span class="wowRace10-0"></span><span class="wowRace10-1"></span></td>
       <td class="wowRace wowAlliance" data-raceid="11"><br><span class="wowRace11-0"></span><span class="wowRace11-1"></span></td>
       <td class="wowRace wowAlliance" data-raceid="3"><br><span class="wowRace3-0"></span><span class="wowRace3-1"></span></td>
       <td class="wowRace wowAlliance" data-raceid="7"><br><span class="wowRace7-0"></span><span class="wowRace7-1"></span></td>
       <td class="wowRace wowHorde" data-raceid="9"><br><span class="wowRace9-0"></span><span class="wowRace9-1"></span></td>
       <td class="wowRace wowAlliance" data-raceid="1"><br><span class="wowRace1-0"></span><span class="wowRace1-1"></span></td>
       <td class="wowRace wowAlliance" data-raceid="4"><br><span class="wowRace4-0"></span><span class="wowRace4-1"></span></td>
       <td class="wowRace wowHorde" data-raceid="2"><br><span class="wowRace2-0"></span><span class="wowRace2-1"></span></td>
       <td class="wowRace wowHorde" data-raceid="6"><br><span class="wowRace6-0"></span><span class="wowRace6-1"></span></td>
       <td class="wowRace wowHorde" data-raceid="8"><br><span class="wowRace8-0"></span><span class="wowRace8-1"></span></td>
       <td class="wowRace wowHorde" data-raceid="5"><br><span class="wowRace5-0"></span><span class="wowRace5-1"></span></td>
       <td class="wowRace wowAlliance" data-raceid="22"><br><span class="wowRace22-0"></span><span class="wowRace22-1"></span></td>
      </tr>
     </table>
     <h3 class="statTitle statClass">Class Breakdown</h3>
     <table class="wowStatsClass" width="100%">
      <tr>
       <th class="wowClass"><span class="wowClass-6">Death Knight</span></th>
       <th class="wowClass"><span class="wowClass-11">Druid</span></th>
       <th class="wowClass"><span class="wowClass-3">Hunter</span></th>
       <th class="wowClass"><span class="wowClass-8">Mage</span></th>
       <th class="wowClass"><span class="wowClass-2">Paladin</span></th>
       <th class="wowClass"><span class="wowClass-5">Priest</span></th>
       <th class="wowClass"><span class="wowClass-4">Rogue</span></th>
       <th class="wowClass"><span class="wowClass-7">Shaman</span></th>
       <th class="wowClass"><span class="wowClass-9">Warlock</span></th>
       <th class="wowClass"><span class="wowClass-1">Warrior</span></th>
      </tr>
      <tr>
       <td class="wowClass" data-classid="6"></td>
       <td class="wowClass" data-classid="11"></td>
       <td class="wowClass" data-classid="3"></td>
       <td class="wowClass" data-classid="8"></td>
       <td class="wowClass" data-classid="2"></td>
       <td class="wowClass" data-classid="5"></td>
       <td class="wowClass" data-classid="4"></td>
       <td class="wowClass" data-classid="7"></td>
       <td class="wowClass" data-classid="9"></td>
       <td class="wowClass" data-classid="1"></td>
      </tr>
     </table>
     <h3 class="statTitle statLevel">Level Breakdown <span class="wowhdrlvl"></span></h3>
     <div class="wowStatsLevel"></div>
    </div>
    
    <link type="text/css" href="http://www.axiomfiles.com/Files/258012/wow-roster.css" rel="stylesheet" />
    <style type="text/css">
    /* Custom CSS goes here */
    
    /* Hide the WoW Auto Roster & Default GP Roster */
    .gpWidget-gpwowautoroster, .gpWidget-rosterlrg { display: none; }
    </style>
    
    <script type="text/javascript" src="http://www.axiomfiles.com/Files/258012/wow-roster-xsl.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
     $('#wowroster').wowrosterxsl({
      replaceRanks : true, // set to false by default; ranks values below show the default settings
      ranks : {
       0 : "Guild Leader",
       1 : "Council",
       2 : "Officer",
       3 : "Raider",
       4 : "Member",
       5 : "Alt",
       6 : "New Recruit",
       7 : "Probation"
      }
     });
    });
    // CODE TO RESORT THE ROSTER
    $(window).load(function(){
      $('#wowroster').trigger('sorton', [[ [3,1], [0,0] ]] );
    });
    </script>
    
    
• Customize Script
  
  
  • Using the code and its options:
    
    The code above will run without any customization and show your guild roster. But there are a bunch of options I've included so you can customize it to your liking. The way the function works is you. Options are added as follows:
    
    $('#wowroster').wowrosterxsl({ key : value, key : value, key : value });
    
    ** NOTE ** the last "key: value" pair should NOT be followed by a comma or IE will go ballistic and bite your leg.
    
    

    $('#wowroster')	This points to the "<table id="wowroster"></table>" (in light orange) seen in the code above. Note that selectors that point to an ID will begin with a hash sign "#".
    wowrosterxsl({})	wowrosterxsl is the name of the function that enhances the wowroster table made from the XSL script. When putting this together with the  $('#wowroster') above, make sure there is a period separating them.
    key : value	This is called a key:value pair. The key is the name of the variable and the value is well, the value. For example, if I added someone named John Smith to my address book, I would look in my book and find "Last Name" and enter "Smith". Last name is the key and Smith is the value. Below is the list of key : value pairs that are recognized by this script, anything more will just be ignored.

    
    
    
  • All of the options
    
    

    Key	Value (default shown)	Description
    wowMaxLevel	80	Change the max level to show on the level breakdown graph (to 85 after the next expansion is released)
    showStatistics	true	Set to false to hide the entire guild statistics block
    replaceRanks	false	Set to true to get the "ranks" value and replace the "Rank 0", "Rank 1", etc in the Rank column
    ranks	{   0 : "Guild Master",   1 : "Council",   2 : "Officer",   3 : "Veteran",   4 : "Member",   5 : "Alt",   6 : "New Recruit",   7 : "Probation"  }	Set the rank name to match your guild. Also, make sure each line, except the last, has a comma at the end.
    addAutoRoster	false	Set this to true to gather information from the WoW Auto Roster table and add it to the WoW Roster XSL table. This will add the character popup link, mail and all medals to this table.
    includeNotes	true	Set this to false if you don't want to add the guild notes from the WoW Auto Roster to this table ( this value is ignored if "addAutoRoster" is set to false ).
    includeDKP	true	Set this to false if you don't want to add the DKP column from the WoW Auto Roster to this table ( this value is ignored if "addAutoRoster" is set to false ).
    addGPUser	false	Set this to true to gather information from the GuildPortal Default Roster (it has the "GP User" column)

  
  
  
  • Examples:
    
    These examples should be wrapped inside of a:
    
      $(document).ready(function(){ ... })
    
    replace the ellipsis (...) with the script in the column below.
    
    

    Action	Script	Notes:
    Change WoW Max Level	$('#wowroster').wowrosterxsl({  wowMaxLevel  : 90 });	Setting the "wowMaxLevel" will modify the level breakdown graph to show all levels between 10 and this set max level.
    Hide Statistics Box & add GP User	$('#wowroster').wowrosterxsl({  showStatistics : false,  addGPUser      : true });	These settings allow you to add the WoW Roster XSL with the statistics panel hidden and extra data from the GP User column - this requires that the default GP Roster widget is on the same page.
    Add WoW Auto Roster info, no DKP	$('#wowroster').wowrosterxsl({  addAutoRoster  : true,  includeDKP     : false });	This adds information from the WoW Auto Roster, which includes the character popup, mail/blog links and medals); but hides the DKP column -  this requires that the WoW Auto Roster widget is on the same page and populated with data from the GP Helper addon.
    Add WoW Auto Roster info and GP User, no notes	$('#wowroster').wowrosterxsl({  addAutoRoster  : true,  addGPUser      : true,  includeNotes   : false });	This adds information from the WoW Auto Roster (character popup, mail/blog links and medals without the notes) & the default GP Roster widget (GP User) - this requires that the WoW Auto Roster widget and default GP Roster widget is on the same page and populated with data from the GP Helper addon)
    Replace default Rank # with names	$('#wowroster').wowrosterxsl({  replaceRanks : true,  ranks : {   0 : "Guild Master",   1 : "Council",   2 : "Officer",   3 : "Veteran",   4 : "Member",   5 : "Alt",   6 : "New Recruit",   7 : "Probation"  } })	As stated, this replaces the "Rank 0", "Rank 1", etc with the rank names you add.

    
    
    
• Customize CSS
  
  
  
  • There is more CSS than what is just listed above in the "Guild Roster Only" section. To see it all, view the css file here.
  • It would be possible to load the CSS file as listed in the code above, then add CSS to override the properties in the file, if added below the <link> tag, instead of copying the entire CSS file and modifying it, like this:
    

    <link type="text/css" href="http://www.axiomfiles.com/Files/258012/wow-roster.css" rel="stylesheet" />
    <style type="text/css">
    /* Custom CSS goes here */
    /* level breakdown ruler */
    .wowLevelRuler td, .wowLevelDivider td { border-color: #fff; }
    .wowLevelRuler span { background: #f00; }
    
    /* Hide the WoW Auto Roster & Default GP Roster */
    .gpWidget-gpwowautoroster, .gpWidget-rosterlrg { display: none; }
    </style>
    

  • If you want to hide the WoW Auto Roster and/or Default GP roster, add the last line of CSS above.

Edit (6/2/2010): Modified Class color CSS to prevent being over-ridden by default CSS ( I use custom CSS, so I didn't notice )

< script   ->   <script

1. Remove the script from that page
2. Make a simple HTML page with the script... like this (copy & paste it into a text editor like notepad, not a rich text editor like wordpad):
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   <html><head>
   <style type="text/css">
   body {background: #eee; color: #000;}
   a:link { color: #0084ff; text-decoration: none; }
   a:hover { color: #000; }
   a:visited,a:active { color: #0084ff; }
   </style>
   </head><body>
   
   <script type="text/javascript" src="http://www.webdkp.com/dkp/+Aerie+Peak+/Asylum!/remote.js"></script>
   <div id="webdkp"></div>
   
   </body></html>
3. Save the file to your desktop and name it something like "webdkp.htm"
4. Upload the file to your Guild files (Control Panel > General Settings & Tools > File Manager)
5. When you have uploaded the file, copy the link (right click and choose copy lick location, or something like that)
6. Now go to Control Panel > Pages & Content (Widget) > Roster
7. Click on the "Add Widget" tab
8. Title: { whatever you want }
9. Type of Widget: Embedded Page
10. Location on Page: Center of Page
11. Click [ Add this Widget ]
12. Now you should be in the "Widgets/Content" tab, click on the Edit link inside the widget you just added
13. Embedded Page URL: { paste in the URL you copied from your file manager }
14. Page Height: { you can use 2095 (the height of that particular table, or any height and it should add a scrollbar to the content }
15. Click [ Save ]
16. Reload your Roster page and check your work.

.wowLevelRuler td { padding: 0; margin: 0 }