Mit dem Update auf 2.01.010 gibt es ja einen Fortschrittbalken für die Dungeon-Besuchszeit.
Wenn Du einen Skin erstellt hast und den Fortschrittsbalken einblenden möchtest, musst Du die skin.css ergänzen.
Und zwar um:
* Einfacher Fortschrittsbalken (ohne Grafik)
/**********************************************************************
* Progress bar
**********************************************************************/
.progressBar_container {
position: relative;
text-align: center;
width: 500px;
height: 32px;
border: 1px black solid;
display: block;
}
.progressBar_black-on-white {
height: 32px;
color: black;
background-color: #cccccc;
}
.progressBar_white-on-black {
height: 32px;
color: white;
background-color: #444444;
}
.progressBar_wrapper {
width: 0%; /* matches percent completed - e.g. width: 5% = 5% completed */
overflow: hidden;
position: absolute;
top: 0; left: 0;
}
.progressBar_black-on-white {
width: 100%;
padding-top: 5px;
height: 27px;
}
.progressBar_white-on-black {
width: 500px;
padding-top: 5px;
height: 27px;
|
Oder mit Grafiken - da werden zwei Grafiken images/progressbar1.jpg und images/progressbar2.jpg benötigt, die jeweils den kompletten Fortschrittsbalken darstellen (einmal mit Fortschritt 100% und einmal Fortschritt 0%):
/**********************************************************************
* Progress bar
**********************************************************************/
.progressBar_container {
position: relative;
text-align: center;
width: 500px;
height: 32px;
display: block;
}
.progressBar_black-on-white {
height: 32px;
color: white;
background-color: #999999;
background: url(images/progressbar_2.jpg) right;
}
.progressBar_white-on-black {
height: 32px;
color: white;
background-color: #b17320;
background: url(images/progressbar_1.jpg);
}
.progressBar_wrapper {
width: 0%; /* matches percent completed - e.g. width: 5% = 5% completed */
overflow: hidden;
position: absolute;
top: 0; left: 0;
}
.progressBar_black-on-white {
width: 100%;
padding-top: 5px;
height: 27px;
}
.progressBar_white-on-black {
width: 500px;
padding-top: 5px;
height: 27px;
}
|
Hier ein Beispiel-HTML-Code, wie er von
WoD verwendet wird (der Fortschritt liegt bei 31%):
<div id="progressBar1_bar" class="progressBar_wrapper" style="width: 31%">
<div class="progressBar_white-on-black">
<span id="progressBar1_txt1">Ihr seid auf dem Weg in den Kampf. Der Kampf ist beendet in: <span id="progressBar1_time1">07:10:56</span></span>
<span id="progressBar1_done1" class="hidden">Der Kampf ist beendet. Die Berichte findest du <a href="/wod/spiel/dungeon/report.php">hier</a>.</span>
</div>
</div>
<div class="progressBar_black-on-white">
<span id="progressBar1_txt2">Ihr seid auf dem Weg in den Kampf. Der Kampf ist beendet in: <span id="progressBar1_time2">07:10:56</span></span>
<span id="progressBar1_done2" class="hidden">Der Kampf ist beendet. Die Berichte findest du <a href="/wod/spiel/dungeon/report.php">hier</a>.</span>
</div>
</div>
|
Die Grafiken, die aktuell auf dem Skin-Server liegen, werden vor dem Update noch durch schönere ersetzt werden:
http://skins.neise-games.de/skins/unzip ... sbar_1.jpg
http://skins.neise-games.de/skins/unzip ... sbar_2.jpg
Wenn Dir was unklar ist, warte vielleicht am besten, bis das Update eingespielt ist. Ich peile da die nächste Woche an (ist aber noch nicht klar, ob das klappt).
Ciao,
Christian
