Champions Online Server Status

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

Hi Cfolds!

You shouldn't need to use this now as I believe GuildPortal added a Champions Online Server Status widget. Also I'm not sure what that error you have there means... are you adding the code into a free form text/HTML widget while in HTML mode?

Hi Cfolds!

To add a Free Form Text/HTML widget:

• Go to Control Panel > Pages & Content
• Now choose a Page under "Current Pages" and click on it
• At the top you will see a [ Add Widget ] button, click it.
• In the upper right you will see a "Search widgets:" box, enter "Free" inside and press Enter on your keyboard
• Now you should see a list with "Free Form Text/HTML", click on the green plus sign under it to "Add to Site"
• Choose a side or the middle (side might be best since it's so small).
• On which page should point to the page you want to add the widget.
• Now name your widget something like "CO Server Status".
• Click on [ Save New Widget ]
• Now you'll be asked if you want to customize the widget, click [ Yes ]
• You should now see the Content Editor. It has the various modes I described before (Design, HTML and Preview)
• Switch the editor to HTML mode
• Select, then copy (Ctrl-C) the code from the original post (this is it again) and paste (Ctrl-V) it into the editor:
  
  <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>
  
  
• Click [ Save ]
• Now go to your guild site and reload the page where you just added this widget.