I got a post on my help site forums about adding tooltips to these recruitment boxes. With the new tooltip script that GuildPortal has implemented, there is no need to add javascript to make this work... here are some quick examples of how to add them yourself.

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>

Hi Ptolemaeus!

• Actually Aurabesh of Pack made an Aion Recruitment Status box and shared it with me. I posted it on my help site but I guess I forgot to post it on the admin forums as well.
• Also, Eph of The Guardians made a "fish eye" style recruitment bar on his site - the instructions of how to add it are here, but you'll need to change the images and text.

Anyway, I changed Aurabesh's recruitment status box slighty by using the images provided by GuildPortal.



The Code

<style type="text/css">
.recruitbx { background: url() center center no-repeat; color: #dddddd; border:0px; font-size:16px; }

 .check { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/check.gif) center center no-repeat; height:18px; padding-left:20px; }
 .nocheck { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/nocheck.gif) center center no-repeat; height:18px; padding-left:20px; }
 .medium { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/closed.gif) center center no-repeat;  height:18px; padding-left:20px;}
 .up { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/uparrow.png) center center no-repeat;  height:18px; padding-left:20px;}
 .down { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/downarrow.png) center center no-repeat;  height:18px; padding-left:20px;}

 .Ranger { background: url(http://www.guildportal.com/GuildImages/AionImages/class_5.gif) center no-repeat; height:18px; padding-left:20px; }
 .Assassin { background: url(http://www.guildportal.com/GuildImages/AionImages/class_4.gif) center no-repeat; height:18px; padding-left:20px; }
 .Chanter { background: url(http://www.guildportal.com/GuildImages/AionImages/class_11.gif) center no-repeat; height:18px; padding-left:20px; }
 .Cleric { background: url(http://www.guildportal.com/GuildImages/AionImages/class_10.gif) center no-repeat; height:18px; padding-left:20px; }
 .Sorcerer { background: url(http://www.guildportal.com/GuildImages/AionImages/class_7.gif) center no-repeat; height:18px; padding-left:20px; }
 .Spiritmaster { background: url(http://www.guildportal.com/GuildImages/AionImages/class_8.gif) center no-repeat; height:18px; padding-left:20px; }
 .Templar { background: url(http://www.guildportal.com/GuildImages/AionImages/class_2.gif) center no-repeat; height:18px; padding-left:20px; }
 .Gladiator { background: url(http://www.guildportal.com/GuildImages/AionImages/class_1.gif) center no-repeat; height:18px; padding-left:20px; }

 .Scout { background: url(http://www.guildportal.com/GuildImages/AionImages/class_3.gif) center no-repeat; height:18px; padding-left:20px; }
 .Warrior { background: url(http://www.guildportal.com/GuildImages/AionImages/class_0.gif) center no-repeat; height:18px; padding-left:20px; }
</style>
<center><table class="recruitbx"><tbody>
 
 <tr><td align="right" class="Gladiator"></td>
 <td align="center" valign="middle"><strong>
 <a class="tooltip" title="Recruitment Status: 10/10 spots open">Gladiator
 </a></strong></td><td class="up">
 </td></tr>
 
 <tr><td align="right" class="Templar">
 </td><td align="center" valign="middle"><strong>
 <a class="tooltip" title="Recruitment Status: 10/10 spots open">Templar
 </a></strong></td><td class="up">
 
 </td></tr><tr><td align="right" class="Assassin">
 </td><td align="center" valign="middle"><strong>
 <a class="tooltip" title="Recruitment Status: 10/10 spots open">Assassin
 </a></strong></td><td class="up">

 </td></tr><tr><td align="right" class="Ranger">
 </td><td align="center" valign="middle"><strong>
 <a class="tooltip" title="Recruitment Status: 10/10 spots open">Ranger
 </a></strong></td><td class="up">

 </td></tr><tr><td align="right" class="Sorcerer">
 </td><td align="center" valign="middle"><strong>
 <a class="tooltip" title="Recruitment Status: 10/10 spots open">Sorcerer
 </a></strong></td><td class="up">

 </td></tr><tr><td align="right" class="Spiritmaster">
 </td><td align="center" valign="middle"><strong>
 <a class="tooltip" title="Recruitment Status: 10/10 spots open">Spiritmaster
 </a></strong></td><td class="up">

 </td></tr><tr><td align="right" class="Cleric">
 </td><td align="center" valign="middle"><strong>
 <a class="tooltip" title="Recruitment Status: 10/10 spots open">Cleric
 </a></strong></td><td class="up">

 </td></tr><tr><td align="right" class="Chanter">
 </td><td align="center" valign="middle"> <strong>
 <a class="tooltip" title="Recruitment Status: 10/10 spots open">Chanter
 </a></strong></td><td class="up">

 </td></tr></tbody></table>
<span style="color: #ddd;">Hover Class names<br/>for more information</span>
</center>

Customizing

• Modify the overall text color by changing the CSS in blue.
• Modify the CSS for "check", "nocheck", "medium", "up" or "down" by changing the background image URL and adjusting the height to match the image height and the padding-left to match the image width
• Change your recruitment status tooltip (popup) by modifying the title element in purple.
• Change your recruitment status image by changing the class in green to match the CSS class.
• I wasn't sure about the "Warrior" and "Scout" classes - the icons are included in the CSS, but I didn't add it to the table.

Hey guys, I have been tring to figure out how to make a code for a recruit box and even maybe a progression one, but I have not found a legit one.

Here is an example of one that I really like, but not sure where they got the code.

http://burningbladecore.guildportal.com/Guild.aspx?GuildID=302793&TabID=2537691

Any ideas where I can find their recruit box / progression box as well as how to install it?

You are a genius, check out the page!

http://morbidka.guildportal.com/Guild.aspx?GuildID=355551&TabID=2976866

I owe you!

<3

Hi JahsinVII!

Just so you know I hate IE LOL. The problem is in your CSS... for some reason all the spaces were removed in the "background" definition and this is what breaks the CSS in IE. So simply add one space to each entry and you'll be ok. Here is the space you need to add back, in red. Sorry I'm too lazy at the moment to modify the whole block of CSS and paste it here, but this should give you the idea

.assassin {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2assassin.jpg) no-repeat; height:20px; padding-left:26px; }