Warhammer Server Status

This is a quick post on how to add a Warhammer Server Status box to your page.

The official server status page is here. There is no easy way to extract the data without having your own website with specialized scripts. I found another web hosting site that has provided this status box that is free for all to use. You can find it here. It generates the HTML you can paste directly into a free form text/HTML box (make sure you're in HTML mode () or right click and "Paste As Html" in the editor)

Here is the standard look of the server status box and the generated HTML from the site. Just get this script if you want to keep this appearance.

<span id='myguildhostwh'><a href='http://www.myguildhost.com/'>guild hosting</a> provided by MyGuildHost.com</span><script src="http://myguildhost.com/rs/wh.php?realm=Avelorn" type="text/javascript"></script>

*Note: If you need Be'lakor's serverstatus, use the script below... it seems the site messes up the HTMLfor this server (it gives you "realm=Be" instead of "realm=Be'lakor").

But, if you are like me and not happy unless you can customize it to your own liking, then you'll be happy to know that I was able to extract the data from this script so as to allow you to modify the look! Here is the basic look that I came up with:



You can modify the CSS to whatever background image you wish to use and style the text. Get the generated code from their site and replace the HTML below in purple.

The Code

<center><div id="WHSS" style="display:none;">

<span id='myguildhostwh'><a href='http://www.myguildhost.com/'>guild hosting</a> provided by MyGuildHost.com</span><script src="http://myguildhost.com/rs/wh.php?realm=Be'lakor" type="text/javascript"></script>

</div></center>
<style type="text/css">
#WHSS { background: #000000; width: 80px; }
.serverOnlineImage { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wh-server-online.gif) no-repeat; height:24px; }
.serverOfflineImage { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wh-server-offline.gif) no-repeat; height:24px; }
.serverText { color: #ffffff; padding-top: 3px; padding-left: 25px; font-size: 14px; font-weight: bold; font-family: Trebuchet MS,Verdana,Arial;}
</style>
<script type="text/javascript">
$(document).ready(function() {
 var whstatus = ($("#WHSS").find("div").css("background-image").match("online")) ? "serverOnlineImage" : "serverOfflineImage";
 var whsn = $("#WHSS").find("div:eq(1)").html();
 $("#WHSS").find("div:eq(0)").attr("style","").addClass(whstatus).addClass("serverText").html(whsn);
 $("#WHSS").css("align","center").css("display","");
});
</script>

Customizing

• Update the HTML in purple from the web site.
  
  
• Change the style of the server status box by modifying the following CSS.
  
  #WHSS { background: #000000; width: 80px; }
  
  
• The server status image is set as a background image
  
  
• Online:

  .serverOnlineImage { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wh-server-online.gif) no-repeat; height:24px; }

  
  
• Offline:
  

  .serverOfflineImage { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wh-server-offline.gif) no-repeat; height:24px; }

• The Server text uses this CSS
  
  .serverText { color: #ffffff; padding-top: 3px; padding-left: 25px; font-size: 14px; font-weight: bold; font-family: Trebuchet MS,Verdana,Arial;}
  
  
• Set the text color by changing the blue text
  
  
• The padding-top is set to 3px to center the text vertically with the image. Adjust it as needed.
  
  
• The padding-left is set to 25px which is slightly larger than the background image... it shifts it to the right so the text doesn't overlap the image.