Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Server Status > Aion Server Status
Mottie (SuperAdmin) 9/17/2009 8:18 PM EST : Aion Server Status
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Aion Server Status

GuildPortal admin site link to the original post

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.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%