WoW Server Status

This post will teach you how to add and style your own World of WarcraftServer Status box (both US and EU servers). Please note, that this script takes data from the warcraft server status feedsite: http://www.worldofwarcraft.com/realmstatus/status.xml (US servers) and http://www.wow-europe.com/realmstatus/index.xml (EU servers). It then formats it so you can add your own styling to it.

I now have mirror sites at motty.000space.com, motty.heliohost.org and motty.l4rge.com that will make this set up a lot easier.



The Code

The code below is made to go into a free form text/HTML content box on any page youwant. You could also use an embedded page type of content box if youwish.

Copy (Ctrl-C) the code below and paste it (Ctrl-V), while in HTML mode, into a editor.

<center><iframe width="225" height="120" src="http://motty.000space.com/wow/wow.php?css=wow.css&n=Aegwynn" scrolling="no" frameborder="0" align="top" allowtransparency="true"></iframe></center>

<center><iframe width="225" height="120" src="http://motty.000space.com/wow/wow-eu.php?css=wow.css&n=Aerie%20Peak" scrolling="no" frameborder="0" align="top" allowtransparency="true"></iframe></center>

Customizing

Notes

• If you look at the code above you'll see it's just an iframe.
• Adjust the width and height of the frame by modifying the values in red.
• The URL is broken into several parts: the first green part is the base URL that should not change and the orange part is the URL to the CSS, the rest of the parameters will be explained below.
• The CSS I made is located in the same directory as the script, but if you want to modify and add your own styling for this status box you'll need to include the full URL to your CSS file.

The CSS

/* Overall page */
body {
 background-color: #222;
 color: #ddd;
 margin: 0 auto;
 font-family: Verdana, Helvetica, sans-serif;
 text-align: center;
}

/* Table containing the data */
.container {
 background: #333;
 color: #ddd;
 width: 175px;
 padding: 5px;
 text-align: left;
}
.container td {
 text-align: center;
}

/* Server Name */
.name {
 color: #fff;
 font-weight: bold;
}

/* Server Up or Down */
.up {
 background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/up.png) center center no-repeat;
 height: 23px;
 padding-left: 25px;
}
.down {
 background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/down.png) center center no-repeat;
 height: 23px;
 padding-left: 25px;
}
.image { text-align: right; }

/* Server Load */
.low { color: #00ff00; }
.medium { color: #ff8000; }
.high { color: #ff0000; }
.max { color: #400080; }

/* Server Type */
.pve { color: #00ff00; }
.pvp { color: #ff0000; }
.rp { color: #fff000; }
.rppve { color: #008080; }
.rppvp { color: #ff8000; }
.paren { } /* add "display: none;" to hide the parenthesis around the server type */

/* Que is only seen on European servers */
.que { color: #888; }
.que img {  /* CSS for the image, if you decide to replace the que text with an image */
 vertical-align: middle;
 border: 0;
}

/* Last Cache Message @ bottom */
.lastcache { font-size: .5em; }

• Copy (Ctrl-C) the above CSS and paste it (Ctrl-V) into your non-rich text editor.
• Modify the background color and text color to match your site.... the #container class contains all the data.
• I tried to label the CSS classes in the code above, if you are going to modify the CSS, I'd recommend saving the display page as you want it to your computer, then put the CSS file in the same location. That way you won't have to wait for the server reload everytime.
• For the status icons (up and down) and the flag icons, follow these directions:
  
  
  
  • The images are added as a background, so replace the URL in orange to point to your image.
  • Adjust the height to match the height of your image (in red)
  • Adjust the padding-left to match the width (in red, plus a little extra for padding) of your image.


• Once you have completed modifying the CSS file, save it to your computer as something like "wow.css"
• Upload you CSS file to your file manager
• Modify the URL of the iframe code above to point to your newly uploaded CSS file:
  
  http://motty.000space.com/wow/wow.php?css=http://someURL.com/wow.css
  

Parameters

You can specify what information to display by modifying the parameters of the URL:

http://motty.000space.com/wow/wow.php?css=wow.css&n=Blade's Edge&t=t&l=t&f=1

• Server Name (&n=Blade's Edge)
  
  
  • The portion of the URL with the "&s=" is the server name parameter
  • For the US servers: There is no need to replace the spaces or apostrophes in the server name (see example above).
  • For the EU servers: You will need to "escape" or convert the code so the browser won't mess it up. The reason this is different is because some of the European servers use special characters. It might be best to use one of the sites I made (000space.com) to help with this process.
    
    So the server named "Confrérie du Thorium" needs to be converted to "Confr%C3%A9rie%20du%20Thorium", or this Russian server
    
     "Пиратская бухта" needs to be converted to "%D0%9F%D0%B8%D1%80%D0%B0%D1%82%D1%81%D0%BA%D0%B0%D1%8F%20%D0%B1%D1%83%D1%85%D1%82%D0%B0"


• Server Type (&t=t)
  
  
  
  • The portion of the URL with the "&t=t" will hide the server type (PvE, PvP, RP, RPPvE or RPPvP).
  • The "t" stands for true, but you can set the parameter to anything to allow the display of the server type.
  
  
• Server Load (&l=t) - that's a lower case L.
  
  
  • The portion of the URL with the "&l=t" will hide the server load ( US: Low, Medium, High or Max or EU: Full (queued) ).
  • The "t" stands for true, but you can set the parameter to anything to allow the display of the server location.

• Display Format (&f=1)
  
  
  • The portion of the URL with the "&f=1" will tell the script which format you want to display. There are four formats described below.
  • The "1" is the selected & default format. If you leave out this parameter, it will default to format 1.
  • The table below shows how the four formats appear. You can also hover over the selectors to see an example (on the server status site)
    
    

    Format 1	Format 2	Format 3	Format 4
    Name (Type) Load/Que	Name (Type)  Load/Que	Name (Type) Load/Que	Name   Load/Que (Type)

• Server Que (&q=+)
  
  
  • The portion of the URL with the "&q=+" only applies to the European servers. The que status will only show along with the server load. These servers only seem to have the load showing as "Full" or "Recommended". So if the server is "Full" and if it is queued this code will add a by default, so you'll end up seeing "Full+".
  • The "+" is the default symbol, but by setting this parameter, you can change the symbol to whatever you want including text or HTML (like <img src="http://www.mysite.com/myimage.gif">
  • You can also set the styling for this symbol in the CSS (the .que class).