Champions Online Server Status

GuildPortal admin site link to the original post

This post will teach you how to add and style your own Champions Online server status box. This server status is currently for the US server only - I'm trying to determine if there is also a French and German server or if that is just a language setting.

Server Up	Server Down

The Code

The code below is made to go into a free form text/HTML content box on any page you want. You could also use an embedded page type of content box if you wish, just add the url into the widget..

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

<center><iframe width="160" height="50" src="http://motty.000space.com/champions/status.php?css=co.css" scrolling="auto" 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 two parts: the orange is the base URL that should not change and the green part is the URL to the CSS.
• 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 (more detailed instructions and an example is located further down in these instructions).
• The CSS example below is the "co.css" file (or dark version). You can use any of the other premade css files as follows:
  
  
  • "co.css" - This is the default css (shown below). There is no need to add the green portion to the src:
    
    http://motty.000space.com/champions/status.php
    
    
  • "co-light.css" - This css has the images on a whlte background. Use this as the iframe src:
    
    http://motty.000space.com/champions/status.php?css=co-light.css
    
    
  • "co-text.css" - This css does not use images and only displays the server status text. It has white letters on a black background. Use this as the iframe src:
    
    http://motty.000space.com/champions/status.php?css=co-text.css
    
    
    
  • "co-text-light.css" - This css does not use images and only displays the server status text. It has black text on a white background. Use this as the iframe src:
    
    http://motty.000space.com/champions/status.php?css=co-text-light.css

The CSS (default "co.css" file)

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

/* wraps contents */
.wrapper {
 color: #ddd;
 width: 130px;
 padding: 5px;
 text-align: center;
 margin: 0 auto;
 overflow-x: hidden;
}

/* Server Status text */
.serverStatus .text {
 color: #ddd;
 background: url(server-status.png) no-repeat;
 text-align: center;
 text-indent: -9999em; /* hide text if using images */
 margin: 0 auto;
 height: 20px;
 width: 120px;
}

/* Server Status Up or Down */
.statusUp {
 color: #ddd;
 background: url(server-up.png) no-repeat;
 text-align: center;
 text-indent: -9999em; /* hide text if using images */
 margin: 0 auto;
 height: 20px;
 width: 40px;
}

.statusDown {
 color: #ddd;
 background: url(server-down.png) no-repeat;
 text-align: center;
 text-indent: -9999em; /* hide text if using images */
 margin: 0 auto;
 height: 20px;
 width: 75px;
}

/* Special Notice (if available) */
.notice {
 color: #ddd;
 font-weight: bold;
}

Custom CSS

• 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 .wrapper class in the CSS contains all the data.
• The .serverStatus class contains the text "Server Status" and "Up" or "Down" - hidden in the CSS above by setting a negative text indent. This was done because the images are set to the background and the text would be on top and obscure the images.
• The .serverStatus .text class targets only the "Server Status" text.
• The .statusUp or .statusDown classes are the classes that contain the actual server status text and background image. Again, because the background images are being used, the text is hidden by using a negative text indent.
• The .notice class conatins any special notice that may have been included along with the server status - possibly to inform you of when the server will be back up (I'm only guessing here).
• Modify the .serverUp and .serverDown classes to contain your images for server up and server down respectively.
  
  
  
  • The status images are added as a background, so replace the URL in orange to point to your image.
  • Adjust the height and width of the class to match the size of each image.


• Once you have completed modifying the CSS file, save it to your computer as something like "co.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/champions/status.php?css=http://www.axiomfiles.com/Files/######/co.css