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! > Roster Icons
Mottie (MVP) 9/17/2009 8:09 PM EST : RE: Roster Icons
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Guppy!

You should just be able to replace the names and image URL in the LOTRO script, but I'll make one specifically for SWG if you can help me find some class (or professions in your case) icons
TopBottom

Guppy Queen (New Admin) 9/18/2009 12:53 AM EST : RE: Roster Icons
Guppy Queen
Posts: 41034
Zomgawsh Poster

TopBottom

Guppy Queen (New Admin) 9/18/2009 2:04 AM EST : RE: Roster Icons
Guppy Queen
Posts: 41034
Zomgawsh Poster

How does this look Mottie?

<script type="text/javascript" src="rostericons.js"></script>



<script type="text/javascript">
$(document).ready(function() {
 var iconHeight = 25;
 var iconWidth = 25;
 var cIcon = new Array();
 cIcon.push (["Bounty Hunter","http://forums.station.sony.com/swg/images/avatar/SWG/general/bounty.gif"]);
 cIcon.push (["Commando","http://forums.station.sony.com/swg/images/avatar/SWG/general/commando.gif"]);
 cIcon.push (["Entertainer","http://forums.station.sony.com/swg/images/avatar/SWG/general/entertainer.gif"]);
 cIcon.push (["Jedi","http://forums.station.sony.com/swg/images/avatar/SWG/general/jedi.gif"]);
 cIcon.push (["Medic","http://forums.station.sony.com/swg/images/avatar/SWG/general/medic.gif"]);
 cIcon.push (["Officer","http://forums.station.sony.com/swg/images/avatar/SWG/general/officer.gif"]);
 cIcon.push (["Smuggler","http://forums.station.sony.com/swg/images/avatar/SWG/general/smuggler.gif"]);
 cIcon.push (["Spy","http://forums.station.sony.com/swg/images/avatar/SWG/general/spy.gif"]);
 cIcon.push (["Trader","http://forums.station.sony.com/swg/images/avatar/SWG/general/trader.gif"]);

 var iconImg = "<img style='vertical-align:middle' height='" + iconHeight + "' width='" + iconWidth + "' src='";
 $(".ContentBoxBody").each(function(){
  if ($(this).attr("id").match("_grdRoster")) {
   for (j=0; j < cIcon.length; j++) {
    $(this).find("tr.NormGridRow,tr.AltGridRow").find("td:gt(1)").each(function(){
     if ($(this).html().match(cIcon[j][0])) $(this).html(iconImg + cIcon[j][1] + "'> " + $(this).html());
    })
   }
  }
 })
});
</script>



Is it possible to use 2 icons? A profession one and a species one? Here is my roster page.

TopBottom

Mottie (MVP) 9/18/2009 11:37 AM EST : RE: Roster Icons
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Guppy!

Hehe, you did all the work for me

Actually, I did update the script a little and left you with two versions for you to pick from. I also copied the icons from the SWG forums to my photobucket. It's no big deal if you use them from my site, but I wouldn't use the images from the SWG forums. I also assigned the images to "about.png" which is a question mark image if it is unknown - like all the races and with the professions I added it for pilot, transportation and none. I'm not going to highlight all the names and URL below.. it'll take too long LOL.

One more note: You could potentially add a different image for each type of trader, just use Trader plus the first few letters of the sub-specialty like this: "Trader (Dom" or "Trader (Eng"

Oh, of course if you are going to add these scripts into an external js file, make sure you remove the <script> from the top and the </script> from the bottom inside the file.

Version 1

This code will replace the names and add images next to the text
<script type="text/javascript">
$(document).ready(function() {
 var iconHeight = 25;
 var iconWidth = 25;
 var cIcon = new Array();

 cIcon.push (["Bounty Hunter","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/bounty.gif"]);
 cIcon.push (["Commando","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/commando.gif"]);
 cIcon.push (["Entertainer","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/entertainer.gif"]);
 cIcon.push (["Jedi","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/jedi.gif"]);
 cIcon.push (["Medic","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/medic.gif"]);
 cIcon.push (["Officer","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/officer.gif"]);
 cIcon.push (["Smuggler","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/smuggler.gif"]);
 cIcon.push (["Spy","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/spy.gif"]);
 cIcon.push (["Trader","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/trader.gif"]);

 cIcon.push (["Transportation","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);
 cIcon.push (["Pilot","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);
 cIcon.push (["None","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);

 cIcon.push (["Bothan","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);
 cIcon.push (["Human","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);
 cIcon.push (["Ithorian","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);
 cIcon.push (["Mon Calamari","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);
 cIcon.push (["Rodian","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);
 cIcon.push (["Sullustan","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);
 cIcon.push (["Trandoshan","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);
 cIcon.push (["Twi'lek","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);
 cIcon.push (["Wookiee","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);
 cIcon.push (["Zabrak","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);

 var iconImg = "<img style='vertical-align:middle' height='" + iconHeight + "' width='" + iconWidth + "' src='";
 $(".ContentBoxBody").each(function(){
  if ($(this).attr("id").match("_grdRoster")) {
   for (j=0; j < cIcon.length; j++) {
    $(this).find("tr.NormGridRow,tr.AltGridRow").find("td:gt(1)").each(function(){
     if ($(this).text().match(cIcon[j][0])) $(this).html(iconImg + cIcon[j][1] + "'> " + $(this).html());
    })
   }
  }
 })
});
</script>
Version 2

This code will replace the names and add images with the text now in a tooltip
<script type="text/javascript">
$(document).ready(function() {
 var iconHeight = 25;
 var iconWidth = 25;
 var iconTooltipWidth = 100;
 var cIcon = new Array();

 cIcon.push (["Bounty Hunter","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/bounty.gif"]);
 cIcon.push (["Commando","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/commando.gif"]);
 cIcon.push (["Entertainer","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/entertainer.gif"]);
 cIcon.push (["Jedi","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/jedi.gif"]);
 cIcon.push (["Medic","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/medic.gif"]);
 cIcon.push (["Officer","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/officer.gif"]);
 cIcon.push (["Smuggler","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/smuggler.gif"]);
 cIcon.push (["Spy","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/spy.gif"]);
 cIcon.push (["Trader","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/trader.gif"]);

 cIcon.push (["Transportation","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);
 cIcon.push (["Pilot","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);
 cIcon.push (["None","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);

 cIcon.push (["Bothan","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);
 cIcon.push (["Human","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);
 cIcon.push (["Ithorian","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);
 cIcon.push (["Mon Calamari","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);
 cIcon.push (["Rodian","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);
 cIcon.push (["Sullustan","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);
 cIcon.push (["Trandoshan","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);
 cIcon.push (["Twi'lek","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);
 cIcon.push (["Wookiee","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);
 cIcon.push (["Zabrak","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/about.png"]);

 var iconImg = '<img class="tooltip" rel="' + iconTooltipWidth + '" height="' + iconHeight +
  '" width="' + iconWidth + '" style="vertical-align:middle" src="';
 $(".ContentBoxBody").each(function(){
  if ($(this).attr("id").match("_grdRoster")) {
   for (j=0; j < cIcon.length; j++) {
    $(this).find("tr.NormGridRow,tr.AltGridRow").find("td:gt(1)").each(function(){
     if ($(this).text().match(cIcon[j][0])) {
      $(this).html(iconImg + cIcon[j][1] + '" title="<center>' + $(this).html() + '</center>">');
     }
    })
   }
  }
 })
});
</script>
TopBottom

Guppy Queen (New Admin) 9/18/2009 12:47 PM EST : RE: Roster Icons
Guppy Queen
Posts: 41034
Zomgawsh Poster

Thank you Mottie

Question though, why can't I use images from the SWG forums?
TopBottom

Mottie (MVP) 9/18/2009 1:11 PM EST : RE: Roster Icons
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Guppy,

Well it's called stealing bandwidth from a site. It's not like you'll get a ticket or anything, but if they are images that you'll be using a lot, it's better to put them on your own site. Some web admins may get pissed off at you because they have to pay for bandwidth, say $30 for 200 Gigs of bandwidth a month. It may seem minimal, but 10 images x 100 users x 5 visits per day can add up pretty quick.

... Also, if you look at the first post in this thread you'll see that Chef posted images from a site where the images no longer exists. That's why I always copy images that I want to my own site so I have control over them as well. Photobucket doesn't care who is accessing the images, so as long as my account stays active, all of those images will be available to the public.
TopBottom

Guppy Queen (New Admin) 9/18/2009 1:21 PM EST : RE: Roster Icons
Guppy Queen
Posts: 41034
Zomgawsh Poster

I see. Thanks for the info Mottie.
TopBottom

Mottie (MVP) 6/13/2010 4:12 PM EST : RE: Roster Icons
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Updated the DDO and LotRO scripts to speed up the script and hopefully not have IE complain that the script may slow down your browsing experience. Looking back at my code, I have no idea why I did it that way either LOL.
TopBottom

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