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?
Omegadome (New Admin) 8/26/2008 12:08 PM EST : RE: EQ2 Recruiting Box
Omegadome
Posts: 322
Fingers of Fury!

Wonderful.  Using a version of this now for Warhammer and going to continue to make edits.   Job well done and thanks.
TopBottom

AKASlaphappy (New Admin) 9/26/2008 9:25 AM EST : RE: EQ2 Recruiting Box

AKASlaphappy
Posts: 27
Becoming Adept!

Never mind figured it out.
TopBottom

Bae Bae (New Admin) 10/3/2008 2:53 PM EST : RE: EQ2 Recruiting Box
Bae Bae
Posts: 9
Getting Started!

Im using this, but everytime i go to edit it to change what we are recruiting, it gets ride of the first part and i have to re-copy.  what am i doing wrong?  



<style type="text/css">
.druid {color: #ff7d0a; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png) left top no-repeat; height:23px; padding-left:25px; }
.hunter {color: #abd473; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png) left -22px no-repeat; height:23px; padding-left:25px; }
.mage {color: #69ccf0; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png) left -44px no-repeat; height:23px; padding-left:25px; }
.paladin {color: #f58cba; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png) left -66px no-repeat; height:23px; padding-left:25px; }
.priest {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png) left -89px no-repeat; height:23px; padding-left:25px; }
.rogue {color: #fff569; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png) left -112px no-repeat; height:23px; padding-left:25px; }
.shaman {color: #2459ff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png) left -134px no-repeat; height:23px; padding-left:25px; }
.warlock {color: #9482ca; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png) left -156px no-repeat; height:23px; padding-left:25px; }
.warrior {color: #c79c6e; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png) left -178px no-repeat; height:23px; padding-left:25px; }
.deathknight {color: #c41e3b; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png) left -202px no-repeat; height:23px; padding-left:25px; }
.up {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png) left -224px no-repeat; height:23px; padding-left:25px;}
.down  {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png) left -249px no-repeat; height:23px; padding-left:25px;}
</style>



<center>
<table border="0"><tbody>
<tr><td class="deathknight">Death Knight</td><td class="down">
</td></tr><tr><td class="druid">Druids</td><td class="up">
</td></tr><tr><td class="hunter">Hunters</td><td class="up">
</td></tr><tr><td class="mage">Mages</td><td class="up">
</td></tr><tr><td class="paladin">Paladins</td><td class="up">
</td></tr><tr><td class="priest">Priests</td><td class="up">
</td></tr><tr><td class="rogue">Rogues</td><td class="up">
</td></tr><tr><td class="shaman">Shamans</td><td class="up">
</td></tr><tr><td class="warlock">Warlocks</td><td class="up">
</td></tr><tr><td class="warrior">Warriors</td><td class="up">
</td></tr>
</tbody></table>
</center>
TopBottom

Mottie (MVP) 10/3/2008 3:40 PM EST : RE: EQ2 Recruiting Box
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

It nothing you're doing wrong... it's the GuildPortal editor!

If you are using a Custom StyleSheet on your site, then the easiest solution is to copy all the CSS between the "<style type="text/css">" and "</style>" and paste it there.
Control Panel > Style & Colors > Custom StyleSheet
If you aren't using a Custom Style sheet, then copy that whole first part into a "Free Form Text/HTML" box that is on the same page and it's a box that you don't plan on editing very often (if ever).... or paste it into your footer.
Control Panel > Style & Colors > Footer

TopBottom

Avandius (New Admin) 10/13/2008 12:29 PM EST : RE: EQ2 Recruiting Box
Avandius
Posts: 337
Fingers of Fury!

Hey Mottie, i added your recruiting box to my site! Changed some of the art work though, however i have a request. Can you make the tooltip show the priority: High, Low, None or some such, when you hover the mouse over the checks?

Check em out!

http://www.guildportal.com/Guild.aspx?GuildID=241533&TabID=2032485
TopBottom

539981318_Inactive (New Admin) 10/15/2008 8:51 PM EST : RE: EQ2 Recruiting Box
539981318_Inactive
Posts: 24
Becoming Adept!

Hey Mottie,

Is there any way to change the check and unchecked, up and down images? I'd really like to use http://www.worldofwarcraft.com/shared/wow-com/images/icons/serverstatus/downarrow2.gif for my down arrow, as it's all flashy and what not.
TopBottom

Mottie (MVP) 10/16/2008 2:56 AM EST : RE: EQ2 Recruiting Box
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hey Hellborn...

It's all in the CSS, just replace the URL of the image with the image you want. Here is an example:
.closed {background:url(http://www.worldofwarcraft.com/shared/wow-com/images/icons/serverstatus/downarrow2.gif)2px 2px no-repeat; height:19px; padding-left:20px;}
Here is what the colors mean:
  • Orange: URL to the image
  • Purple: Sort of like padding... moves the image right 2 pixels and down 2 pixels to "center" the image with the icon (vertically)
  • Red: The height should match the height of the image and padding-left should match the width (plus a few pixels for spacing)
I'd also recommend not using the image directly from the WoW site... most people don't like it when you steal their bandwidth... Just copy the image to your photobucket account.
TopBottom

539981318_Inactive (New Admin) 10/16/2008 5:44 AM EST : RE: EQ2 Recruiting Box
539981318_Inactive
Posts: 24
Becoming Adept!

Nope! I never use other peoples bandwidth. Always use my own photobucket account

Thanks again, I'll give it a shot.
TopBottom

Chamberlian (New Admin) 12/1/2008 7:14 AM EST : RE: EQ2 Recruiting Box

Chamberlian
Posts: 393
Fingers of Fury!

Mottie said:
Age of Conan | D&D Online | Everquest | Everquest 2 | Warhammer | WoW round | WoW square

Everquest 2 (EQ2)

GoodEvil

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/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>
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!
Edit (9/18/08): Wow, I totally forgot to add the complete URL to the images.


I condensed to two tables into one to help save space on the website.  Here is the code.  I am sure there is a way to shorten it up from what I have, I just don't know enough about this stuff to do so

<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/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>
Good
<br><table class="recruitbx">
<tbody><tr><td colspan="2" class="classhd">Fighter
</td></tr><tr><td class="berserker">Berserker</td><td class="closed">
<br></td></tr><tr><td class="guardian">Guardian</td><td class="closed">
<br></td></tr><tr><td class="paladin">Paladin</td><td class="check">
<br></td></tr><tr><td class="shadowknight">Shadowknight</td><td class="check">
<br></td></tr><tr><td class="bruiser">Bruiser</td><td class="check">
<br></td></tr><tr><td class="monk">Monk</td><td class="closed">

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

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

<br></td></tr><tr><td colspan="2" class="classhd">Scout
</td></tr><tr><td class="troubador">Troubador</td><td class="check">
<br></td></tr><tr><td class="dirge">Dirge</td><td class="check">
<br></td></tr><tr><td class="ranger">Ranger</td><td class="check">
<br></td></tr><tr><td class="assassin">Assassin</td><td class="check">
<br></td></tr><tr><td class="brigand">Brigand</td><td class="check">
<br></td></tr>
<tr><td class="swashbuckler">Swashbuckler</td><td class="check">
<br></td></tr>
</tbody></table>

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

TopBottom

Draylor (New Admin) 2/20/2009 4:56 AM EST : RE: EQ2 Recruiting Box
Draylor
Posts: 424
Fingers of Fury!

    Using the code already created (For EverQuest 2) - I just combined it into one table, rather then GOOD/EVIL (Using the Image URLs provided also) to use on our webpage. Good/Evil would only be useful for PVP Server.

    I also added the Arrow up / down images - just in case I decided to use them also (Would need to add to the KEY I created).

    Also, the background = transparent. This way I can see the image in my content boxes.

    I am but only learning some of these things - so some of it may be bulky still, or a better way to do this. Took me a while to stumble through and figure out how to get the KEY to go to the bottom, rather then to the side. You can look @ mine on our site - http://totalcarnage.guildportal.com



<style type=text/css>

.recruitbx {background: transparent; border:0px; font-size:14px;}
.classhd {color:#8A672D; 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;}
.up {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png) left -224px no-repeat; height:23px; padding-left:25px;}
.down  {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png) left -249px no-repeat; height:23px; padding-left:25px;}


.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; }
.shadowknight {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2shadowknight.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; }
.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; }
.ranger {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2ranger.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; }
.swashbuckler {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2swashbuckler.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; }
.templar {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2templar.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; }
.mystic {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2mystic.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; }
.conjuror {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2conjuror.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; }
.illusionist {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/eq2illusionist.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><br>
<table class=recruitbx>
<tbody>
<tr>
<td class=classhd colSpan=2>Fighter </td></tr>
<tr>
<td class=berserker>Berserker </td>
<td class=closed></td></tr>
<tr>
<td class=guardian>Guardian </td>
<td class=closed></td></tr>
<tr>
<td class=paladin>Paladin </td>
<td class=closed></td></tr>
<tr>
<td class=shadowknight>Shadowknight </td>
<td class=closed></td></tr>
<tr>
<td class=monk>Monk </td>
<td class=closed></td></tr>
<tr>
<td class=bruiser>Bruiser </td>
<td class=closed></td></tr>
<tr>
<td class=classhd colSpan=2>Mage </td></tr>
<tr>
<td class=wizard>Wizard </td>
<td class=closed></td></tr>
<tr>
<td class=warlock>Warlock </td>
<td class=closed></td></tr>
<tr>
<td class=conjuror>Conjuror </td>
<td class=closed></td></tr>
<tr>
<td class=necromancer>Necromancer </td>
<td class=check></td></tr>
<tr>
<td class=illusionist>Illusionist </td>
<td class=check></td></tr>
<tr>
<td class=coercer>Coercer </td>
<td class=check></td></tr>
<tr>
<td class=classhd colSpan=2>Priest </td></tr>
<tr>
<td class=fury>Fury </td>
<td class=closed></td></tr>
<tr>
<td class=warden>Warden </td>
<td class=closed></td></tr>
<tr>
<td class=templar>Templar </td>
<td class=closed></td></tr>
<tr>
<td class=inquisitor>Inquisitor </td>
<td class=check></td></tr>
<tr>
<td class=mystic>Mystic </td>
<td class=closed></td></tr>
<tr>
<td class=defiler>Defiler </td>
<td class=check></td></tr>
<tr>
<td class=classhd colSpan=2>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=closed></td></tr>
<tr>
<td class=assassin>Assassin </td>
<td class=check></td></tr>
<tr>
<td class=swashbuckler>Swashbuckler </td>
<td class=check></td></tr>
<tr>
<td class=brigand>Brigand </td>
<td class=closed></td></tr>
<tr>
<td class=""><br><font size=3><font color=#8a672d>
<center><b>Key</b></center></font><br></font></td></tr>
<tr>
<td class=check>
<center><b>Need</b> </center></td></tr>
<tr>
<td class=nocheck>
<center><b>Open </b></center></td></tr>
<tr>
<td class=closed>
<center><b>Close</b> </center></td></tr></tbody></table></center>

    

    One thing though - I wanted to add just spaces between the key - Check IMAGE (Spacing) Needed for example - but couldn't figure out how, so I just centered the whole deal. 

    ~Draylor
TopBottom

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