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

0
Like

0
Dislike

Tera Recruitment Status

GuildPortal admin site link to original post

I made all of these icons purple to match Socxiety's site, but if you need a different color, just message me and I'll work on it for you

 

The Code
Add the following code into a free form text/HTML widget while it is in <>HTML mode.
<style type="text/css">
 .recruitbx { background: url() center center no-repeat; border: 0px; color: #ddd; font-size: 14px; }
 .recruitbx td { vertical-align: middle; text-align: center; }
 .recruitbx td a { font-weight: bold; }

 .teraclass, .open, .closed, .green, .red {
  background: url(http://www.axiomfiles.com/Files/278466/icons-tera-classes.png) no-repeat;
  height: 25px;
  padding-left: 30px;
 }

 td.archer { background-position: center top; }
 td.beserker { background-position: center -50px; }
 td.lancer { background-position: center -100px; }
 td.mystic { background-position: center -150px; }
 td.priest { background-position: center -200px; }
 td.slayer { background-position: center -250px; }
 td.sorcerer { background-position: center -300px; }
 td.warrior { background-position: center -350px; }

 td.open { background-position: center -400px; }
 td.closed { background-position: center -450px; }
 td.green { background-position: center -500px; }
 td.red { background-position: center -550px; }
</style>
<center><table class="recruitbx">

 <tbody><tr><td class="teraclass archer"></td><td>
 <a class="tooltip" title="10/10 Spots open">Archer
 </a></td><td class="open">

 </td></tr><tr><td class="teraclass beserker"></td><td>
 <a class="tooltip" title="10/10 Spots open">Beserker
 </a></td><td class="open">
 
 </td></tr><tr><td class="teraclass lancer"></td><td>
 <a class="tooltip" title="10/10 Spots open">Lancer
 </a></td><td class="open">

 </td></tr><tr><td class="teraclass mystic"></td><td>
 <a class="tooltip" title="10/10 Spots open">Mystic
 </a></td><td class="open">

 </td></tr><tr><td class="teraclass priest"></td><td>
 <a class="tooltip" title="10/10 Spots open">Priest
 </a></td><td class="open">

 </td></tr><tr><td class="teraclass slayer"></td><td>
 <a class="tooltip" title="10/10 Spots open">Slayer
 </a></td><td class="open">

 </td></tr><tr><td class="teraclass sorcerer"></td><td>
 <a class="tooltip" title="No spots open">Sorcerer
 </a></td><td class="closed">

 </td></tr><tr><td class="teraclass warrior"></td><td>
 <a class="tooltip" title="No spots open">Warrior
 </a></td><td class="closed">

 </td></tr></tbody></table>

Hover Class names<br/>for more information
</center>
Customizing
  • All of the class images and status icons were combined into one image (image sprite method). The images are then targeted using the background-position setting. If you want to add your own status image, then you'll have to add a background-image: url(...) to add it. See the other recruitment status posts for examples.
  • Modify the overall text color by changing the CSS in blue.
  • Change your recruitment status tooltip (popup) by modifying the title element in orange.
  • Change your recruitment status image by changing the class in green next to the matching class. I didn't include an example of the "green" or "red" status icons, but you can mess around with it and pick the one you like best, or add your own.
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%