GuildPortal will be going offline (permanently) by the end of the month.
Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Mottie (MVP) 6/23/2011 11:16 AM EST : Rank Tree
GuildPortal MVP
Posts: 3884
Zomgawsh Poster

Rank Tree

Add this code inside of a Free Form Text/HTML widget while the editor is in HTML mode.

<div id="ranks"></div>
 var ranks = {
    '1:Guild Master'  : [ 'Aaron' ],
    '2:Assistant GM'  : [ 'Barbara', 'Charles' ],
    '3:Raid Leader'   : [ 'Doug', 'Elaine', 'Frieda', 'George' ],
    '3:Battle Master' : [ 'Hanna' ],
    '4:Dg Master'     : [ 'Izzy', 'Jack' ],
    '4:Teams Leader'  : [ 'Karen', 'Louis' ],
    '4:Bg Leader'     : [ 'Mike' ],
    '5:Veterans'      : [ 'Nicki', 'Orlando', 'Paul', 'Quintin', 'Roger', 'Sara', 'Teresa', 'Uma', 'Violet' ],
    '6:Apprentice'    : [ 'William', 'Xavier' ],
    '7:Recruit'       : [ 'Yanni' ],
    '8:Bucket'        : [ 'Zoey' ]
 // ****************************
 // Don't change anything below
 // ****************************

 ,j, t = '', row = 0, rank, indx = 1;
 $.each(ranks, function(k,v){
  rank = k.split(':');
  if (rank[0] > row) {
   t += '</div><div class="rank-row-' + ++row + '">';
  t += '<div class="rank-block rank-block-' + indx++ + '"><h2>' + rank[1] + '</h2><ul>';
  for (j=0; j < v.length; j++) {
   t += '<li>' + v[j] + '</li>';
  t += '</ul></div>';
 t += '</div>';
#ranks {
  width: 650px;
  margin: 0 auto;
  text-align: center;
.rank-block {
  display: inline-block;
  margin: 5px;
  border: #555 1px solid;
  background: #444 url();
  width: 200px;
  min-height: 50px;
  border-radius: 1em;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  vertical-align: top;
.rank-block h2 {
  margin: 5px 0;
.rank-block ul {
  margin: 5px 0;
  list-style: none;
  padding: 0;
  • Adding Names to the Ranks

    • In the ranks variable you will see that each line has this format:

      '2:Assistant GM'  : [ 'Barbara', 'Charles' ],

    • The first part (or key) is broken into two sub-parts.
    • The "2" at the beginning tells the script which tier to add the list of names to.
    • "Assistant GM" is the name of the block, and it is separated from the tier number by a colon ":".
    • There is another colon which separates the first part (or key) from the second part (value).
    • The value must be wrapped in square brackets - this means it's an array of names. It's needed even if there is only one name.
    • Each name inside the brackets is separated by a comma, but you can't have a comma after the last name or IE will break.
    • Each key:value pair as shown above must be followed by a comma, except for the very last one. As stated before, a trailing comma will break IE.
    • Hopefully there are enough examples in the code above so you can see how to add names.

  • Styling

    • The overall size and appearance of this tree can be modified using the CSS

      #ranks {
      650px;        /* Overall width of the tree, adjust it to fit inside the widget you put it in */
        margin: 0 auto;      /* Center the whole thing */
        text-align: center;  /* Center all of the text */

    • Each block is styled as follows:

      .rank-block {
        display: inline-block;        /* Center the block inside the ranks block; this won't work in IE6-IE7  */
        margin: 5px;                  /* Add some spacing around the block */
        border: #555 1px solid;       /* Add border around the block */
        background: #444 url();       /* Set background color; add an image here if you want */
        width: 200px;                 /* Width of the block */
        min-height: 50px;             /* Minimum height of the block; won't work in IE6-7 */
        border-radius: 1em;           /* Add a rounded corner; next three lines do this */
        -moz-border-radius: 1em;
        -webkit-border-radius: 1em;
        vertical-align: top;          /* Align the blocks across the top (see the "Battle Master" block in the image) */

    • The rest of the css adds some spacing around the block title and content, and removes the bullets from the list

Healingpro (New Admin) 6/11/2013 3:03 PM EST : RE: Rank Tree
Posts: 143
Posts With Wolves

Hello there!

I am trying to make this Rank Tree work on my website, but when i upload the basic code and save it, it shows up completly blank on my page Nothing is showing up, no names no boxes etc.

Has the code for the rank tree changed?

Healingpro (New Admin) 6/13/2013 3:23 PM EST : RE: Rank Tree
Posts: 143
Posts With Wolves

Sorry to bump this again already, but i would  really love to find out if this code still works? I cant get it to show up in any way

Healingpro (New Admin) 6/22/2013 5:11 AM EST : RE: Rank Tree
Posts: 143
Posts With Wolves

Anyone?? Please?

Nireos (New Admin) 11/8/2013 1:30 PM EST : RE: Rank Tree
Posts: 32
Becoming Adept!

I had the same exact issue.  I had to move the code from the HTML to the Raw/Script area.  The problem is it changed ">" to "&gt;" and "<" to "&lt;" so the script would not execute.

It's now drawing the boxes in my widget.

Admins Online
There are   members online.
So-and-so has logged on!