Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Champions Online Server Status
Mottie (MVP) 3/21/2010 2:07 AM EST : Champions Online Server Status
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

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
TopBottom

Cfolds (Guild Admin) 2/7/2011 5:37 PM EST : RE: Champions Online Server Status
Cfolds
Posts: 8
Getting Started!

When i try to add this on guildportal I get an error message of elements missing, how do i fix this?
TopBottom

Mottie (MVP) 2/7/2011 6:00 PM EST : RE: Champions Online Server Status
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

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?
TopBottom

Cfolds (Guild Admin) 2/8/2011 12:14 PM EST : RE: Champions Online Server Status
Cfolds
Posts: 8
Getting Started!

I dont get an option for various modes.  I click on the "Custom HTML & Script" link, then "Boxes, Left Side" and it only gives the option for scripting with required elements, I have no idea how to code that.  Where is the option for basic HTML editing?
TopBottom

Mottie (MVP) 2/19/2011 10:54 AM EST : RE: Champions Online Server Status
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

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

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%