How to add a World of Warcraft Recruitment Status Box to your site

GuildPortal admin site link to original post

There are two styles I put together for the recruitment box

1. Square icons

(with either a blank [] or an x [])


Add the text below to your custom stylesheet (Control Panel > Style & Colors > Custom StyleSheet)

Content Box "Free Form Text/HTML" (How to add HTML)

<style type="text/css">
.druid {color: #ff7d0a; background: url(http://www.guildportal.com/GuildImages/WOWRosterImages/druid.gif) no-repeat; height:18px; padding-left:20px; }
.hunter {color: #abd473; background: url(http://www.guildportal.com/GuildImages/WOWRosterImages/hunter.gif) no-repeat; height:18px; padding-left:20px; }
.mage {color: #69ccf0; background: url(http://www.guildportal.com/GuildImages/WOWRosterImages/mage.gif) no-repeat; height:18px; padding-left:20px; }
.paladin {color: #f58cba; background: url(http://www.guildportal.com/GuildImages/WOWRosterImages/paladin.gif) no-repeat; height:18px; padding-left:20px; }
.priest {color: #ffffff; background: url(http://www.guildportal.com/GuildImages/WOWRosterImages/priest.gif) no-repeat; height:18px; padding-left:20px; }
.rogue {color: #fff569; background: url(http://www.guildportal.com/GuildImages/WOWRosterImages/rogue.gif) no-repeat; height:18px; padding-left:20px; }
.shaman {color: #2459ff; background: url(http://www.guildportal.com/GuildImages/WOWRosterImages/shaman.gif) no-repeat; height:18px; padding-left:20px; }
.warlock {color: #9482ca; background: url(http://www.guildportal.com/GuildImages/WOWRosterImages/warlock.gif) no-repeat; height:18px; padding-left:20px; }
.deathknight {color: #c41e3b; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/dk.png) no-repeat; height:18px; padding-left:20px; }
.warrior {color: #c79c6e; background: url(http://www.guildportal.com/GuildImages/WOWRosterImages/warrior.gif) no-repeat; height:18px; padding-left:20px; }
.check {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/check.gif) no-repeat; height:18px; padding-left:20px;}
.nocheck {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/nocheck.gif) no-repeat; height:18px; padding-left:20px;}
.closed {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/closed.gif) no-repeat; height:18px; padding-left:20px;}
</style>
<center>
<table border="0">
<tbody><tr><td class="deathknight"><a class="tooltip" title="Closed">Deathknight</a></td><td class="nocheck">
</td></tr><tr><td class="druid"><a class="tooltip" title="Closed">Druids</a></td><td class="nocheck">
</td></tr><tr><td class="hunter"><a class="tooltip" title="Marksman only">Hunters</a></td><td class="check">
</td></tr><tr><td class="mage"><a class="tooltip" title="Frost">Mages</a></td><td class="check">
</td></tr><tr><td class="paladin"><a class="tooltip" title="Healadins">Paladins</a></td><td class="check">
</td></tr><tr><td class="priest"><a class="tooltip" title="Shadow">Priests</a></td><td class="check">
</td></tr><tr><td class="rogue"><a class="tooltip" title="Gnomes only!">Rogues</a></td><td class="check">
</td></tr><tr><td class="shaman"><a class="tooltip" title="Elemental">Shamans</a></td><td class="check">
</td></tr><tr><td class="warlock"><a class="tooltip" title="Any">Warlocks</a></td><td class="check">
</td></tr><tr><td class="warrior"><a class="tooltip" title="Tanks">Warriors</a></td><td class="check">
</td></tr>
</tbody></table>
</center>

• To show the status you desire, just change the class in the table to "check" (), "nocheck" () or "closed" ().
• With the new tooltip, you can easily add popups to your class needs, basically the part in green was added around the class name. Edit the part in orange to change the tooltip comments.
  
  <a class="tooltip" title="Closed">Druids</a>

Edit (7/14/2008): Added the new hero class icon and color for the Wrath of the Lich King expansion. I also combined the code to make it easier to copy and paste all of it into a free form text/HTML content box as the GuildPortal editor won't delete the CSS anymore.
Edit (5/31/2009): Added a link around the class name to make it pop-up the class needs!

[top]

---

2. Round Icons

Content Box "Free Form Text/HTML" (How to add HTML)

<style type="text/css">
.druid {color: #ff7d0a; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png)  left top no-repeat; height:23px; padding-left:25px; }
.hunter {color: #abd473; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png)  left -22px no-repeat; height:23px; padding-left:25px; }
.mage {color: #69ccf0; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png)  left -44px no-repeat; height:23px; padding-left:25px; }
.paladin {color: #f58cba; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png)  left -66px no-repeat; height:23px; padding-left:25px; }
.priest {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png)  left -89px no-repeat; height:23px; padding-left:25px; }
.rogue {color: #fff569; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png)  left -112px no-repeat; height:23px; padding-left:25px; }
.shaman {color: #2459ff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png)  left -134px no-repeat; height:23px; padding-left:25px; }
.warlock {color: #9482ca; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png)  left -156px no-repeat; height:23px; padding-left:25px; }
.warrior {color: #c79c6e; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png)  left -178px no-repeat; height:23px; padding-left:25px; }
.deathknight {color: #c41e3b; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png)  left -202px no-repeat; height:23px; padding-left:25px; }
.up {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png)  left -224px no-repeat; height:23px; padding-left:25px;}
.down  {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png)  left -249px no-repeat; height:23px; padding-left:25px;}
</style>
<center>
<table border="0">
<tbody><tr><td class="deathknight"><a class="tooltip" title="Closed">Deathknight</a></td><td class="down">
</td></tr><tr><td class="druid"><a class="tooltip" title="Closed">Druids</a></td><td class="down">
</td></tr><tr><td class="hunter"><a class="tooltip" title="Marksman only">Hunters</a></td><td class="up">
</td></tr><tr><td class="mage"><a class="tooltip" title="Frost">Mages</a></td><td class="up">
</td></tr><tr><td class="paladin"><a class="tooltip" title="Healadins">Paladins</a></td><td class="up">
</td></tr><tr><td class="priest"><a class="tooltip" title="Shadow">Priests</a></td><td class="up">
</td></tr><tr><td class="rogue"><a class="tooltip" title="Gnomes only!">Rogues</a></td><td class="up">
</td></tr><tr><td class="shaman"><a class="tooltip" title="Elemental">Shamans</a></td><td class="up">
</td></tr><tr><td class="warlock"><a class="tooltip" title="Any">Warlocks</a></td><td class="up">
</td></tr><tr><td class="warrior"><a class="tooltip" title="Tanks">Warriors</a></td><td class="up">
</td></tr>
</tbody></table>
</center>

• Note: to change this class status, change "up" and "down"
• With the new tooltip, you can easily add popups to your class needs, basically the part in green was added around the class name. Edit the part in orange to change the tooltip comments.
  
  <a class="tooltip" title="Closed">Druids</a>

Edit (7/14/2008): Updated this box with Death Knight Icon and color. Put the code together for easy copy and pasting straight into a free form text/HTML content box.
Edit (5/31/2009): Added a link around the class name to make it pop-up the class needs!
Edit (7/23/2009): Added an extra space between the background url and the "left"... no idea why it disappears in the post (but there when I edit)

Hi DarkProphecyAdmin!

With the new tooltip script that GP has implemented, you can easily add your own tooltips to the recruitment box. I've made the changes to the WoW recruitment round and square icons at the beginning of this thread. I would have updated all the other games as well, but I am not familiar with different specializations of those classes.

The basic addition you need to make is to surround the class name like "Druids" with a link like this:

<a class="tooltip" title="Closed">Druids</a>

so a here is a before and after of just one row for comparison:

BEFORE:

</td></tr><tr><td class="druid">Druids</td><td class="nocheck">

AFTER:

</td></tr><tr><td class="druid"><a class="tooltip" title="Closed">Druids</a></td><td class="nocheck">

You can add anything inside the title attribute, including HTML. But you need to use single quotes (') in place of all quotes or an HTML escape code (&quot;) if you must have quotes. Examples of the HTML working and the code.

Tooltip Test

<a title="Here is how you add &quot;quotes&quot; around text, but if you use HTML, use a single quote instead <img src='http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/tooltip.gif'>, cool huh?" class="tooltip">Tooltip Test</a>

I'm having the same issue here as well. No Icons... no check boxes... I used to be so good with GP too... then the admin panel got all "User friendly" on us... /sadpanda

Site link

Bound for Hell Recruitment

Hey Mottie,
    First off thanks for putting this site together. I am learning not only alot about GP, but HTML in general. I am having an issue with the icons in the recruiting box though. Its almost like there tiling or something. Heres a Link: http://fallenxangels.abyssportal.com/Guild.aspx?GuildID=418861&TabID=3560633&ClearCache=YES&PageEditOn=1. Help!

Thx,
    LoneXPaw

Your Amazing Mottie