Add EQ2 Roster Using XML/XSL

GuildPortal admin site link to the original post

This method uses the XML/XSL widget which only works on subscribed sites. If your subscription runs out, this widget will stop working.

I wanted to thank SchandlichEQ2 for his post, and motivating me to make this EQ2 Roster post.



Instructions

Add the Widget:

• Go to Control Panel > Pages & Content > (pick a page to add this widget)
• In the right panel, click "Add Widget"
• Now enter:
  
  Title: "EQ2 Roster" (or whatever you want)
  Type of Widget: "XML/XSL Transformation" (it's at the bottom of the list)
  Location on Page: "Center of Page" (use the center as this widget will be wide)
  Click [ Add this Widget ]

Set up the Widget:

• Open a new tab/browser window and go to this page:
  
  http://data.soe.com/xml/get/eq2/guild/?name=Test&c:resolve=members%28displayname,type.class,type.level,type.race,type.deity,type.gender,guild.rank,guild.status,secondarytradeskills,tradeskills%29
  
  
• Change the part in red to match your guild name: ?name=Test&c
  
  
  • The guild name must have capitalization that matches your guild
  • If your guild name has any spaces like "The Guild", then enter it as normal, but note that the space will be replaced with "%20"
  • If your browser shows data that matches your guild, then copy the browser URL - click inside and press Ctrl-A to select it all, then Ctrl-C to copy.
    
    
• Find the widget in the "Widget/Content" panel
• Click the Edit button inside the widget
• You should see this panel, now enter the following in the XML Source tab (ignore the URL in the image, it was to the old XML feed):
  
  
  
  

  XML Source:  XML Url:

  Choose "Remote File" (Add the XML feed of your guild roster from the URL above)

• Click the XSL Source tab and enter the following:
  
  
  
  

  XML Source:  XSL Url:

  Choose "Remote File" http://www.guildportal.com/GuildFiles/258012/eq2-roster.xsl



• Click the [ Save Changes ] button

Style the Roster:

Where to add the CSS:

• Ideally add the CSS into a Free Form Text/HTML type widget on the same page as your Roster widget.
• If you are using full custom CSS (Control Panel > Custom HTML & Script > Custom CSS > Full Custom CSS tab) then add the CSS to the end.
• If you aren't using any custom CSS, then add the CSS to your CSS Additions to Standard tab (Control Panel > Custom HTML & Script > Custom CSS > Css Additions to Standard).
• If you change the colors to a lighter shade, you can change the sort arrow image urls in the basic CSS section (in orange) with the following:
  
  

  	http://www.axiomfiles.com/Files/278466/sort-black.gif
  	http://www.axiomfiles.com/Files/278466/sort-asc-black.gif
  	http://www.axiomfiles.com/Files/278466/sort-desc-black.gif

Basic CSS:

• This CSS is needed to add the sort arrows and background color in the header, and the color (zebra) striping of the table rows. You can also add CSS to style any of the columns (e.g. centering the level numbers in .eq2Level)

/* header above the sort row */
.eq2CharacterHeader { font-weight: bold; font-variant: small-caps; text-align: center; background: #222; border-right: #444 1px solid; }
.eq2TradeskillsHeader { font-weight: bold; font-variant: small-caps; text-align: center; background: #333; }
/* For the artisan level, tinkering & adorning columns, you can make it narrow
and force the text to fit using the following css, adjust the width as desired */
.eq2SecondaryHeader * { width: 50px; overflow: hidden; text-overflow: ellipsis; }

/* Sort row styling */
#eq2roster th.header {
 background: #111 url(http://www.axiomfiles.com/Files/278466/sort-white.gif) left center no-repeat;
 cursor: pointer;
 font-size: 90%;
 font-weight: bold;
 text-align: left;
 padding-left: 20px !important;
 border-right: #444 1px solid;
}
#eq2roster th.headerSortUp { background: #400000 url(http://www.axiomfiles.com/Files/278466/sort-asc-white.gif) left center no-repeat; }
#eq2roster th.headerSortDown { background: #804000 url(http://www.axiomfiles.com/Files/278466/sort-desc-white.gif) left center no-repeat; }

/* zebra striping */
#eq2roster .odd { background: #333; }
#eq2roster .even { background: #222; }

/* Roster table columns */
.eq2Name {}
.eq2Rank { text-transform: capitalize; }
.eq2Class { text-transform: capitalize; }
.eq2Level { text-align: center; width: 3em; }
.eq2ArtisanClass { text-transform: capitalize; }
.eq2ArtisanLevel { text-align: center; width: 3em; }
.eq2Secondary {}

Add Rank Icons:

• If you have icons that you want to add for your guild leader, officers, members and alts you can do that easily.

The rank names no longer matter. The rank level is now applied so that "eq2Rank0" is the guild leader, on down. Here are a few examples:

.eq2Rank { height: 24px; padding-left: 26px; background: left center no-repeat; }
.eq2Rank0 {}
.eq2Rank1 {}
.eq2Rank2 {}
.eq2Rank3 {}

• Once you have the CSS names set up, then adjust it as follows:

• Make your icons about 20 x 20 pixels in size. You can't adjust their size with CSS because they are background images.
• Adjust the height and padding-left in the "eq2Rank" definition as required. It's set to 24px & 26px to add a bit of padding around the image.
• Inside the brackets {}, add the following:
  
  background-image: url(url to your icon)

Add Class Icons:

• You an add the class icons you see in the screen shot but adding this CSS below the basic CSS (above)
  NOTE: class names are no longer capitalized - I tried to keep it as the original, but the XSL script is an older version so it makes capitalizing difficult
  
  

/* Add this if you want class icons included */
.eq2Class { height: 24px; padding-left: 26px; background: left center no-repeat; }
.eq2assassin { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2assassin.gif) }
.eq2beastlord { background-image: url(/GuildFiles/278466/icon_eq2beastlord.gif) }
.eq2berserker { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2berserker.gif) }
.eq2brigand { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2brigand.gif) }
.eq2bruiser { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2bruiser.gif) }
.eq2coercer { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2coercer.gif) }
.eq2conjuror { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2conjuror.gif) }
.eq2defiler { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2defiler.gif) }
.eq2dirge { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2dirge.gif) }
.eq2fury { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2fury.gif) }
.eq2guardian { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2guardian.gif) }
.eq2illusionist { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2illusionist.gif) }
.eq2inquisitor { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2inquisitor.gif) }
.eq2monk { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2monk.gif) }
.eq2mystic { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2mystic.gif) }
.eq2necromancer { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2necromancer.gif) }
.eq2paladin { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2paladin.gif) }
.eq2ranger { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2ranger.gif) }
.eq2shadowknight { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2shadowknight.gif) }
.eq2swashbuckler { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2swashbuckler.gif) }
.eq2templar { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2templar.gif) }
.eq2troubador { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2troubador.gif) }
.eq2warden { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2warden.gif) }
.eq2warlock { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2warlock.gif) }
.eq2wizard { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2wizard.gif) }

Add Tradeskill Icons:

• Add the following CSS if you want to include Tradeskill icons (Artisan & Secondary) as seen in the screenshot.

/* Add this if you want tradeskill icons included */
.eq2ArtisanClass { height: 24px; padding-left: 26px; background: left center no-repeat; }
.eq2unskilled { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2unknown.gif) }
.eq2artisan { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2artisan.gif) }
.eq2scholar { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2scholar.gif) }
.eq2jeweler { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2jeweler.gif) }
.eq2sage { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2sage.gif) }
.eq2alchemist { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2alchemist.gif) }
.eq2craftsman { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2craftsman.gif) }
.eq2provisioner { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2provisioner.gif) }
.eq2woodworker { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2woodworker.gif) }
.eq2carpenter { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2carpenter.gif) }
.eq2outfitter { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2outfitter.gif) }
.eq2armorer { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2armorer.gif) }
.eq2weaponsmith { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2weaponsmith.gif) }
.eq2tailor { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2tailor.gif) }

.eq2Secondary span { text-transform: capitalize; height: 24px; padding-left: 26px; background-position: left center; background-repeat: no-repeat; }
.eq2adorning { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2transmuter.gif) }
.eq2transmuter { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2transmuter.gif) }
.eq2tinkerer { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eq2tinkerer.gif) }

Edit (3/14/2010): Added an "!important" flag to the Basic CSS padding-left. I tested it on this site with full custom CSS, but on other sites this gets overridden.
Edit (5/4/2010): Updated XML/XSL widget images.
Edit (1/20/2012): Updated to work with the new data feed
Edit (2/20/2012): Updated class names (no capitalizations of specific class & tradeskills)
Edit (2/28/2012): corrected eq2roster table id (no caps!) - thanks DJBite!
Edit (8/17/2012): Updated XSL file to include Tinkering and Adorning levels. New css to make the wide column fit better.

I created a new page. added widget. clicked edit. and it asks fot url.

add new url.. but it wont validate.
Widget is stating:

The URL you entered doesn't point to a valid EQ2 XML Roster. Please keep in mind that the XML roster is not the same URL as your guild site on EQ2Players. Please contact SOE support for your guild's XML roster path.

When I click save.

This is the error Screenshot

Thank you very much for this post Mottie. I just became the "IT Officer" of my guild and am trying to get a member list working again. I followed your (very clear) insturctions, but somehow I can't see my guild members.
I get a nice list of the Name, Rank etc. but there is no characters in there.

I did use the %20 in between the space of the guild name (Ascended Heroes) and I do see all the member information on the Sony page:

http://data.soe.com/xml/get/eq2/guild/?name=Ascended%20Heroes&c:resolve=members%28displayname,type.class,type.level,type.race,type.deity,type.gender,guild.rank,guild.status,secondarytradeskills,tradeskills%29

So I use this URL as the XML and

http://www.guildportal.com/GuildFiles/258012/eq2-roster.xsl

as the xsl URL, but unfortunately it's not working.

I am completely new to this, so please bear with me and try to help me out.

Thanx in advance,
Blaide
Ascended Heroes

Hi Mottie,

thank you very much for your fast reply.

This does work. However, the text is not centered as the headings are.
But I guess this has to do with the make up of the actual design.

I have been trying to make it work with you information on the CSS, but I can't get it to work. I have no skill whatsoever, so I probably do it wrong, but I did it as I think I read it.

I create a new widget called "Free Form Text/HTML" and click on edit.
Then I copy / paste the content (both with and without the green text) from above but all it does give me a window with that text visible on the page.
Again, I have no experiance with webpage programming, so I'm sorry if I do something really dumb here

Thanx again for helping me out.

About the tinkering question; I would like to see both the tinkering and adorning, since both disciplines come in handy and it's a good thing if you can look up which of your guildies have that particular skill (level) you need.

I hope to hear from you soon again.

Cheers,
Bite