Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : WoW > Recruitment Status
Mottie (SuperAdmin) 6/9/2008 6:51 AM EST : Recruitment Status
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

How to add a World of Warcraft Recruitment Status Box to your site

GuildPortal admin site link to original post

There are two styles I put together for the recruitment box

1. Square icons

(with either a blank [] or an x [])


Add the text below to your custom stylesheet (Control Panel > Style & Colors > Custom StyleSheet)

Content Box "Free Form Text/HTML" (How to add HTML)
<style type="text/css">
.druid {color: #ff7d0a; background: url(http://www.guildportal.com/GuildImages/WOWRosterImages/druid.gif) no-repeat; height:18px; padding-left:20px; }
.hunter {color: #abd473; background: url(http://www.guildportal.com/GuildImages/WOWRosterImages/hunter.gif) no-repeat; height:18px; padding-left:20px; }
.mage {color: #69ccf0; background: url(http://www.guildportal.com/GuildImages/WOWRosterImages/mage.gif) no-repeat; height:18px; padding-left:20px; }
.paladin {color: #f58cba; background: url(http://www.guildportal.com/GuildImages/WOWRosterImages/paladin.gif) no-repeat; height:18px; padding-left:20px; }
.priest {color: #ffffff; background: url(http://www.guildportal.com/GuildImages/WOWRosterImages/priest.gif) no-repeat; height:18px; padding-left:20px; }
.rogue {color: #fff569; background: url(http://www.guildportal.com/GuildImages/WOWRosterImages/rogue.gif) no-repeat; height:18px; padding-left:20px; }
.shaman {color: #2459ff; background: url(http://www.guildportal.com/GuildImages/WOWRosterImages/shaman.gif) no-repeat; height:18px; padding-left:20px; }
.warlock {color: #9482ca; background: url(http://www.guildportal.com/GuildImages/WOWRosterImages/warlock.gif) no-repeat; height:18px; padding-left:20px; }
.deathknight {color: #c41e3b; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/dk.png) no-repeat; height:18px; padding-left:20px; }
.warrior {color: #c79c6e; background: url(http://www.guildportal.com/GuildImages/WOWRosterImages/warrior.gif) no-repeat; height:18px; padding-left:20px; }
.check {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/check.gif) no-repeat; height:18px; padding-left:20px;}
.nocheck {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/nocheck.gif) no-repeat; height:18px; padding-left:20px;}
.closed {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/closed.gif) no-repeat; height:18px; padding-left:20px;}
</style>
<center>
<table border="0">
<tbody><tr><td class="deathknight"><a class="tooltip" title="Closed">Deathknight</a></td><td class="nocheck">
</td></tr><tr><td class="druid"><a class="tooltip" title="Closed">Druids</a></td><td class="nocheck">
</td></tr><tr><td class="hunter"><a class="tooltip" title="Marksman only">Hunters</a></td><td class="check">
</td></tr><tr><td class="mage"><a class="tooltip" title="Frost">Mages</a></td><td class="check">
</td></tr><tr><td class="paladin"><a class="tooltip" title="Healadins">Paladins</a></td><td class="check">
</td></tr><tr><td class="priest"><a class="tooltip" title="Shadow">Priests</a></td><td class="check">
</td></tr><tr><td class="rogue"><a class="tooltip" title="Gnomes only!">Rogues</a></td><td class="check">
</td></tr><tr><td class="shaman"><a class="tooltip" title="Elemental">Shamans</a></td><td class="check">
</td></tr><tr><td class="warlock"><a class="tooltip" title="Any">Warlocks</a></td><td class="check">
</td></tr><tr><td class="warrior"><a class="tooltip" title="Tanks">Warriors</a></td><td class="check">
</td></tr>
</tbody></table>

</center>
  • To show the status you desire, just change the class in the table to "check" (), "nocheck" () or "closed" ().
  • With the new tooltip, you can easily add popups to your class needs, basically the part in green was added around the class name. Edit the part in orange to change the tooltip comments.

    <a class="tooltip" title="Closed">Druids</a>

Edit (7/14/2008): Added the new hero class icon and color for the Wrath of the Lich King expansion. I also combined the code to make it easier to copy and paste all of it into a free form text/HTML content box as the GuildPortal editor won't delete the CSS anymore.
Edit (5/31/2009): Added a link around the class name to make it pop-up the class needs!

[top]

2. Round Icons



Content Box "Free Form Text/HTML"
(How to add 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="deathknight"><a class="tooltip" title="Closed">Deathknight</a></td><td class="down">
</td></tr>
<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. Edit the 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 free form text/HTML content box.
Edit (5/31/2009): Added a link around the class name to make it pop-up the class needs!
Edit (7/23/2009): Added an extra space between the background url and the "left"... no idea why it disappears in the post (but there when I edit)
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

DarkProphecyAdmin (Applicant) 5/26/2009 3:05 PM EST : RE: Recruitment Status

DarkProphecyAdmin
Posts: 6

0
Like

0
Dislike

Would you Improve this code adding the onhover property so you can see a detail.... It can be a text... or a comment saying what we need.

or the spec that would be great to have.

Thank you
TopBottom

Mottie (SuperAdmin) 6/1/2009 4:55 PM EST : RE: Recruitment Status
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi DarkProphecyAdmin!

With the new tooltip script that GP has implemented, you can easily add your own tooltips to the recruitment box. I've made the changes to the WoW recruitment round and square icons at the beginning of this thread. I would have updated all the other games as well, but I am not familiar with different specializations of those classes.

The basic addition you need to make is to surround the class name like "Druids" with a link like this:
<a class="tooltip" title="Closed">Druids</a>
so a here is a before and after of just one row for comparison:

BEFORE:
</td></tr><tr><td class="druid">Druids</td><td class="nocheck">
AFTER:
</td></tr><tr><td class="druid"><a class="tooltip" title="Closed">Druids</a></td><td class="nocheck">
You can add anything inside the title attribute, including HTML. But you need to use single quotes (') in place of all quotes or an HTML escape code (&quot;) if you must have quotes. Examples of the HTML working and the code.
Tooltip Test

<a title="Here is how you add &quot;quotes&quot; around text, but if you use HTML, use a single quote instead <img src='http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/tooltip.gif'>, cool huh?" class="tooltip">Tooltip Test</a>
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

nlmartin83 (Applicant) 7/10/2009 9:37 PM EST : RE: Recruitment Status

nlmartin83
Posts: 6

0
Like

0
Dislike

I can't get the icons or checkboxes to show up on my site. Any help is appreciated. Link is here http://www.guildportal.com/Guild.aspx?PageName=Home&GuildID=321037&TabID=2691466 I'm new at this so I'm sorry if it is something obvious.

*Update

All the icons but the DK icon are showing. I checked the URLs to make sure that they worked and everything looks fine. I tried changing the sizing but it's still not showing up.
TopBottom

Zanatos2003 (Member) 7/23/2009 10:05 PM EST : RE: Recruitment Status

Zanatos2003
Posts: 3

0
Like

0
Dislike

I'm having the same issue here as well. No Icons... no check boxes... I used to be so good with GP too... then the admin panel got all "User friendly" on us... /sadpanda

Site link

Bound for Hell Recruitment

TopBottom

Mottie (SuperAdmin) 7/24/2009 12:58 AM EST : RE: Recruitment Status
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Ok I figured it out - it was an IE problem, but not really...

For some reason with the new editor (or something) the post spacing changed. So when you copied the CSS from the top post (here is an example):
 .druid {color: #ff7d0a;background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/classes2.png) lefttop no-repeat; height:23px; padding-left:25px; }
The space between "background: url()" and the "left" disappeared (added back in orange above)!... It's there when I edit the post, but not there when I view it. I went back and edited this original post and added two spaces so now it looks right.

But that's basically the problem... firefox knows  how to translate that CSS without the space after the parenthesis but IE doesn't, so it completely ignores the background part of the CSS.

Add the space and it should start working again


Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

LoneXPaw (Applicant) 6/23/2011 3:10 PM EST : RE: Recruitment Status

LoneXPaw
Posts: 2

0
Like

0
Dislike

Hey Mottie,
    First off thanks for putting this site together. I am learning not only alot about GP, but HTML in general. I am having an issue with the icons in the recruiting box though. Its almost like there tiling or something. Heres a Link: http://fallenxangels.abyssportal.com/Guild.aspx?GuildID=418861&TabID=3560633&ClearCache=YES&PageEditOn=1. Help!

Thx,
    LoneXPaw
TopBottom

Mottie (SuperAdmin) 6/23/2011 4:27 PM EST : RE: Recruitment Status
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi LoneXPaw!

Yeah I see, the problem is because of the large font size. The icons I put together are in what's called an image sprite - basically all the images are crammed together into one image and then use the css to only show portions of that one image. So I think the easiest solution would be to change the font size, but I'm guessing that you want it large, so the second best would be to change the table's line height. Replace the table (first line) like this at the top:
<table border="0">
with this:
<table border="0" style="line-height:0.9em;">
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

LoneXPaw (Applicant) 6/23/2011 4:56 PM EST : RE: Recruitment Status

LoneXPaw
Posts: 2

0
Like

0
Dislike

Your Amazing Mottie
TopBottom

Lakshmii (Applicant) 9/1/2011 9:24 AM EST : RE: Recruitment Status
Lakshmii
Posts: 5066

0
Like

0
Dislike

Hi

Since GP changed their file saving thing, my recruitment bar doesnt display anymore - well, since I updated it after GP changed the file thing (using a saved guildbar.js file).

I was just using a simple class icons bar that fitted nicely in the the bottom of the site's banner, hovering over it displayed the name of the class and whether we were recruiting in that class.

web add is

http://soulcrusaders.guildportal.com

I have sent tickets about this but nothing seems to be getting done. I am hoping it just requires a simple tweak in the coding, but i wouldnt know where to start

Thanks in advance
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%