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
Forums : Pimp My Site! > Recruiting Box?
Mottie (MVP) 6/1/2009 5:03 PM EST : RE: Recruiting Box?
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

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>
TopBottom

PtolemaeusAion (New Admin) 11/3/2009 10:47 PM EST : RE: Recruiting Box?
PtolemaeusAion
Posts: 115
Posts With Wolves

Hey any chance you can make a code for an Aion recruitment box man? be much appreciated
TopBottom

Mottie (MVP) 11/4/2009 1:10 AM EST : RE: Recruiting Box?
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

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.
TopBottom

PtolemaeusAion (New Admin) 11/15/2009 5:10 PM EST : RE: Recruiting Box?
PtolemaeusAion
Posts: 115
Posts With Wolves

That's great thanks man. Scout and Warrior etc in Aion are just "primary classes" that expand to Gladiator, templar etc so don't need so this codes just fine.
TopBottom

phrozenthedruid (New Admin) 4/15/2010 10:37 PM EST : RE: Recruiting Box?
phrozenthedruid
Posts: 18
Becoming Adept!

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?
TopBottom

Mottie (MVP) 4/16/2010 12:54 AM EST : RE: Recruiting Box?
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Phrozenthedruid!

Well, the link you shared appears to have a recruit box that is basically a table that you have to manually update. The progression box looks like it's just a list that is manually updated as well. You could basically just copy what they have on their site or try one of the multitude of recruitment/progression scripts that I have available for you to use - sadly they all too require manual updating, but I tried to make it as easy as possible:
I hope this helps!
TopBottom

phrozenthedruid (New Admin) 4/16/2010 3:39 AM EST : RE: Recruiting Box?
phrozenthedruid
Posts: 18
Becoming Adept!

Mottie said:
Hi Phrozenthedruid!

Well, the link you shared appears to have a recruit box that is basically a table that you have to manually update. The progression box looks like it's just a list that is manually updated as well. You could basically just copy what they have on their site or try one of the multitude of recruitment/progression scripts that I have available for you to use - sadly they all too require manual updating, but I tried to make it as easy as possible:
I hope this helps!


You are a genius, check out the page!

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

I owe you!

<3
TopBottom

JahsinVII (New Admin) 5/7/2010 10:28 PM EST : RE: Recruiting Box?
JahsinVII
Posts: 679
Zomgawsh Poster

Hey guys I used the EQ2 html code here for my website, its working great in Firefox but for some reason its not working right in Explorer.  Its not showing the pictures or checkmarks and formatting is a little different.  Any help is appreciated

www.Godmode.Guildportal.com

Thanks
TopBottom

Mottie (MVP) 5/8/2010 9:48 AM EST : RE: Recruiting Box?
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

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; }
TopBottom

JahsinVII (New Admin) 5/8/2010 11:19 AM EST : RE: Recruiting Box?
JahsinVII
Posts: 679
Zomgawsh Poster

that worked....you = da man
TopBottom

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