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?
Ciannon (Guild Admin) 8/1/2008 3:12 PM EST : RE: AoC Recruiting Box
Ciannon
Posts: 2000
Zomgawsh Poster

To change the style of the box (background or border), edit the CSS that is in red.


I know you didn't specify, but for those that want the background in the same color as the content box, simply replace the #111111 with transparent. It's easier than trying to remember what your hexidecimal code was for the color. That's how it was for me anyways. LOL


Epic quotes from Coils:

"lol out of money. I bought my system and forgot to factor in the cost of the game." - Coils 7/14/2008
"No money totaled my car. Cant play. Probly selling my computer. Adios." - Coils 8/25/2008


TopBottom

AKASlaphappy (New Admin) 8/15/2008 1:13 PM EST : RE: Recruiting Box

AKASlaphappy
Posts: 27
Becoming Adept!

I know the game is not out yet, but would it be possible to do a recruitment box for warhammer online?
TopBottom

Mottie (MVP) 8/15/2008 5:10 PM EST : RE: Recruiting Box
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

I could, but I don't know any of the class names or if there are any icons to represent them. I'll look into it.
TopBottom

AKASlaphappy (New Admin) 8/15/2008 5:20 PM EST : RE: Recruiting Box

AKASlaphappy
Posts: 27
Becoming Adept!

Thanks, here is the class information http://www.warhammeronline.com/english/gameInfo/armiesofWAR/

and here is some icons that Mythic has released http://www.warhammeronline.com/buddyicons/index.php.

Hope that helps, I appreciate you working on this for all the Warhammer fans!

TopBottom

Mottie (MVP) 8/16/2008 7:54 AM EST : RE: Recruiting Box
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Age of Conan | D&D Online | Everquest | Everquest 2 | LotRO |Warhammer | WoW round | WoW square

Well, thanks AKASlaphappy for the link to the icons, but they didn't cover every class... so I grabbed a bunch of images and cropped them. This is what I came up with. Feel free to replace the icons with your own.
 
Warhammer Online
 Order Destruction



Order Content Box "Free Form Text/HTML"
<style type="text/css">
.recruitbx {background: #111111; border:0px; font-size:14px;}
.classhd {color:#ffcc00; font-weight:bold; text-align:center;}
.ironbreaker {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wh-ironbreaker.gif) no-repeat; height:20px; padding-left:26px; }
.runepriest {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wh-runepriest.gif) no-repeat; height:20px; padding-left:26px; }
.engineer {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wh-engineer.gif) no-repeat; height:20px; padding-left:26px; }
.brightwizard {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wh-brightwizard.gif) no-repeat; height:20px; padding-left:26px; }
.warriorpriest {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wh-warriorpriest.gif) no-repeat; height:20px; padding-left:26px; }
.witchhunter {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wh-witchhunter.gif) no-repeat; height:20px; padding-left:26px; }
.swordmaster {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wh-swordmaster.gif) no-repeat; height:20px; padding-left:26px; }
.shadowwarrior {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wh-shadowwarrior.gif) no-repeat; height:20px; padding-left:26px; }
.archmage {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wh-archmage.gif) no-repeat; height:20px; padding-left:26px; }
.whitelion {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wh-whitelion.gif) no-repeat; height:20px; padding-left:26px; }
.check {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/check.gif) 2px 2px no-repeat; height:20px; padding-left:20px; }
.nocheck {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/nocheck.gif) 2px 2px no-repeat; height:20px; padding-left:20px; }
.closed {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/closed.gif) 2px 2px no-repeat; height:20px; padding-left:20px;}
</style>
<center>
<table class=recruitbx>
<tbody><tr><td colspan=2 class="classhd">Dwarves
</td></tr><tr><td class="ironbreaker">Ironbreaker</td><td class="check">
</td></tr><tr><td class="runepriest">Rune Priest</td><td class="check">
</td></tr><tr><td class="engineer">Engineer</td><td class="check">
</td></tr><tr><td colspan=2 class="classhd">Human/Empire
</td></tr><tr><td class="brightwizard">Bright Wizard</td><td class="check">
</td></tr><tr><td class="warriorpriest">Warrior Priest</td><td class="check">
</td></tr><tr><td class="witchhunter">Witch Hunter</td><td class="check">

</td></tr><tr><td colspan=2 class="classhd">High Elves
</td></tr><tr><td class="swordmaster">Swordmaster</td><td class="closed">
</td></tr><tr><td class="shadowwarrior">Shadow Warrior</td><td class="check">
</td></tr><tr><td class="archmage">Archmage</td><td class="check">
</td></tr><tr><td class="whitelion">White Lion</td><td class="check">
</td></tr>
</tbody></table>
</center>
Destruction Content Box "Free Form Text/HTML"
<style type="text/css">
.recruitbx {background: #111111; border:0px; font-size:14px; width:150px;}
.classhd {color:#ffcc00; font-weight:bold; text-align:center;}
.blackorc {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wh-blackorc.gif) no-repeat; height:20px; padding-left:26px; }
.shaman {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wh-shaman.gif) no-repeat; height:20px; padding-left:26px; }
.squigherder {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wh-squigherder.gif) no-repeat; height:20px; padding-left:26px; }
.chosen {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wh-chosen.gif) no-repeat; height:20px; padding-left:26px; }
.marauder {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wh-marauder.gif) no-repeat; height:20px; padding-left:26px; }
.zealot {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wh-zealot.gif) no-repeat; height:20px; padding-left:26px; }
.magus {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wh-magus.gif) no-repeat; height:20px; padding-left:26px; }
.sorceress {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wh-sorceress.gif) no-repeat; height:20px; padding-left:26px; }
.disciple {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wh-disciple.gif) no-repeat; height:20px; padding-left:26px; }
.witchelf {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wh-witchelf.gif) no-repeat; height:20px; padding-left:26px; }
.check {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/check.gif) 2px 2px no-repeat; height:20px; padding-left:20px; }
.nocheck {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/nocheck.gif) 2px 2px no-repeat; height:20px; padding-left:20px; }
.closed {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/closed.gif) 2px 2px no-repeat; height:20px; padding-left:20px;}
</style>
<center>
<table class=recruitbx>
<tbody><tr><td colspan=2 class="classhd">Greenskins
</td></tr><tr><td class="blackorc">Black Orc</td><td class="check">
</td></tr><tr><td class="shaman">Shaman</td><td class="check">
</td></tr><tr><td class="squigherder">Squig Herder</td><td class="check">

</td></tr><tr><td colspan=2 class="classhd">Human/Chaos
</td></tr><tr><td class="chosen">Chosen</td><td class="check">
</td></tr><tr><td class="marauder">Marauder</td><td class="check">
</td></tr><tr><td class="zealot">Zealot</td><td class="check">
</td></tr><tr><td class="magus">Magus</td><td class="check">

</td></tr><tr><td colspan=2 class="classhd">Dark Elves
</td></tr><tr><td class="sorceress">Sorceress</td><td class="closed">
</td></tr><tr><td class="disciple">Disciple</td><td class="check">
</td></tr><tr><td class="witchelf">Witch Elf</td><td class="check">
</td></tr>
</tbody></table>
</center>
Customizing the code
  • To change the style of the box (background or border), edit the CSS that is in red.
  • To change the color of the class archetype (Class header), edit the CSS in green.
  • To change the color of the class name in the table, edit the CSS and change the color from #ffffff for that class to your desired color (in orange).
  • To change the class availability from open to closed, just edit the content box text that is blue.
Other stuff
  • The icons above are 20x20 pixels, they are pretty darn small, so I also uploaded a set that is 40x40. Right click on the image below and pick "save as". LOL but these may make the recruitment box too big *shrug*
  • If you want to use these icons instead of the 20x20, change all the CSS above as follows:

    height:40px; padding-left:46px;

  • I also found class archtype icons from somewhere, I've included those in the first column of the icons below. They are much larger than they appear.

TopBottom

AKASlaphappy (New Admin) 8/17/2008 4:51 AM EST : RE: Recruiting Box

AKASlaphappy
Posts: 27
Becoming Adept!

Wow thanks a lot, you did that fast!
TopBottom

Aikau (Guild Admin) 8/17/2008 8:01 PM EST : RE: Recruiting Box
Aikau
Posts: 1678
Zomgawsh Poster

We are using it now, too.    Thanks, Mottie.


TopBottom

Manenu (New Admin) 8/20/2008 6:43 AM EST : RE: Recruiting Box

Manenu
Posts: 2795
Zomgawsh Poster

Hi Mottie any chance of one of these for Everquest?

Pretty please with a cherry on top
TopBottom

Mottie (MVP) 8/24/2008 5:17 PM EST : EQ1 Recruiting Box
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Age of Conan | D&D Online | Everquest | Everquest 2 | LotRO |Warhammer | WoW round | WoW square

Everquest (EQ)



Order Content Box "Free Form Text/HTML"
<style type="text/css">
.recruitbx { background: #111111; border: 0px; }
.classhd { color:#ffcc00; font-weight:bold; text-align:center; font-size:14px; }
.check { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/check.gif) 2px 2px no-repeat; height:20px; padding-left:20px; }
.nocheck { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/nocheck.gif) 2px 2px no-repeat; height:20px; padding-left:20px; }
.closed { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/closed.gif) 2px 2px no-repeat; height:20px; padding-left:20px;}

.berserker { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqberserker.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.monk { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqmonk.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.rogue { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqrogue.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.warrior { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqwarrior.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.cleric { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqcleric.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.druid { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqdruid.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.shaman { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqshaman.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.enchanter { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqenchanter.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.magician { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqmagician.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.necromancer { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqnecromancer.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.wizard { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqwizard.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.bard { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqbard.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.beastlord { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqbeastlord.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.paladin { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqpaladin.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.ranger { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqranger.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
.shadowknight { color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eqshadowknight.gif) no-repeat; height:20px; padding-left:26px; font-size:12px; }
</style>
<center>
<table class=recruitbx>
<tbody><tr><td colspan=2 class="classhd">Fighter
</td></tr><tr><td class="berserker">Berserker</td><td class="closed">
</td></tr><tr><td class="monk">Monk</td><td class="check">
</td></tr><tr><td class="rogue">Rogue</td><td class="check">
</td></tr><tr><td class="warrior">Warrior</td><td class="check">

</td></tr><tr><td colspan=2 class="classhd">Priest
</td></tr><tr><td class="cleric">Cleric</td><td class="check">
</td></tr><tr><td class="druid">Druid</td><td class="check">
</td></tr><tr><td class="shaman">Shaman</td><td class="check">

</td></tr><tr><td colspan=2 class="classhd">Mage
</td></tr><tr><td class="enchanter">Enchanter</td><td class="check">
</td></tr><tr><td class="magician">Magician</td><td class="check">
</td></tr><tr><td class="necromancer">Necromancer</td><td class="check">
</td></tr><tr><td class="wizard">Wizard</td><td class="check">

</td></tr><tr><td colspan=2 class="classhd">Hybrid
</td></tr><tr><td class="bard">Bard</td><td class="check">
</td></tr><tr><td class="beastlord">Beast Lord</td><td class="check">
</td></tr><tr><td class="paladin">Paladin</td><td class="check">
</td></tr><tr><td class="ranger">Ranger</td><td class="check">
</td></tr><tr><td class="shadowknight">Shadow Knight</td><td class="check">
</td></tr>
</tbody></table>
</center>
Customizing the code
  • To change the style of the box (background or border), edit the CSS that is in red.
  • To change the color of the class archetype (Class header), edit the CSS in green.
  • To change the color of the class name in the table, edit the CSS and change the color from #ffffff for that class to your desired color (in orange).
  • To change the class availability from open to closed, just edit the content box text that is blue.
TopBottom

Mottie (MVP) 8/24/2008 5:22 PM EST : EQ2 Recruiting Box
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Age of Conan | D&D Online | Everquest | Everquest 2 | LotRO |Warhammer | WoW round | WoW square

Everquest 2 (EQ2)

GoodEvilBoth

EQ2 - Good "Free Form Text/HTML"
<style type="text/css">
.recruitbx {background: #111111; border:0px; font-size:14px;}
.classhd {color:#ffcc00; font-weight:bold; text-align:center;}
.check {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/check.gif) 2px 2px no-repeat; height:20px; padding-left:20px; }
.nocheck {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/nocheck.gif) 2px 2px no-repeat; height:20px; padding-left:20px; }
.closed {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/closed.gif) 2px 2px no-repeat; height:20px; padding-left:20px;}

.berserker {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2berserker.jpg) no-repeat; height:20px; padding-left:26px; }
.guardian {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2guardian.jpg) no-repeat; height:20px; padding-left:26px; }
.paladin {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2paladin.jpg) no-repeat; height:20px; padding-left:26px; }
.monk {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2monk.jpg) no-repeat; height:20px; padding-left:26px; }
.troubador {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2troubador.jpg) no-repeat; height:20px; padding-left:26px; }
.dirge {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2dirge.jpg) no-repeat; height:20px; padding-left:26px; }
.ranger {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2ranger.jpg) no-repeat; height:20px; padding-left:26px; }
.swashbuckler {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2swashbuckler.jpg) no-repeat; height:20px; padding-left:26px; }
.fury {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2fury.jpg) no-repeat; height:20px; padding-left:26px; }
.warden {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2warden.jpg) no-repeat; height:20px; padding-left:26px; }
.templar {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2templar.jpg) no-repeat; height:20px; padding-left:26px; }
.mystic {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2mystic.jpg) no-repeat; height:20px; padding-left:26px; }
.wizard {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2wizard.jpg) no-repeat; height:20px; padding-left:26px; }
.warlock {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2warlock.jpg) no-repeat; height:20px; padding-left:26px; }
.conjuror {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2conjuror.jpg) no-repeat; height:20px; padding-left:26px; }
.illusionist {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2illusionist.jpg) no-repeat; height:20px; padding-left:26px; }
</style>
<center>Good
<table class=recruitbx>
<tbody><tr><td colspan=2 class="classhd">Fighter
</td></tr><tr><td class="berserker">Berserker</td><td class="check">
</td></tr><tr><td class="guardian">Guardian</td><td class="check">
</td></tr><tr><td class="paladin">Paladin</td><td class="check">
</td></tr><tr><td class="monk">Monk</td><td class="check">

</td></tr><tr><td colspan=2 class="classhd">Mage
</td></tr><tr><td class="wizard">Wizard</td><td class="check">
</td></tr><tr><td class="warlock">Warlock</td><td class="check">
</td></tr><tr><td class="conjuror">Conjuror</td><td class="check">
</td></tr><tr><td class="illusionist">Illusionist</td><td class="check">

</td></tr><tr><td colspan=2 class="classhd">Priest
</td></tr><tr><td class="fury">Fury</td><td class="check">
</td></tr><tr><td class="warden">Warden</td><td class="check">
</td></tr><tr><td class="templar">Templar</td><td class="check">
</td></tr><tr><td class="mystic">Mystic</td><td class="check">

</td></tr><tr><td colspan=2 class="classhd">Scout
</td></tr><tr><td class="troubador">Troubador</td><td class="check">
</td></tr><tr><td class="dirge">Dirge</td><td class="check">
</td></tr><tr><td class="ranger">Ranger</td><td class="check">
</td></tr><tr><td class="swashbuckler">Swashbuckler</td><td class="check">
</td></tr>
</tbody></table>
</center>

EQ2 - Evil "Free Form Text/HTML"
<style type="text/css">
.recruitbx {background: #111111; border:0px; font-size:14px;}
.classhd {color:#ffcc00; font-weight:bold; text-align:center;}
.check {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/check.gif) 2px 2px no-repeat; height:20px; padding-left:20px; }
.nocheck {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/nocheck.gif) 2px 2px no-repeat; height:20px; padding-left:20px; }
.closed {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/closed.gif) 2px 2px no-repeat; height:20px; padding-left:20px;}

.berserker {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2berserker.jpg) no-repeat; height:20px; padding-left:26px; }
.guardian {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2guardian.jpg) no-repeat; height:20px; padding-left:26px; }
.shadowknight {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2shadowknight.jpg) no-repeat; height:20px; padding-left:26px; }
.bruiser {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2bruiser.jpg) no-repeat; height:20px; padding-left:26px; }
.troubador {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2troubador.jpg) no-repeat; height:20px; padding-left:26px; }
.dirge {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2dirge.jpg) no-repeat; height:20px; padding-left:26px; }
.assassin {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2assassin.jpg) no-repeat; height:20px; padding-left:26px; }
.brigand {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2brigand.jpg) no-repeat; height:20px; padding-left:26px; }
.fury {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2fury.jpg) no-repeat; height:20px; padding-left:26px; }
.warden {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2warden.jpg) no-repeat; height:20px; padding-left:26px; }
.inquisitor {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2inquisitor.jpg) no-repeat; height:20px; padding-left:26px; }
.defiler {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2defiler.jpg) no-repeat; height:20px; padding-left:26px; }
.wizard {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2wizard.jpg) no-repeat; height:20px; padding-left:26px; }
.warlock {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2warlock.jpg) no-repeat; height:20px; padding-left:26px; }
.necromancer {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2necromancer.jpg) no-repeat; height:20px; padding-left:26px; }
.coercer {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2coercer.jpg) no-repeat; height:20px; padding-left:26px; }
</style>
<center>
<table class=recruitbx>
<tbody><tr><td colspan=2 class="classhd">Fighter
</td></tr><tr><td class="berserker">Berserker</td><td class="check">
</td></tr><tr><td class="guardian">Guardian</td><td class="check">
</td></tr><tr><td class="shadowknight">Shadowknight</td><td class="check">
</td></tr><tr><td class="bruiser">Bruiser</td><td class="check">

</td></tr><tr><td colspan=2 class="classhd">Mage
</td></tr><tr><td class="wizard">Wizard</td><td class="check">
</td></tr><tr><td class="warlock">Warlock</td><td class="check">
</td></tr><tr><td class="necromancer">Necromancer</td><td class="check">
</td></tr><tr><td class="coercer">Coercer</td><td class="check">

</td></tr><tr><td colspan=2 class="classhd">Priest
</td></tr><tr><td class="fury">Fury</td><td class="check">
</td></tr><tr><td class="warden">Warden</td><td class="check">
</td></tr><tr><td class="inquisitor">Inquisitor</td><td class="check">
</td></tr><tr><td class="defiler">Defiler</td><td class="check">

</td></tr><tr><td colspan=2 class="classhd">Scout
</td></tr><tr><td class="troubador">Troubador</td><td class="check">
</td></tr><tr><td class="dirge">Dirge</td><td class="check">
</td></tr><tr><td class="assassin">Assassin</td><td class="check">
</td></tr><tr><td class="brigand">Brigand</td><td class="check">
</td></tr>
</tbody></table>
</center>
EQ2 - Both
<style type="text/css">
.recruitbx {background: #111111; border:0px; font-size:14px;}
.classhd {color:#ffcc00; font-weight:bold; text-align:center;}
.check{background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/check.gif)2px 2px no-repeat; height:20px; padding-left:20px; }
.nocheck{background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/nocheck.gif)2px 2px no-repeat; height:20px; padding-left:20px; }
.closed{background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/closed.gif)2px 2px no-repeat; height:20px; padding-left:20px;}

.assassin {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2assassin.jpg)no-repeat; height:20px; padding-left:26px; }
.berserker {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2berserker.jpg)no-repeat; height:20px; padding-left:26px; }
.brigand {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2brigand.jpg)no-repeat; height:20px; padding-left:26px; }
.bruiser {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2bruiser.jpg)no-repeat; height:20px; padding-left:26px; }
.coercer {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2coercer.jpg)no-repeat; height:20px; padding-left:26px; }
.conjuror {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2conjuror.jpg)no-repeat; height:20px; padding-left:26px; }
.defiler {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2defiler.jpg)no-repeat; height:20px; padding-left:26px; }
.dirge {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2dirge.jpg)no-repeat; height:20px; padding-left:26px; }
.fury {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2fury.jpg)no-repeat; height:20px; padding-left:26px; }
.guardian {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2guardian.jpg)no-repeat; height:20px; padding-left:26px; }
.illusionist {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2illusionist.jpg)no-repeat; height:20px; padding-left:26px; }
.inquisitor {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2inquisitor.jpg)no-repeat; height:20px; padding-left:26px; }
.monk {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2monk.jpg)no-repeat; height:20px; padding-left:26px; }
.mystic {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2mystic.jpg)no-repeat; height:20px; padding-left:26px; }
.necromancer {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2necromancer.jpg)no-repeat; height:20px; padding-left:26px; }
.paladin {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2paladin.jpg)no-repeat; height:20px; padding-left:26px; }
.ranger {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2ranger.jpg)no-repeat; height:20px; padding-left:26px; }
.shadowknight {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2shadowknight.jpg)no-repeat; height:20px; padding-left:26px; }
.swashbuckler {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2swashbuckler.jpg)no-repeat; height:20px; padding-left:26px; }
.templar {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2templar.jpg)no-repeat; height:20px; padding-left:26px; }
.troubador {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2troubador.jpg)no-repeat; height:20px; padding-left:26px; }
.warden {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2warden.jpg)no-repeat; height:20px; padding-left:26px; }
.warlock {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2warlock.jpg)no-repeat; height:20px; padding-left:26px; }
.wizard {color: #ffffff;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2wizard.jpg)no-repeat; height:20px; padding-left:26px; }
</style>
<center>
<table class=recruitbx>
<tbody><tr><td colspan=2 class="classhd">Fighter
</td></tr><tr><td class="berserker">Berserker</td><td class="check">
</td></tr><tr><td class="bruiser">Bruiser</td><td class="check">
</td></tr><tr><td class="guardian">Guardian</td><td class="check">
</td></tr><tr><td class="monk">Monk</td><td class="check">
</td></tr><tr><td class="paladin">Paladin</td><td class="check">
</td></tr><tr><td class="shadowknight">Shadowknight</td><td class="check">

</td></tr><tr><td colspan=2 class="classhd">Mage
</td></tr><tr><td class="coercer">Coercer</td><td class="check">
</td></tr><tr><td class="conjuror">Conjuror</td><td class="check">
</td></tr><tr><td class="illusionist">Illusionist</td><td class="check">
</td></tr><tr><td class="necromancer">Necromancer</td><td class="check">
</td></tr><tr><td class="wizard">Wizard</td><td class="check">
</td></tr><tr><td class="warlock">Warlock</td><td class="check">

</td></tr><tr><td colspan=2 class="classhd">Priest
</td></tr><tr><td class="defiler">Defiler</td><td class="check">
</td></tr><tr><td class="fury">Fury</td><td class="check">
</td></tr><tr><td class="inquisitor">Inquisitor</td><td class="check">
</td></tr><tr><td class="mystic">Mystic</td><td class="check">
</td></tr><tr><td class="templar">Templar</td><td class="check">
</td></tr><tr><td class="warden">Warden</td><td class="check">

</td></tr><tr><td colspan=2 class="classhd">Scout
</td></tr><tr><td class="assassin">Assassin</td><td class="check">
</td></tr><tr><td class="brigand">Brigand</td><td class="check">
</td></tr><tr><td class="dirge">Dirge</td><td class="check">
</td></tr><tr><td class="ranger">Ranger</td><td class="check">
</td></tr><tr><td class="swashbuckler">Swashbuckler</td><td class="check">
</td></tr><tr><td class="troubador">Troubador</td><td class="check">
</td></tr>
</tbody></table>
</center>
Customizing the code
  • To change the style of the box (background or border), edit the CSS that is in red.
  • To change the color of the class archetype (Class header), edit the CSS in green.
  • To change the color of the class name in the table, edit the CSS and change the color from #ffffff for that class to your desired color (in orange).
  • To change the class availability from open to closed, just edit the content box text that is blue.
  • I don't know if EQ2 splits their classes into good and evil, but I can combine these if posts if I did this correctly or not... thanks! Now combined.
Edit (9/18/08): Wow, I totally forgot to add the complete URL to the images.
Edit (2/21/09): Added a combined version
TopBottom

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