Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : SWtoR > SWTOR Recruit by Talent
Mottie (SuperAdmin) 12/9/2011 8:31 PM EST : SWTOR Recruit by Talent
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

SWtoR Recruit Needs by Talent

GuildPortal admin site link to the original post

This is a Star Wars the Old Republic class recruitment box showing the class needs by talent 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  ). Special thanks to Dethmaul for all of the images!!

Once you add this script and you notice that your tooltips don't look right, you'll need to add the modified tooltip mod.

Recruitment Needs Compact 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="/GuildFiles/258012/swtortalents.css" type="text/css" />
<
script src="/GuildFiles/258012/swtortalents.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 
$('.recruitTalent').swtorTalents();
});
</script>

Customization
  • CSS Styles:

    The default CSS has been moved to an external file: /GuildFiles/258012/swtortalents.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 swtortalents.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').swtorTalents();" 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.

    • addHeader is set to true by default
      When set to true, the header images are added (seen in the non-compact screen shots above). If set to false, the compact view will be seen.

    • 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:
        juggernaught : "x,x",
        maurader
             :
        "x,x",
        assassin
             :
        "x,x",
        sorceror
             :
        "x,x",
        powertech
            :
        "x,x",
        mercenary
            :
        "x,x",
        operative
            :
        "x,x",
        sniper
               :
        "x,x",
      Replace the x (default need) 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 sniper above, there is no comma at the end)

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

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

    • Need Everything (high priority):

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

    • Maurader Carnage Needed Only (high priority), everything else is not needed (none):

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

    • Powertech shield tech (med), Powertech advanced prototype (high), all Sniper (none), everything else is low priority (low):

        Tooltip Text Color
         Tooltip Background Color
        
      $('.recruitTalent').swtorTalents({
       colorBackground : false,
       defaultNeed : "Low",
       powertech   : "m,h",
       sniper      : "n,n"
      });
        
      $('.recruitTalent').swtorTalents({
       defaultNeed : "Low",
       
      powertech   : "m,h",
       sniper      : "n,n"

      });

    • All Juggernaughts (high), Corruption Sorceror (high), Lightning Sorceror (low), All Mercenary (low), everything else medium priority (medium):

        Tooltip Text Color
         Tooltip Background Color
        
      $('.recruitTalent').swtorTalents({
       colorBackground: false,
       defaultNeed  : "Medium",
       juggernaught : "h,h",
       sorceror     : "m,l",
       mercenary    : "l,l"
      });
        
      $('.recruitTalent').swtorTalents({
       defaultNeed  : "Medium",
       
      juggernaught : "h,h",
       sorceror     : "m,l",
       mercenary    : "l,l"

      });
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Dethmaul (Member) 12/12/2011 1:09 AM EST : RE: SWTOR Recruit by Talent
Dethmaul
Posts: 987

0
Like

0
Dislike

Are you planning to update this? I ask because of this line:
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 so, I was wondering if you can do a border color that matches the status of each level of need.

Border is gray for no, red for low, yellow for medium, and green for high. This will let people easily see what classes are need, in case they done mouse over the icon.
TopBottom

Mottie (SuperAdmin) 12/12/2011 9:25 AM EST : RE: SWTOR Recruit by Talent
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hey Dethmaul!

No need for me to update the code, it's all in the css... look for these definitions and add the border (in blue) with the colors you want:
/* opacity used on images */
.talentIcons .high { opacity: 1; filter: alpha(opacity=100); border: #0f0 1px solid; }
.talentIcons .medium { opacity: .75; filter: alpha(opacity=75); border: #ff0 1px solid; }
.talentIcons .low { opacity: .5; filter: alpha(opacity=50); border: #f00 1px solid; }
.talentIcons .none { opacity: .25; filter: alpha(opacity=25); border: #999 1px solid; }
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Dethmaul (Member) 12/12/2011 11:23 AM EST : RE: SWTOR Recruit by Talent
Dethmaul
Posts: 987

0
Like

0
Dislike

Haha,

I found the code from the Wow Widget, I just added this code to my CSS:

/* needs color used in tooltips (works for text and background) */
.high { color: #0f0; border: 1px solid #0f0; }
.medium { color: #ff0; border: 1px solid #ff0; }
.low { color: #f00; border: 1px solid #f00; }
.none { color: #999; border: 1px solid #999; }

That worked as well.

Again, thanks for all your help, especially lately, I know I bombarded you with a bunch of requests and help questions recently.
TopBottom

Dethmaul (Member) 12/13/2011 5:03 PM EST : RE: SWTOR Recruit by Talent
Dethmaul
Posts: 987

0
Like

0
Dislike

I know I keep making requests, but....

Would it be a pain to add 2 more status checks?

Open - Green the same as High
Closed - Red the same as Low

maurader     : "o,c",
assassin
     :
"x,l",
sorceror
     :
"m,h",


The switches would all become valid.
TopBottom

Mottie (SuperAdmin) 12/13/2011 7:48 PM EST : RE: SWTOR Recruit by Talent
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hey Dethmaul!

I just did a quick update to the plugin, no need to update the mod... just add the following lines (in blue) under ",sniper : 'x,x'"
// Set the need for each class, if it should have the default value, just leave it blank or with an "x"
// Use "x" for the default need, "n" for none, "l" (lower case L) for low
// "m" for medium and "h" for high need.
,juggernaught : "h,x"
,maurader : "x,h"
,assassin : "x,h"
,sorceror : "x,x"
,powertech : "x,x"
,mercenary : "h,x"
,operative : "x,x"
,sniper : "x,x"
,displayNames : {
  'None'   : 'Closed',
  'Low'    : 'Low',
  'Medium' : 'Medium',
  'High'   : 'Open'
}

Only the name that is displayed is different, you'll still need to use "n" for closed and "h" for open.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Dethmaul (Member) 12/15/2011 3:47 PM EST : RE: SWTOR Recruit by Talent
Dethmaul
Posts: 987

0
Like

0
Dislike

Not sure what I did wrong, but I cannot seem to get that last bit of code working.
TopBottom

Mottie (SuperAdmin) 12/15/2011 4:49 PM EST : RE: SWTOR Recruit by Talent
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi Dethmaul!

This is the initialization code I see... it's still missing the extra part in blue from my last post:
$(function(){
 $('.recruitTalent').swtorTalents({
  colorBackground: false,
  defaultNeed: "Low",
  addHeader: true,
  tooltipWidth: 150,
  juggernaught : "l,l",
  maurader : "l,l",
  assassin : ",",
  sorceror : ",",
  powertech : ",",
  mercenary : ",",
  operative : ",",
  sniper : ",",
  displayNames : {
   'None'   : 'Closed',
   'Low'    : 'Low',
   'Medium' : 'Medium',
   'High'   : 'Open'
  }
 });
});
Be mindful of commas... extra ones will cause a script error.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Reiu (Applicant) 1/19/2012 10:18 PM EST : RE: SWTOR Recruit by Talent
Reiu
Posts: 31

0
Like

0
Dislike

This is a great mod but, the tooltips I get are like this: <div style=align-text:center>"Name of the Spec": "Closed/Low/Medium/Open"</div> how is this fixed?
You can have a look at it at http://www.exileswtor.guildportal.com

Also, is it possible to fix the typo "Juggernaught" to "Juggernaut" and "Maurader" to "Marauder" in the CSS? or does it need to be edited in the javascript?
TopBottom

Mottie (SuperAdmin) 1/20/2012 9:20 AM EST : RE: SWTOR Recruit by Talent
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi Reiu!

It sounds like you just need to add the "modified tooltip mod" to get the tooltips working properly.

And the typos have been fixed. No need for you to do anything but reload the browser (shift-reload button; maybe 1-2 times) to make sure the file is updated.

Thanks for telling me about the typos! I suck at speeling.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
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%