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! > recruitment box help
deshund (New Admin) 3/7/2009 6:22 AM EST : recruitment box help
deshund
Posts: 105
Posts With Wolves

i been trying to figure out how to use the recruiting box and add the features of the recruiting bar.
I like the box layout, but i am trying to add the mouse over class needs and clickable link to my guilds application.  im not sure how to do that, any ideas?

oops, heres my link

enemy2horde.guildportal.com
TopBottom

Apollya_AD (New Admin) 3/7/2009 4:30 PM EST : RE: recruitment box help
Apollya_AD
Posts: 1002
Zomgawsh Poster

http://admins.guildportal.com/Guild.aspx?GuildID=3780&ForumID=22042&TabID=27537&Replies=0&TopicID=7980970

Post by Mottie on how to do it as a Recruitment box. 2 diff styles.

But I get the impression you might be trying to combine the 2 different Boxes?

Not sure, If you could then get the check boxes at the sides too, but also not sure if that was something you were after.

The only other comment I'd have for you is your progression box.

I love that you added Vanilla, TBC and WoTLK parts, it's real nice. But for WoTLK Personally I'd keept to the 10Man and 25Man version and just have one icon for each raid and not split into two lists, it'd look better I think.

Any hints for the rest of us if we wanted to add the different Expansions into our Progression bar?

Oh and the ventrilo box is nice to, again got a link to a howto?
TopBottom

deshund (New Admin) 3/8/2009 7:16 AM EST : RE: recruitment box help
deshund
Posts: 105
Posts With Wolves

Thanks for the noticing my page

i am trying to combine the wow recruiting features.  i want to intigrate the recruiting bar and use its mouse over features on the box style.  keeping te check marks isnt something i need, but having it in the vertical postition is.   im so newb that i dont even know how to manipulate the coding to do that

For the vent box i just added a "voice chat server box" provided by GP and if you use vent its one of the recognized ones. very simple:)

I used motties progress box http://www.guildportal.com/Guild.aspx?GuildID=258012&TabID=2168224&ForumID=1233963&TopicID=7047904&Page=1#38236482

 

 

 



 

TopBottom

Apollya_AD (New Admin) 3/10/2009 4:11 AM EST : RE: recruitment box help
Apollya_AD
Posts: 1002
Zomgawsh Poster

deshund said:

Thanks for the noticing my page

i am trying to combine the wow recruiting features.  i want to intigrate the recruiting bar and use its mouse over features on the box style.  keeping te check marks isnt something i need, but having it in the vertical postition is.   im so newb that i dont even know how to manipulate the coding to do that

For the vent box i just added a "voice chat server box" provided by GP and if you use vent its one of the recognized ones. very simple:)

I used motties progress box http://www.guildportal.com/Guild.aspx?GuildID=258012&TabID=2168224&ForumID=1233963&TopicID=7047904&Page=1#38236482 



Thanks My ventrilo server now show happily I also used the standard box but just got the html from the ventrilo hosts' site they have a generator that even allows me to change colours etc to match the site theme *cheer*

I tried having a look at your issue on the recruitment box yesterday to see if i could easily see a way to combine the two recruitment boxes, but since the two are very different formats and me being a code-n00b and not code-monkey I couldn't work anything out. What you want is:

 Class Icon Class name Check Box


Death Knight
Druid
Hunter
Mage
Paladin
Priest
Rogue
Shaman
Warlock
Warrior

But with hover-over-tooltip like on the recrutiing bar to show specifics of Class Spec you're recruiting.

Personally I would try to see if it's possible to have the hover over displayed as a bar over the entire table row, else they need to specifically hover the icon and many new people to your site might not work it out. Obviously you want the Classes displayed in the correct colours too. (I wasn't able to change colours for this text don't know why).

lastly. So you know, it helps the CSS admin team (ie Mottie & freinds) if you be specific in what exactly it is you're after else it is very hard for them or anyone else to be able to help you.

TopBottom

deshund (New Admin) 3/10/2009 6:38 AM EST : RE: recruitment box help
deshund
Posts: 105
Posts With Wolves

Sorry about the vague descriptions of what im trying to do....im not to keen on the working and all, but the example you gave is exactly what im looking for.  i dont need the up/down arrows since the hover over will show what classes im looking for. 

i really just wanted to be able to add the class name next to the icon listed. 

Death Knight
Druid
Hunter
Mage
Paladin
Priest
Rogue
Shaman
Warlock
Warrior


I guess my question is: If i wanted to add a class name to the CSS for the recruitment bar where or how would i do that?

heres what im using in the HTML box
<style type="text/css">
#recruitBar { width:300px; text-align:center; vertical-align:bottom; font-family:sans-serif; font-size:70%; white-space:nowrap; }
#recruitBar a, #recruitBar img { color:#999999; text-decoration:none; border:0px; width:20px; height:20px; padding:0px 1px 0px 0px; }
.recruitToolTip { color: orange; font-weight: bold; vertical-align:top; }
.dim { opacity: .3; filter: alpha(opacity=30); }

#dhtmltooltip { position: absolute; width: 150px; border: #888888 1px solid; padding: 3px; background: #222222; color: #dddddd; visibility: hidden; z-index: 100; }
</style>
<div id="recruitBar"></div>
<script type="text/javascript">
var classrq = new Array();

/* Recruitment Bar - Class Needs
 ********************************************
- Each class variable is set up as follows:
   class.push ([ "Thumbnail Image URL",
    "Class Name",
    "Class Needs"
   ])
- recruitKeyWord defines the word to match in the "Class Needs" to
  set icon dimmer, the text is case sensitive.
 ******************************************** */
var recruitTitle = "Recruitment";
var recruitKeyWord = "Closed";
var recruitImagesPerRow = 10;
var tooltipWidth = 250;
var linkToRecruitmentPost = "http://recruitme.com";

classrq.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/dk.png",
 "<font color=#c41f3b>Death Knight</font>",
 "Only Gnomes need apply!"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/druid.gif",
 "<font color=#ff7d0a>Druid</font>",
 "Feral<br>Resto"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/hunter.gif",
 "<font color=#abd473>Hunter</font>",
 "BM with an annoyingly large Dinosaur"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/mage.gif",
 "<font color=#69ccf0>Mage</font>",
 "Frost/Arcane"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/paladin.gif",
 "<font color=#f58cba>Paladin</font>",
 "Prot<br>Holy"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/priest.gif",
 "<font color=#ffffff>Priest</font>",
 "Shadow<br>Holy"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/rogue.gif",
 "<font color=#fff569>Rogue</font>",
 "Closed"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/shaman.gif",
 "<font color=#2459ff>Shaman</font>",
 "Resto"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/warlock.gif",
 "<font color=#9482c9>Warlock</font>",
 "Affliction"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/warrior.gif",
 "<font color=#c79c6e>Warrior</font>",
 "Closed"
]);

/* ********************************************
   Don't change anything below
   ******************************************** */
// Recruitment bar
var sQ = "&#92;&#39;";
var rb = "<div><a href=\"" + linkToRecruitmentPost + "\">" + recruitTitle + "</a></div>";
 for (var j=0; j<classrq.length; j++) {
  rb += "<a href=\"" + linkToRecruitmentPost;
  rb += "\" =\"ddrivetip('<span class=recruitToolTip>";
  rb += classrq[j][1].replace(/\'/g,sQ);
  rb += "</span><br>" + classrq[j][2].replace(/\'/g,sQ);
  rb += "', '', '" + tooltipWidth + "');\" =\"hideddrivetip()\"><img src=\"";
  rb += classrq[j][0].replace(/\'/g,sQ) + "\"";
   if (classrq[j][2].match(recruitKeyWord)) { rb += " class=dim"; }
  rb += "></a>";
 if ( (j+1)%recruitImagesPerRow == 0 ) { rb += "<br>"; }
 }
 rb += '</a>';
 $('#recruitBar').html(rb);
</script>

Note... i changed the icons from 10 to 1 so as to make it vertical rather than horizontal.

TopBottom

Mottie (MVP) 3/11/2009 7:37 AM EST : RE: recruitment box help
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Deshund

I had to modify the script and the CSS a little, but try this:
<style type=text/css>
#recruitBar { width:150px; text-align:left; padding-left:30px; vertical-align:bottom; font-family:sans-serif; white-space:nowrap; }
#recruitBar a, #recruitBar img { color:#999999; text-decoration:none; border:0px; width:27px; height:27px; padding: 0px 5px; vertical-align:middle; }
.recruitToolTip { color: orange; font-weight: bold; vertical-align:top; }
.dim { opacity: .3; filter: alpha(opacity=30); }

#dhtmltooltip { position: absolute; width: 150px; border: #888888 1px solid; padding: 3px; background: #222222; color: #dddddd; visibility: hidden; z-index: 100; }
</style>

<div id=recruitBar></div>
<script type=text/javascript>
var classrq = new Array();

/* Recruitment Bar - Class Needs
 ********************************************
- Each class variable is set up as follows:
   class.push ([ "Thumbnail Image URL",
    "Class Name",
    "Class Needs"
   ])
- recruitKeyWord defines the word to match in the "Class Needs" to
  set icon dimmer, the text is case sensitive.
 ******************************************** */
var recruitTitle = "";
var recruitKeyWord = "Closed";
var recruitImagesPerRow = 1;
var tooltipWidth = 150;
var linkToRecruitmentPost = "http://enemy2horde.guildportal.com/Guild.aspx?GuildID=300167&TabID=2515925&ForumID=1423583&TopicID=8014341&Page=1#39753301";

classrq.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/dk.png",
 "<font color=#c41f3b>Death Knight</font>",
 "Closed"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/druid.gif",
 "<font color=#ff7d0a>Druid</font>",
 "Feral<br>Boomkin"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/hunter.gif",
 "<font color=#abd473>Hunter</font>",
 "Closed"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/mage.gif",
 "<font color=#69ccf0>Mage</font>",
 "Frost"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/paladin.gif",
 "<font color=#f58cba>Paladin</font>",
 "Closed"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/priest.gif",
 "<font color=#ffffff>Priest</font>",
 "Shadow<br>Holy<br>Highest Priority"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/rogue.gif",
 "<font color=#fff569>Rogue</font>",
 "Closed"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/shaman.gif",
 "<font color=#2459ff>Shaman</font>",
 "Closed"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/warlock.gif",
 "<font color=#9482c9>Warlock</font>",
 "Closed"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/warrior.gif",
 "<font color=#c79c6e>Warrior</font>",
 "Closed"
]);

/* ********************************************
   Don't change anything below
   ******************************************** */
// Recruitment bar
var sQ = "&#92;&#39;";
var rb = "<div><a href=\"" + linkToRecruitmentPost + "\">" + recruitTitle + "</a></div>";
 for (var j=0; j<classrq.length; j++) {
  rb += "<a href=\"" + linkToRecruitmentPost;
  rb += "\" =\"ddrivetip('<span class=recruitToolTip>";
  rb += classrq[j][1].replace(/\'/g,sQ);
  rb += "</span><br>" + classrq[j][2].replace(/\'/g,sQ);
  rb += "', '', '" + tooltipWidth + "');\" =\"hideddrivetip()\"><img src=\"";
  rb += classrq[j][0].replace(/\'/g,sQ) + "\"";
   if (classrq[j][2].match(recruitKeyWord)) { rb += " class=dim"; }
  rb += ">" + classrq[j][1] + "</a>";
 if ( (j+1)%recruitImagesPerRow == 0 ) { rb += "<br>"; }
 }
 rb += '</a>';
 $('#recruitBar').html(rb);
</script>
TopBottom

deshund (New Admin) 3/11/2009 10:12 AM EST : RE: recruitment box help
deshund
Posts: 105
Posts With Wolves

wow that worked great ty so much.
the death knight icon and name is out of alignment with the other classes, but its exactly what i was trying to do.
i cant seem to figure out what you did to make the names come up tho.

Mottie you are the greatest!!!!!
TopBottom

Mottie (MVP) 3/11/2009 11:07 AM EST : RE: recruitment box help
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Deshund!

I had to change the a tiny bit of the code (highlighted in blue).

/* ********************************************
   Don't change anything below
   ******************************************** */
// Recruitment bar
var sQ = "&#92;&#39;";
var rb = "<div><a href=\"" + linkToRecruitmentPost + "\">" + recruitTitle + "</a></div>";
 for (var j=0; j<classrq.length; j++) {
  rb += "<a href=\"" + linkToRecruitmentPost;
  rb += "\" =\"ddrivetip('<span class=recruitToolTip>";
  rb += classrq[j][1].replace(/\'/g,sQ);
  rb += "</span><br>" + classrq[j][2].replace(/\'/g,sQ);
  rb += "', '', '" + tooltipWidth + "');\" =\"hideddrivetip()\"><img src=\"";
  rb += classrq[j][0].replace(/\'/g,sQ) + "\"";
   if (classrq[j][2].match(recruitKeyWord)) { rb += " class=dim"; }
  rb += ">" + classrq[j][1] + "</a>";
 if ( (j+1)%recruitImagesPerRow == 0 ) { rb += "<br>"; }
 }
 rb += '</a>';
 $('#recruitBar').html(rb);
</script>

The Deathknight icon and text appears lined up to me on both FF and IE, but if you want to adjust it, change the numbers in red in the CSS below:
#recruitBar{ width:150px; text-align:left; padding-left:30px;vertical-align:bottom; font-family:sans-serif; white-space:nowrap; }
#recruitBara, #recruitBar img { color:#999999; text-decoration:none; border:0px;width:27px; height:27px; padding: 0px 5px; vertical-align:middle; }
The box width was changed to 150px to better fit in the side column. The "padding-left:30px" moves the icons & text 30 pixels in from the left border in attempts to center the box... adjust this to your liking. And in case you don't know, "padding: 0px 5px" means the padding for top and bottom is 0 pixels, while the right and left is 5 pixels. Previously, it was listed as "padding: 0px 1px 0px 0px". The four numbers adjust the padding in a clockwise direction: top, right, bottom & left.

TopBottom

deshund (New Admin) 3/12/2009 5:59 AM EST : RE: recruitment box help
deshund
Posts: 105
Posts With Wolves

Ahh no wonder i couldnt figure it out.  i dont play with the area that says
DONT CHANGE ANYTHING BELOW THIS LINE...:)  i would have never figured that out anyway...ty again.  i didnt know for sure what the padding ment, but it being defined helps for future changes:)
TopBottom

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