• Go to Control Panel > Pages & Content > (pick a page to add this widget)
• In the right panel, click "Add Widget"
• Now enter:
  
  Title: "EQ 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 ]

• Open a new tab/browser window and Go to your Guild Roster page at http://eqplayers.station.sony.com/
• Get the URL to your guild roster XML Feed (right click on the link and copy the URL)
  
  

• 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:
  
  
  
  

  XML Source:  XML Url:

  Choose "Remote File" (Add the XML feed of your guild roster from the eqplayers site)

• Click the XSL Source tab and enter the following:
  
  
  
  

  XML Source XSL Url:

  Choose "Remote File" http://www.axiomfiles.com/Files/258012/eq-roster.xsl

• Click the [ Save Changes ] button

• 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

• 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 .eqLevel)

/* EQ Roster CSS */
#eqroster 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;
}
#eqroster th.headerSortUp { background: #400000 url(http://www.axiomfiles.com/Files/278466/sort-asc-white.gif) left center no-repeat; }
#eqroster th.headerSortDown { background: #804000 url(http://www.axiomfiles.com/Files/278466/sort-desc-white.gif) left center no-repeat; }

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

/* Roster table columns */
.eqName {}
.eqRank {}
.eqLevel { text-align: center; width: 3em; }
.eqClass {}
.eqLastPlayed {}

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

If your rank names are set up as follows: "Leader", "Officer", "Member", "Alts", etc. Then use the rank name with an "eq" in front and keep the capital letters, like this:

.eqRank { height: 24px; padding-left: 26px; background: left center no-repeat; }
.eqLeader {}
.eqOfficer {}
.eqMember {}
.eqAlts {}

If you have rank names with a space, lets say ranks like this: "Big Daddy", "Council Of Leaders", "Subjects", "Peons", etc. Then add the "eq" in front and remove the spaces.

.eqRank { height: 24px; padding-left: 26px; background: left center no-repeat; }
.eqBigDaddy {}
.eqCouncilOfLeaders {}
.eqSubjects {}
.eqPeons {}

• 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 "eqRank" 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)

• You an add the class icons you see in the screen shot but adding this CSS below the basic CSS (above)

/* Add this if you want class icons included */
.eqClass { height: 24px; padding-left: 26px; background: left center no-repeat; }
.eqBerserker { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eqberserker.gif) }
.eqMonk { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eqmonk.gif) }
.eqRogue { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eqrogue.gif) }
.eqWarrior { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eqwarrior.gif) }
.eqCleric { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eqcleric.gif) }
.eqDruid { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eqdruid.gif) }
.eqShaman { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eqshaman.gif) }
.eqEnchanter { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eqenchanter.gif) }
.eqMagician { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eqmagician.gif) }
.eqNecromancer { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eqnecromancer.gif) }
.eqWizard { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eqwizard.gif) }
.eqBard { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eqbard.gif) }
.eqBeastlord { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eqbeastlord.gif) }
.eqPaladin { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eqpaladin.gif) }
.eqRanger { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eqranger.gif) }
.eqShadowKnight { background-image: url(http://www.axiomfiles.com/Files/278466/icon_eqshadowknight.gif) }