Just wondering if anyone could help me figure out how to make the nifty recruiting boxes that I see on some of the pages.  I want the box to display the class icons (World of Warcraft) and the level of need for that class.  Thanks for the help.

I've seen a couple, all a little different, but here's a few....
http://www.guildportal.com/Guild.aspx?GuildID=135857&TabID=1155661

http://www.guildportal.com/Guild.aspx?GuildID=51848&TabID=453954

I also saw one which i can't seem to find again where there was a horizontal set of boxes above the site navigation tabs with the classes being recruited were normal, but the classes not being recruited were darker.  I'm not too particular, any of these will do, but i dont know how to go about it.  Thanks all

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

---

World of Warcraft (round icons)



This is the round icons version of the recruitment box (pictured above), updated for the Wrath of the Lich King expansion.

With the improvements in the GuildPortal editor, it is now possible to include the CSS in the Content Box (and edit the contents without losing the CSS). To add this, just paste in the code below:

Free Form Text/HTML*:

<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="druid"><a class="tooltip" title="Closed">Druids</a></td><td class="down">
</td></tr><tr><td class="hunter"><a class="tooltip" title="Marksman only">Hunters</a></td><td class="up">
</td></tr><tr><td class="mage"><a class="tooltip" title="Frost">Mages</a></td><td class="up">
</td></tr><tr><td class="paladin"><a class="tooltip" title="Healadins">Paladins</a></td><td class="up">
</td></tr><tr><td class="priest"><a class="tooltip" title="Shadow">Priests</a></td><td class="up">
</td></tr><tr><td class="rogue"><a class="tooltip" title="Gnomes only!">Rogues</a></td><td class="up">
</td></tr><tr><td class="shaman"><a class="tooltip" title="Elemental">Shamans</a></td><td class="up">
</td></tr><tr><td class="warlock"><a class="tooltip" title="Any">Warlocks</a></td><td class="up">
</td></tr><tr><td class="warrior"><a class="tooltip" title="Tanks">Warriors</a></td><td class="up">
</td></tr>
</tbody></table>
</center>

• Note: to change this class status, change "up" and "down"
  
  
• With the new tooltip, you can easily add popups to your class needs,basically the part in green was added around the class name. Editthe part in orange to change the tooltip comments.
  
  <a class="tooltip" title="Closed">Druids</a>
  

Edit (7/14/2008): Updated this box with Death Knight Icon and color.Put the code together for easy copy and pasting straight into a freeform text/HTML content box.
Edit (5/31/2009): Added a link around the class name to make it pop-up the class needs!

LOL Actually, I used the images that they used from the first link you posted. I didn't want to steal their bandwidth so I re-hosted some of them on photobucket. Hopefully, photobucket won't care that I posted images hosted on their site, but I'd still recopy the images to somewhere else just in case.

And about those class images, those are used in the roster tab. I don't think there are any thing else there but the class images as seen on the roster

Darknraged said: