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! > WoW Recruit Bar
Mottie (MVP) 2/21/2009 6:52 AM EST : WoW Recruit Bar
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

WoW Recruit Bar

Static Recruit Bar

This first recruit bar was part of the Guild bar v1.2. It was pulled out because someone requested to just have this portion.


<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); }
</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
   ******************************************** */
var sQ = '&quot;';
var rb = '<div><a href="' + linkToRecruitmentPost + '">' + recruitTitle + '</a></div>';
 for (var j=0; j<classrq.length; j++) {
  rb += '<a href="' + linkToRecruitmentPost;
  rb += '" class="tooltip" title="<span class=recruitToolTip>';
  rb += classrq[j][1].replace(/\"/g,sQ);
  rb += '</span><br>' + classrq[j][2].replace(/\"/g,sQ);
  rb += '" rel="' + tooltipWidth + '"><img src="';
  rb += classrq[j][0].replace(/\"/g,sQ) + '"';
   if (classrq[j][2].match(recruitKeyWord)) { rb += ' class=dim'; }
  rb += '></a>';
 }
 rb += '</a>';
 $('#recruitBar').html(rb);
</script>

Fisheye Recruit Bar

This second recruit bar uses a jQuery interface addon that gives you a fisheye menu like Mac's have. The problem is you probably couldn't use this in the side columns of your site since it's width varies so much.


<style type="text/css">
#reqBar { text-align: center; height: 50px; position: relative; }
.reqBarItem { text-align: center; color: #ffffff; font-weight: bold; text-decoration: none; width: 40px; position: absolute; display: block; bottom: 0px; }
.reqBarItem img { border: none; margin: 5px auto 0 auto; width: 100%; }
.reqBarItem span { display: none; positon: absolute; }
.reqBarContainer { background-color: transparent; height: 50px; width: 200px; position: absolute; left: 500px; }
.dim { opacity: .3; filter: alpha(opacity=30); }
</style>
<script type="text/javascript" src="http://www.axiomfiles.com/Files/243007/interface.js"></script>
<div id="reqBar"></div>
<script type="text/javascript">
var classrq = new Array();

var recruitKeyWord = "Closed";
var tooltipWidth = 200;
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 menu
var sQ = '&quot;';
var rb1 = '<div class=reqBarContainer>';
 for (var j=0; j<classrq.length; j++) {
  rb1 += '<a class="reqBarItem tooltip" href="' + linkToRecruitmentPost;
  rb1 += '" title="' + classrq[j][1].replace(/\"/g,sQ);
  rb1 += '<br>' + classrq[j][2].replace(/\"/g,sQ) + '" rel="';
  rb1 += tooltipWidth + '"><span>';
  rb1 += classrq[j][1] + '</span><img src="' + classrq[j][0] + '"';
   if (classrq[j][2].match(recruitKeyWord)) { rb1 += ' class=dim'; }
  rb1 += '></a>';
 }
 rb1 += '</div>';
 $('#reqBar').html(rb1);
 $(document).ready(function(){
  $('#reqBar').Fisheye({
   itemWidth: 20,
   maxWidth: 40,
   proximity: 40,
   items: 'a',
   itemsText: 'span',
   container: '.reqBarContainer',
   halign : 'center'
  })
 });
</script>

Customizing

Tooltips

If you aren't seeing the tooltips popup or you want to change the color of the tooltips, you'll need to add the following bit of code to your footer HTML (Control Panel > Custom HTML & Script > Footer Area). Modify the text in blue to match the colors of your site.

<style type="text/css">
.tooltip, .preview, .screenshot { cursor:pointer; }
#tooltip, #tooltip2, #preview, #screenshot { color:#dddddd; background:#222222; border: 1px solid #333333; padding:5px; display:none; opacity: 0.9; filter: alpha(opacity=90); text-align:left; border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; }
</style>
<script src="http://www.axiomfiles.com/Files/258012/tooltip.js" type="text/javascript"></script>

Static Bar

  CSS

  • "#recruitBar" defines the recruitment box size and font size.
  • "#recruitBar a, #recruitBar img" defines the text color of the title and the image size and border color.
  • ".recruitToolTip" defines the style and color of the tooltip title only. This actually has been overridden because the class colors are now defined in the javascript variables ("<font color=#c41f3b>Death Knight</font>")
  Variables (in red)
  • Box Title (recruitTitle):
    Default is set to "Recruitment", but you can leave it blank. See the CSS above on how to change it's style.
  • Icon dimming (recruitKeyWord):
    The script looks for a keyword in your class needs to determine if the class image needs to be dimmed. Default is set to "Closed". The keyword is case sensitive.
  • Icon arrangement (recruitImagesPerRow):
    At this time, there are ten classes. The bar is designed to allow you to set the number of icons per row, default is set to 10. See the second image above to see what it looks like set to 5.
  • Width of the tooltip (tooltipWidth):
    The width of the tooltip that is displayed. Default is set to 200 pixels.
  • Icon link (linkToRecruitmentPost):
    The URL to your recruitment requirements or application thread should be typed in here. Default is "http://recruitme.com".
  • Class needs:
    Change your class needs as desired. If you already have a Guild Bar or even the Fisheye bar below, you only need one definition of the classrq per page. The script is set up as follows:

    classrq.push ([ "Thumbnail Image URL",
      "Class Name",
      "Class Needs"
    ])

    You only need to change the "Class Needs" portion. In the example for Druids, you will see the class needs text looks like this: "Feral<br>Resto". The <br> in the middle is HTML code for new line. You can basically type in anything you want here including HTML tags.
Fisheye Bar

  CSS
  • There isn't really anything to change in the CSS... you can adjust the height and width but you won't see the difference.
  Variables (in red)
  • Icon dimming (recruitKeyWord):
    The script looks for a keyword in your class needs to determine if the class image needs to be dimmed. Default is set to "Closed". The keyword is case sensitive.
  • Icon link (linkToRecruitmentPost):
    The URL to your recruitment requirements or application thread should be typed in here. Default is "http://recruitme.com".
  • Width of the tooltip (tooltipWidth):
    The width of the tooltip that is displayed. Default is set to 200 pixels.
  • Class needs:
    Change your class needs as desired. If you already have a Guild Bar or even the Fisheye bar below, you only need one definition of the classrq per page. The script is set up as follows:

    classrq.push ([ "Thumbnail Image URL",
      "Class Name",
      "Class Needs"
    ])

    You only need to change the "Class Needs" portion. In the example for Druids, you will see the class needs text looks like this: "Feral<br>Resto". The <br> in the middle is HTML code for new line. You can basically type in anything you want here including HTML tags.

  • Fisheye settings:
    • itemWidth - Sets starting the icon size - icon size when not being hovered over. Default = 20 pixels
    • maxWidth - Sets the max size of the icons that they grow to when being hovered over. Default = 40 pixels
    • proximity - Distance from the icon before it begins to grow. Default = 40 pixels.
    • itemsText - You can get rid of this line if you don't want the text to appear above the image while hovering over it.
Edit (9/13/2009): Updated the tooltips to work newer tooltip script & I deleted the setting of images per row in the Static Recruit bar... I didn't think it was needed since it's now separate from the guildbar (it'll fit whatever container you put it into). You probably won't notice any difference from the old script.
Edit (1/4/2010): Added a note on how to add the new tooltip script/CSS. I've also edited the replies in this thread with the new tooltip script and the CSS it uses.
TopBottom

Nokosa (New Admin) 3/3/2009 1:55 PM EST : RE: WoW Recruit Bar
Nokosa
Posts: 13
Becoming Adept!

Hey Mottie,

Nevermind. I found it on your forums.

Thank you!
TopBottom

Lûx (New Admin) 5/12/2009 8:23 PM EST : RE: WoW Recruit Bar

Lûx
Posts: 7
Getting Started!

I'm not sure what I'm doing wrong but I'm not getting any tooltips showing on mouseover Any idea what I've messed up?

Thanks
TopBottom

Mottie (MVP) 5/13/2009 7:59 AM EST : RE: WoW Recruit Bar
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Lux!

Sorry I haven't had time to go back and edit every post I've made, but GP has removed the tooltip script for some unknown reason. To add it back, paste this code into your header HTML or footer HTML
<script src="http://www.axiomfiles.com/Files/243007/dtips.js" type="text/javascript"></script> Don't use this anymore

<style type="text/css">
.tooltip, .preview, .screenshot { cursor:pointer; }
#tooltip, #tooltip2, #preview, #screenshot {
 color:#dddddd;
 background:#222222;
 border: 1px solid #333333;
 padding:5px;
 display:none;
 opacity: 0.9;
 filter: alpha(opacity=90);
 text-align:left;
 border-radius: 1em;
 -moz-border-radius: 1em;
 -webkit-border-radius: 1em;
}
</style>
<script src="http://www.axiomfiles.com/Files/258012/tooltip.js" type="text/javascript"></script>


Edited (1/4/2010): Updated tooltip script and included CSS.
TopBottom

Lûx (New Admin) 5/13/2009 10:53 AM EST : RE: WoW Recruit Bar

Lûx
Posts: 7
Getting Started!

Thank you so much! Was going mad trying to figure it out

And thanks for a great bit of coding as well Hopefully as a big amateur I can learn something from it!

Lûx
TopBottom

Ciran81 (New Admin) 5/26/2009 2:34 PM EST : RE: WoW Recruit Bar
Ciran81
Posts: 10
Getting Started!

Hey Mottie!
    We're just getting out guildwebsite going on GP. I came across this code for the recruit bar and thought it would like wicked awesome on the site. I'm just having problems figuring out where exactly you put the code. I assumed because it was a Jquery file that it would go into the custom jquery part on the gp control panel. If that's not where i paste it, then where do I? nothing is showing up on my guild page. PLS HELP!!! ty
-Ciran
TopBottom

Mottie (MVP) 5/26/2009 4:47 PM EST : RE: WoW Recruit Bar
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Ciran81!

This recruit bar should be added to a free form text/HTML type content box. You can add this type of box as follows...
Control Panel > Site Pages > Manage Pages > Select Content (on the page you want to add this bar) > Add Content (tab)
  • Now type in the Box Title.. something like "Recruiting"
  • Type: Free form text/HTML
  • Side of Page: pick Left side, Center or Right Side
  • Click "Add"

  • Now find the new Content box and click "Edit Content"
  • In the bottom left corner, switch the editor to HTML mode ()
  • Now paste the script into the editor, modify the data to match your recruitment needs, and then click Save
  • Reload your site page to see the results.
TopBottom

Ciran81 (New Admin) 5/26/2009 5:47 PM EST : RE: WoW Recruit Bar
Ciran81
Posts: 10
Getting Started!

mk i did exactly what you told me to and this is what happened. lol im not sure what went wrong

my guild website
TopBottom

Mottie (MVP) 5/26/2009 6:31 PM EST : RE: WoW Recruit Bar
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Ciran81!

You need to switch to HTML mode () before you paste the script into the editor.
TopBottom

Ciran81 (New Admin) 5/26/2009 7:07 PM EST : RE: WoW Recruit Bar
Ciran81
Posts: 10
Getting Started!

Hello again!
    Ok I got the interface to show up on the website, however the specs we need for the classes arent appearing and when you click on the button it brings you to recruitme.com. the picture shows it just showing the specs needed so im not sure why its doing this. Again, thanks for your help

guild site
TopBottom

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