Tutorial Top 5 Highscore Box ZnoteACC

[Alex]

Hola a todos,

Aqui encontraran como anadir el Top 5 Highscore en un tibia layout, digo tibia layout porqué asi hé configurado el CSS y HTML,
Ahora bien el que tenga conocimientos, podreis utilizarlo en cualquier pagina web en cualquier sitio.

Requisitos:

• Modificacion CSS
• Modificacion HTML y PHP

Dificultad: Facil

Buscaremos primeramente por el fichero layout/styles/basic.css

Insertaremos dentro lo siguiente ( por ejemplo, al principio deberia de salir body { , encima de este le dais un intro y pegais el codigo, manteniendo un espacio entre cada parrafo.)

.HighscoreBox {
  position: relative;
  margin-bottom: 10px;
  top: 140px;
  width: 180px;
  height: 265px;
}

Iremos en nuestra carpeta web, buscaremos en layout/ el fichero rightside.php,

Si ya lo teneis, pero esta mal estructurado, buscareis por una linea que empieza por:

<?php
            $cache = new Cache('engine/cache/topPlayer');

Aqui es el principio del codigo PHP, y este codigo esta dentro de unos <div class=""> Que es lo que forman el contenido de la ' Box '.

Entonces, al principio del script, veran que es el Pedestal, donde aparece el monstruo en Gif.
Justo debajo veran un <div class="ThemeBox">
Debajo del ThemeBox, le daran un intro para introducir este codigo:

<div id="HighscoreBox" class="HighscoreBox" style="background-image:url(layout/images/global/themeboxes/current-poll/bk_themebox8.png);">
<br><br><div class="container" style="position:absolute;left:-9px;color:yellow">

    <?php
            $cache = new Cache('engine/cache/topPlayer');
            if ($cache->hasExpired()) {
                $players = mysql_select_multi('SELECT `name`, `level`, `experience`, `looktype`, `lookaddons`, `lookhead`, `lookbody`, `looklegs`, `lookfeet` FROM `players` WHERE `group_id` < ' . $config['highscore']['ignoreGroupId'] . ' ORDER BY `experience` DESC LIMIT 5;');
                $cache->setContent($players);
                $cache->save();
            } else {
                $players = $cache->load();
            }
            if ($players) {
            $count = 1;
            foreach($players as $player) {
            echo '<img style="margin-top: -35px; margin-left: -35px;" src="https://lepiigortv.com/animatedoutfits/animoutfit.php?id='.$player['looktype'].'&addons='.$player['lookaddons'].'&head='.$player['lookhead'].'&body='.$player['lookbody'].'&legs='.$player['looklegs'].'&feet='.$player['lookfeet'].'&g=0&h=3&i=1"></img> <a href="characterprofile.php?name='.$player['name'].'" style="color:orange">'.$player['name'].'&ensp;</a><strong>'. $player['level'].'</strong><br>';
           $count++;
            }
            }
            ?>
        </div>
            </div>

La imagen que pondran de fondo para la Box: background-image:url(layout/images/global/themeboxes/current-poll/bk_themebox8.png
Deberan de poner la imagen que ustedes utilizaran, en este caso es como un server Path, basta entrar en layout/images y poner la imagen en donde desean y darle el path de esa imagen acabando por la extension.

El link de los animated outfits va directamente a lepiigortv.com, podreis cambiarlo si hosteais vosotros mismos los outfits.
El margin-top y margin-left, puede ser retocado, en el caso que se vayen demasiado los outfits hacia la izquierda o demasiados altos/bajos.

Pueden cambiarle el color del texto, mirar sobre el final del script ' color: orange '