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

0
Like

0
Dislike

Lord of the Rings Online

I put together three versions: square, round and original icon size.

Square (20x20)
Round (20x20)
Large (48x48) 

Small Square 
<style type="text/css">
.recruitbx {background: #111111; border:0px; font-size:14px;}
.check {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/check.gif) center center no-repeat; height:20px; padding-left:20px; }
.nocheck {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/nocheck.gif) center center no-repeat; height:20px; padding-left:20px; }
.closed {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/closed.gif) center center no-repeat; height:20px; padding-left:20px;}

.burglar {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/burglar-sq.png) no-repeat; height:20px; padding-left:26px; }
.captain {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/captain-sq.png) no-repeat; height:20px; padding-left:26px; }
.champion {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/champion-sq.png) no-repeat; height:20px; padding-left:26px; }
.guardian {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/guardian-sq.png) no-repeat; height:20px; padding-left:26px; }
.hunter {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/hunter-sq.png) no-repeat; height:20px; padding-left:26px; }
.loremaster {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lore-master-sq.png) no-repeat; height:20px; padding-left:26px; }
.minstrel {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/minstrel-sq.png) no-repeat; height:20px; padding-left:26px; }
.runekeeper {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/rune-keeper-sq.png) no-repeat; height:20px; padding-left:26px; }
.warden {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/warden-sq.png) no-repeat; height:20px; padding-left:26px; }
</style>
<center>
<table class=recruitbx>
<tbody><tr><td class="burglar">Burglar</td><td class="check">
</td></tr><tr><td class="captain">Captain</td><td class="check">
</td></tr><tr><td class="champion">Champion</td><td class="check">
</td></tr><tr><td class="guardian">Guardian</td><td class="check">
</td></tr><tr><td class="hunter">Hunter</td><td class="check">
</td></tr><tr><td class="loremaster">Lore-master</td><td class="check">
</td></tr><tr><td class="minstrel">Minstrel</td><td class="check">
</td></tr><tr><td class="runekeeper">Rune-keeper</td><td class="check">
</td></tr><tr><td class="warden">Warden</td><td class="check">
</td></tr>
</tbody></table>
</center>
Small Round
<style type="text/css">
.recruitbx {background: #111111; border:0px; font-size:14px;}
.check {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/check.gif) center center no-repeat; height:20px; padding-left:20px; }
.nocheck {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/nocheck.gif) center center no-repeat; height:20px; padding-left:20px; }
.closed {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/closed.gif) center center no-repeat; height:20px; padding-left:20px;}
.up {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/up-round.png) center center no-repeat; height:20px; padding-left:20px;}
.down  {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/down-round.png) center center no-repeat; height:20px; padding-left:20px;}

.burglar {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/burglar-round.png) no-repeat; height:20px; padding-left:26px; }
.captain {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/captain-round.png) no-repeat; height:20px; padding-left:26px; }
.champion {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/champion-round.png) no-repeat; height:20px; padding-left:26px; }
.guardian {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/guardian-round.png) no-repeat; height:20px; padding-left:26px; }
.hunter {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/hunter-round.png) no-repeat; height:20px; padding-left:26px; }
.loremaster {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lore-master-round.png) no-repeat; height:20px; padding-left:26px; }
.minstrel {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/minstrel-round.png) no-repeat; height:20px; padding-left:26px; }
.runekeeper {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/rune-keeper-round.png) no-repeat; height:20px; padding-left:26px; }
.warden {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/warden-round.png) no-repeat; height:20px; padding-left:26px; }
</style>
<center>
<table class=recruitbx>
<tbody><tr><td class="burglar">Burglar</td><td class="up">
</td></tr><tr><td class="captain">Captain</td><td class="up">
</td></tr><tr><td class="champion">Champion</td><td class="up">
</td></tr><tr><td class="guardian">Guardian</td><td class="up">
</td></tr><tr><td class="hunter">Hunter</td><td class="up">
</td></tr><tr><td class="loremaster">Lore-master</td><td class="up">
</td></tr><tr><td class="minstrel">Minstrel</td><td class="up">
</td></tr><tr><td class="runekeeper">Rune-keeper</td><td class="up">
</td></tr><tr><td class="warden">Warden</td><td class="down">
</td></tr>
</tbody></table>
</center>
Large
<style type="text/css">
.recruitbx {background: #111111; border:0px; font-size:18px;}
.check {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/check.gif) center center no-repeat; height:20px; padding-left:20px; }
.nocheck {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/nocheck.gif) center center no-repeat; height:20px; padding-left:20px; }
.closed {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/closed.gif) center center no-repeat; height:20px; padding-left:20px;}
.up {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/up-big.png) center center no-repeat; height:48px; padding-left:50px;}
.down  {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/down-big.png) center center no-repeat; height:48px; padding-left:50px;}

.burglar {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/burglar_icon64.png) no-repeat; height:48px; padding-left:50px; }
.captain {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/captain_icon64.png) no-repeat; height:48px; padding-left:50px; }
.champion {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/champion_icon64.png) no-repeat; height:48px; padding-left:50px; }
.guardian {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/guardian_icon64.png) no-repeat; height:48px; padding-left:50px; }
.hunter {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/hunter_icon64.png) no-repeat; height:48px; padding-left:50px; }
.loremaster {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/lore_master_icon64.png) no-repeat; height:48px; padding-left:50px; }
.minstrel {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/minstrel_icon64.png) no-repeat; height:48px; padding-left:50px; }
.runekeeper {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/runekeeper_icon64.png) no-repeat; height:48px; padding-left:50px; }
.warden {color: #ffffff; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/warden_icon64.png) no-repeat; height:48px; padding-left:50px; }
</style>
<center>
<table class=recruitbx>
<tbody><tr><td class="burglar">Burglar</td><td class="up">
</td></tr><tr><td class="captain">Captain</td><td class="up">
</td></tr><tr><td class="champion">Champion</td><td class="up">
</td></tr><tr><td class="guardian">Guardian</td><td class="up">
</td></tr><tr><td class="hunter">Hunter</td><td class="up">
</td></tr><tr><td class="loremaster">Lore-master</td><td class="up">
</td></tr><tr><td class="minstrel">Minstrel</td><td class="up">
</td></tr><tr><td class="runekeeper">Rune-keeper</td><td class="up">
</td></tr><tr><td class="warden">Warden</td><td class="down">
</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 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 or up to down, just edit the content box text that is blue.
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%