Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Aion > Aion Recruitment Status
Mottie (SuperAdmin) 1/5/2011 12:08 PM EST : Aion Recruitment Status
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Aion Recruitment Status

This code was sent to me. It was made by Aurabesh of Pack, thanks again! You really should take a look at the site! It's beautiful! 

I did reorganize the code a little and left in the up and down paws that match Aurabesh's site... you can design/modify those as you see fit.




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

 .check { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/check.gif) center center no-repeat; height:25px; padding-left:20px; }
 .nocheck { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/nocheck.gif) center center no-repeat; height:25px; padding-left:20px; }
 .medium { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/closed.gif) center center no-repeat; height:41px; padding-left:50px;}
 .up { background: url(http://img7.imageshack.us/img7/4553/41871886.png) center center no-repeat; height:41px; padding-left:50px;}
 .down { background: url(http://img156.imageshack.us/img156/7524/downl.png) center center no-repeat; height:41px; padding-left:50px;}

 .Gladiator { background: url(http://img3.imageshack.us/img3/1743/gladiator.png) center no-repeat; height:41px; padding-left:50px; }
 .Templar { background: url(http://img7.imageshack.us/img7/4498/templarj.png) center no-repeat; height:41px; padding-left:50px; }
 .Assassin { background: url(http://img40.imageshack.us/img40/6956/assassinj.png) center no-repeat; height:41px; padding-left:50px; }
 .Ranger { background: url(http://img40.imageshack.us/img40/6005/scouto.png) center no-repeat; height:41px; padding-left:50px; }
 .Sorcerer { background: url(http://img40.imageshack.us/img40/416/sorcerer.png) center no-repeat; height:41px; padding-left:50px; }
 .Spiritmaster { background: url(http://img7.imageshack.us/img7/6673/spiritmaster.png) center no-repeat; height:41px; padding-left:50px; }
 .Cleric { background: url(http://img156.imageshack.us/img156/7449/cleric.png) center no-repeat; height:41px; padding-left:50px; }
 .Chanter { background: url(http://img156.imageshack.us/img156/3673/chanter.png) center no-repeat; height:41px; padding-left:50px; }
</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: #4bacc6;">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 red.
  • Change your recruitment status image by changing the class in green to match the CSS class.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 1/5/2011 12:08 PM EST : RE: Aion Recruitment Status
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Here is a second Aion Status, with one other style that Eph of The Guardians made. It's a "fish eye" style recruitment bar - 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.
    Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
    TopBottom

     
     
    Key 
    New posts No new posts
    New posts ( popular ) No new posts ( popular )
    New posts ( sticky ) No new posts ( sticky )
    New posts ( locked ) No new posts ( locked )
     
     
    Who's Online 
    There are   members online.
     
     
    So-and-so has logged on!
    %title%
    %message%