Aion Server Status

This post will teach you how to add and style your own Aion ServerStatus box. Please note, that this script takes datafrom this web site: http://aionstatus.com/and modifies it slightly so you can add your own styling to it. I don'tknow if writing this script is considered abusing their site, so bewarned this status may stop working at any time.

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 you want. You could also use an embedded page type of content box if you wish.

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

<center><iframe width="195" height="380" src="http://motty.l4rge.com/aion/aion.php?css=aion.css&r=na" scrolling="no" frameborder="0" align="top" allowtransparency="true"/></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

body, table {
 background: #222222;
 color: #dddddd;
 width: 200px;
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 1em;
 margin: 0 auto;
}

a:link, a:visited { color: #ffcc00; text-decoration: none; }
a:hover { color: #dddddd; text-decoration: none; }
a:active { color: #ff0000; text-decoration: none; }

/* Server status overall wrapper */
#container {
 padding-top: 5px;
}

/* Headers: "Login Servers" & "Game Servers" */
#container strong {
 color: #777777;
 text-align: center;
 margin-bottom: 15px;
}

/* Server Status table */
#container table {
 width: 95%;
 margin: 5px 0;
 background-color: #333333;
}

/* Server Status Name */
#container table th {
 font-weight: normal;
 text-align: left;
}

/* Server status flag and icon table cells */
#container table td {
 width: 23px;
}

/* Server up & down icons */
#container .up {
 background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/up.png) center center no-repeat;
 height: 23px;
 padding-left: 23px;
}
#container .down, #container .noauth {
 background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/down.png) center center no-repeat;
 height: 23px;
 padding-left: 23px;
}
.lastcache {
 color: #777777;
 font-size: .55em;
 margin: 0 auto;
 text-align: center;
}

.flag {} /* display: none; <-- add this if you want to hide all the flags */

/**********************
 Server status flags
 **********************/
/* North American flag */
div.NA, div.EA, div.WA {
 background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/NA.gif) center center no-repeat;
 height: 11px;
 padding-left: 23px;
}

/* Flag of Europe */
div.EU {
 background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/EU.gif) center center no-repeat;
 height: 11px;
 padding-left: 23px;
}

/* England flag */
div.EN {
 background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/EN.gif) center center no-repeat;
 height: 11px;
 padding-left: 23px;
}

/* German flag */
div.DE {
 background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/DE.gif) center center no-repeat;
 height: 11px;
 padding-left: 23px;
}

/* French flag */
div.FR {
 background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/FR.gif) center center no-repeat;
 height: 11px;
 padding-left: 23px;
}

/* Austrailian flag */
div.AU {
 background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/AU.gif) center center no-repeat;
 height: 11px;
 padding-left: 23px;
}

• 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 in the CSS is actually the wrapper that 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 "aion.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.l4rge.com/aion/aion.php?css=http://someURL.com/aion.css

Parameters

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

http://motty.l4rge.com/aion/aion.php?css=http://someURL.com/aion.css&r=na&l=t

• Server Region (&r=na)
  
  
  • The portion of the URL with the "&r=" is the region parameter, the following values are valid:
    
    

    code	Region
    &r=na	North America
    &r=e	NA: East
    &r=w	NA: West
    &r=eu	Europe
    &r=en	England
    &r=de	Germany
    &r=fr	France
    &r=au	Austrailia



• Login Server (&l=t) - that's a lower case L.
  
  
  
  • The portion of the URL with the "$l=t" will show the login servers.
  • The "t" stands for true, but you can set the parameter to anything to allow the display of login servers.
  
  
• Events (&e=t)
  
  
  • This section is no longer available
• News (&n=t)
  
  
  This section is no longer available

Edit (9/18/2009): Apparently there is now an Australia server... it was grouped with the north american one for some reason, I split it out and added the flag into the CSS. Also the links at the bottom which were part of the news have a new class which I added in the css called "smallnews", it is hidden because it is the links they have to switch servers around, it breaks with this status.
Edit (9/18/2009) #2: Well they added a couple more timers as well, so I had to change the CSS a bit more: .up and .down are now "#results .up" and ".#results .down". Also added "#eventTable .up"which colors the timer green when the server count down timer is counting up.
Edit (9/22/2009): Apparently, the login servers use noauth.gif as adown arrow instead of down.gif like all the other servers... I addedthis to the CSS.
Edit (10/7/2009): Updated the CSS above with the new layout... almost all the CSS names have changed =( because the original site stopped providing the server status, so I had to switch the script to aionstatus.com - which also does a nice job of providing a server status.

Thank you Mottie for your awesome help.

I messed with this for a couple of hours but cant seem to get it to work properly.
I am trying the aion.css method you describe.

Can you give me sort of a walkthrough using the guild portal tools on how to do this?
I am very new to this and have been tasked with getting our site going.

Our site is here:
http://guildportal.com/Guild.aspx?GuildID=329918&TabID=2763490

My goal is to get the server status on the Home page left side of the page.

Thanks for the help.

Waypoc

Hi Waypoc!

I'm not sure what you meant by using the aion.css method. Are you making your own css for the status?

If you are making a custom CSS, can you post what you have so far? Maybe I can help troubleshoot the problem.

If you aren't using a custom CSS, are you understanding how to add parameters?

• I set up this site to make it easier to get the iframe embed code that you want.
• To copy the code, click in the Embed Code box and select all the data (Ctrl-A)
• Copy it (Ctrl-C) to the clipboard

If you have your iframe code done, do you need to know how to add it to your page?

• Go to Control Panel > Pages & Content > Home > Add Content tab
• Box Title: Server Status
• Type: Free Form Text/HTML
• Side: Left Side
• Click Add
• Now find the Server Status box you just added and click on Edit Content
• Switch the editor to <> HTML mode
• Paste (Ctrl-V) the embed code into the editor
• Click Save
• Reload your Home page

:P... I hope I covered everything!

If you are using your own personal CSS for this, I had to add "#results .noauth"... apparently the login server down icon is different from the other server's down icon.