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

0
Like

0
Dislike

Add EQ Roster Using XML/XSL

GuildPortal admin site link to the original post

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



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: "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 ]

Set up the 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
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 .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 {}

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

Add Class Icons:

  • 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) }
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
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%