Hier klicken, um das LOTRO Server Status Widget live zu erleben.
Fügt folgenden Code, an der Stelle an dem das LOTRO Server Status Widget erscheinen soll, in eure Webseite ein.
- Code: Alles auswählen
<script type="text/javascript" src="http://lux-hdro.de/serverstatus-widget.php"></script>
Ihr könnt einzelne CSS-Klassen des LOTRO Server Status Widgets mittels Style-Tag hinter dem Script-Tag verändern. Im folgenden Beispiel wird gezeigt, wie ihr das Icon für Server 'offen' durch euer eigenes Icon ersetzt.
- Code: Alles auswählen
<script type="text/javascript" src="http://lux-hdro.de/serverstatus-widget.php"></script>
<style type="text/css">
.lotroServeroffen {
background-image: url(dein-icon.png);
}
</style>
Hier eine Liste der verfügbaren CSS-Klassen, die verändert werden können.
- Code: Alles auswählen
.lotroContainer {
border:1px solid #620D0D;
margin:0 auto;
width:170px;
background-color:#000000;
font-family:Verdana;
}
.lotroStatusTitle {
font-size:14px;
font-weight:bold;
background-color:#620D0D;
padding:5px;
text-align:center;
color:#D69A4A;
}
.lotroServerListItem {
padding:2px;
width: 125px;
margin-left:20px;
background-repeat:no-repeat;
background-position:right center;
font-weight:bold;
font-size:12px;
}
.lotroServeroffen {
background-image:url (images/server_up.png);
color:#D3A39B;
}
.lotroServerzu {
background-image:url (images/server_down.png);
color:#D3A39B;
}
.lotroFooter {
font-size:9px;
color:#D69A4A;
padding:3px;
text-align: center;
}
Unten stehendes Beispiel zeigt das ausgegebene HTML. Im Beispiel ist ein Server 'offen' und ein weiterer 'geschlossen'.
- Code: Alles auswählen
<div class="lotroContainer">
<div class="lotroStatusTitle">LOTRO Server Status</div>
<div class="lotroServerListItem lotroServeroffen">Belegaer</div>
<div class="lotroServerListItem lotroServerzu">Morthond</div>
<div class="lotroFooter">Update: [TimeStamp]</div>
</div>
Fragen zum Einbau des LOTRO Server Status Widget bitte hier im Thread.
