Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : EQ2 > Add EQ2 Roster Using XML/XSL
Mottie (SuperAdmin) 3/13/2010 5:26 PM EST : Add EQ2 Roster Using XML/XSL
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

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:
  • 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.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 8/17/2012 12:04 PM EST : RE: Add EQ2 Roster Using XML/XSL
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Split the secondary column into Tinkering and Adorning... check it out!
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%