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 Needs (using Talent Trees)
Mottie (MVP) 2/21/2010 5:55 PM EST : WoW Recruit Needs (using Talent Trees)
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

WoW Recruit Needs (using Talent Trees)

This is a World of Warcraft class recruitment box showing the class needs by talent tree specialization. To show the needs just hover over the icon. I've made this recruitment box super easy to use because it uses minimal coding on your part (not counting the CSS  ).

Once you add this script and you notice that your tooltips don't look right, you'll need to add the "Modified Tooltips" mod (Control Panel > Get Site Mods > Search for "Modified Tooltips", click and install mod.

 Recruitment Needs
 Colored Background
Colored Text
     

Code
The code below will set up the recruit needs widget with it's default settings. See the customization section to get more details on the default settings.

NOTE: Add this code to a free form text/HTML type widget, while the editor is in Raw/Script mode.
<div class="recruitTitle"> Recruitment Needs</div>
<div class="recruitTalent"></div>

<link rel="stylesheet" href="http://guildportal.com/GuildFiles/258012/wowtalents.css" type="text/css" />
<
script src="http://guildportal.com/GuildFiles/258012/wowtalents-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 
$('.recruitTalent').wowTalents();
})
</script>

Customization

  • CSS Styles:

    The default CSS has been moved to an external file: http://guildportal.com/GuildFiles/258012/wowtalents.css

    I did this because in this next version, an image sprite is used to speed up image loading and requires a lot more CSS. So, if you want to customize the look of the recruit widget, then download the file above (right click and save) and modify the file as desired. Below are brief descriptions of some CSS definitions to help get you started.

    If you do decide to go with your own custom CSS, then replace the href that points to wowtalents.css in the <link> code above to point to your file.

    • ".recruitTitle" - Styles the title of the widget above the box. The text of this title is in blue, look for "Recruitment Needs".
    • ".recruitTalent" - Sets the overall style of the widget. Set to be 200px wide.

    • ".high" - High priority text color (green by default). The tooltip background color is also set from this text color.
    • ".medium" - Medium priority text color (yellow by default).
    • ".low" - Low priority text color (red by default).
    • ".none" - No needs text color (grey by default).
    • ".usebg" - This sets the text color when the tooltip background color is being changed (black by default). Without this the text would be the same as the #tooltip definition.

    • ".talentIcons .high", ".talentIcons .medium", ".talentIcons .low" and ".talentIcons .none" - sets the opacity of the icon at each priority

    • ".classIcon" - Styles the table cell that contains the class icon and class text. It also contains the background image sprite which contains an image of all the WoW classes
    • ".classIcon span" - Styles only the class text. It was included to add padding between the icon and the text.

    • ".talentIcons" - Styles the table cell that contains all three talent icons.
    • ".talentIcon" - Contains the background image which contains all of the talent tree images.

  • Options:

    The default options are set when the "$('.recruitTalent').wowTalents();" function has no extra variables inside the parenthesis, as seen in the code above. Add the following variables as needed:

    • defaultNeed is set to "Low" by default
      What this variable does is if you don't set the specific class need in the options, it will default to whatever this variable is set to.
      You can set this variable to "None", "Low", "Medium" or "High". The first letter should be capitalized as it is the text that is added to the tooltip.

    • colorBackground is set to true by default
      When set to true, hovering over a talent tree icon will display a tooltip with the background color set.

    • useClassColors is set to true by default
      When set to true, the class names will be set to their given class color (seen in the screen shots above). If set to false, the ".classIcon span" css definition will set the text color.

    • tooltipWidth is set to 150 by default (in pixels)
      You can adjust this to fit the tooltip contents. The contents are centered within the coding.

    • Use the class name to set each class need as follows:

        deathknight : "x,x,x",
        druid       : "x,x,x,x",
        hunter      : "x,x,x",
        mage        : "x,x,x",
        paladin     : "x,x,x",
        priest      : "x,x,x",
        rogue       : "x,x,x",
        shaman      : "x,x,x",
        warlock     : "x,x,x",
        warrior     : "x,x,x"

        Replace the x with n (none), l (low), m (medium) or h (high). Each variable corresponds to the talent tree name (in alphabetical order).

  • Examples (I hope this is enough to get the idea across):

    NOTE: The LAST variable should NEVER have a comma at the end - the script will not work (see warrior above, there is no comma at the end)

    • Need Everything (low priority, remember this is the default):

        Tooltip Text Color
         Tooltip Background Color
        
      $('.recruitTalent').wowTalents({
       colorBackground: false
      });
        
      $('.recruitTalent').wowTalents();

    • Need Everything (high priority):

        Tooltip Text Color
         Tooltip Background Color
        
      $('.recruitTalent').wowTalents({
       colorBackground: false,
       defaultNeed: "High"
      });
        
      $('.recruitTalent').wowTalents({
       defaultNeed: "High"
      });

    • Restoration Druid Needed Only (high priority), everything else is not needed (none):

        Tooltip Text Color
         Tooltip Background Color
        
      $('.recruitTalent').wowTalents({
       colorBackground: false,
       defaultNeed: "None",
       druid : "n,n,
      n,h"
      });
        
      $('.recruitTalent').wowTalents({
       defaultNeed: "None",
       druid : "n,n,
      n,h"
      });

    • Arcane mage (med), Fire mage (high), Frost mage (low), Protection warrior (high), everything else is low priority (low):

        Tooltip Text Color
         Tooltip Background Color
        
      $('.recruitTalent').wowTalents({
       colorBackground: false,
       defaultNeed: "Low",
       mage   : "m,h,l",
       warrior: "l,l,h"
      });
        
      $('.recruitTalent').wowTalents({
       defaultNeed: "Low",
       
      mage   : "m,h,l",
       warrior: "l,l,h"

      });

    • Discipline or Holy Priest (high), Restoration Druid (high), Restoration Shaman (high), Rogue (low, all trees), everything else medium priority (medium):

        Tooltip Text Color
         Tooltip Background Color
        
      $('.recruitTalent').wowTalents({
       colorBackground: false,
       defaultNeed: "Medium",
       priest : "h,h,m",
       driud  : "m,
      m,m,h",
       shaman : "m,m,h",
       rogue  : "l,l,l"
      });
        
      $('.recruitTalent').wowTalents({
       defaultNeed: "Low",
       
      priest : "h,h,m",
       driud  : "m,
      m,m,h",
       shaman : "m,m,h",
       rogue  : "l,l,l"

      });
Edited (11/7/2012): Added Monks and druid guardian talents
Edited (3/11/2010): Added a line about using the updated tooltip script. Also, I've updated the script so the "defaultNeed" will work with just the first letter.
Edited (3/11/2010): After seeing the script in action on other sites, I decided to allow turning off the class coloring - see the "useClassColors" option above.
Edited (10/3/2010): Updated script to use background image sprites, moved the CSS to an external file.
TopBottom

Mottie (MVP) 3/11/2010 12:47 PM EST : RE: WoW Recruit Needs (using Talent Trees)
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

I forgot to include that this recruitment code requires the updated tooltip script. Add the following to your Footer Area (Control Panel > Custom HTML & Script > Footer Area)
<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>
  • Modify the default tooltip colors in blue.
  • Modify the default opacity or border radius (doesn't work in IE) in red.
TopBottom

Mottie (MVP) 3/11/2010 7:15 PM EST : RE: WoW Recruit Needs (using Talent Trees)
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Update #2:

After seeing this recruitment script on some other sites, I thought it would be better to allow you to turn the class colors off so you can see it better. Check out the updated post above for the "useClassColors" option.

When set to false, the text color should default to your site text color. If you want to use a different color, set the ".classIcon span" color.
TopBottom

shadowstts (Guild Admin) 3/12/2010 10:24 PM EST : RE: WoW Recruit Needs (using Talent Trees)
shadowstts
Posts: 364
Fingers of Fury!

im not very good at coding but after i added the second post code into my footer i get loads of tooltips witch is great but the text couler is way to black i changed the text couler to #FFFFFFF but stil lsame couler

2nd thing the tooltip is dif for the recruiment it really bright red?

soz if its a stupid question 


oh and now when i try adding the specific classes the script gose away i even copy and pasted an example that u made and it still wont show up been trying to figure out what i did wrong for 3 hours 


#update just figured wher ei went wrong i didnt put the specific in side the brackets soz 

Asylum RULES!

TopBottom

shadowstts (Guild Admin) 3/12/2010 11:38 PM EST : RE: WoW Recruit Needs (using Talent Trees)
shadowstts
Posts: 364
Fingers of Fury!

i set the text thing to false but still class couler

Asylum RULES!

TopBottom

Mottie (MVP) 3/13/2010 11:59 AM EST : RE: WoW Recruit Needs (using Talent Trees)
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Shadowstts!

Try adding this to the code "useClassColors: false". Also, if you set the default need to none, you don't need to add "x,x,x"... so this should be what your code looks like:

$(document).ready(function(){
 $('.recruitTalent').wowTalents({
  colorBackground: false,
  useClassColors: false,
  defaultNeed: "None",
  druid : "x,x,l",
  hunter : "x,l,l",
  paladin : "l,l,x",
  priest : "l,l,x",
  shaman : "l,l,m",
  warrior : "x,x,l"
 });
})

I forgot to document it, but the script sees "x" as "none" - actually anything that isn't "l", "m" or "h" is seen as "none".

Also the "none" text is really hard to see with the tooltip background color you used, you also mentioned the color was too red. Just change the included

.high { color: #0f0; }
.medium { color: #ff0; }
.low { color: #f00; }

<- #0f0 = #00ff00 or bright green
<- #ff0 = #ffff00 or bright yellow
<- #f00 = #ff0000 or bright red
TopBottom

shadowstts (Guild Admin) 3/13/2010 12:24 PM EST : RE: WoW Recruit Needs (using Talent Trees)
shadowstts
Posts: 364
Fingers of Fury!

the couler is still class coulers iv done erything uv told me to do 

Asylum RULES!

TopBottom

Mottie (MVP) 3/13/2010 4:46 PM EST : RE: WoW Recruit Needs (using Talent Trees)
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Shadowstts!

Oops sorry, I missed the "s" on the end. Change "useClassColor" to "useClassColors".

I fixed it in the post above.
TopBottom

shadowstts (Guild Admin) 3/13/2010 5:07 PM EST : RE: WoW Recruit Needs (using Talent Trees)
shadowstts
Posts: 364
Fingers of Fury!

omg it worked thx mottie you rule!

Asylum RULES!

TopBottom

Mottie (MVP) 10/3/2010 9:42 AM EST : RE: WoW Recruit Needs (using Talent Trees)
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

I've updated this script to use image sprites - basically it loads two images that contain all the class & talent icons, so it loads much faster than before when it loaded 40 images.

Note: It's a new script file, so make sure your <script> is pointing to the correct file and you are using it as follows:
$('.recruitTalent').wowTalents();
Everything has been updated in the original post above.
TopBottom

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