1. Corps du qeel (Template Index_Body)

On va commencer par aller dans les templates, plus précisément dans le template "Index_body" .

Pour cela, on va aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > INDEX_BODY

Puis, il va falloir trouver le "BEGIN disable_viewonline" et le "END disable_viewonline". Normalement, ils sont respectivement aux lignes 173 et 221 du template.

On va remplacer tout ce qu'il y a entre ces deux lignes par :

Code:

<link href='http://fonts.googleapis.com/css?family=Lovers+Quarrel|Reenie+Beanie|Amatic+SC' rel='stylesheet' type='text/css' />
<div class="qeel_box">
  <script type="text/javascript">
        //<!--
                function change_ongletony(name)
                {
                        document.getElementById('ongletony_'+anc_ongletony).className = 'ongletony_0 ongletony';
                        document.getElementById('ongletony_'+name).className = 'ongletony_1 ongletony';
                        document.getElementById('contenu_ongletony_'+anc_ongletony).style.display = 'none';
                        document.getElementById('contenu_ongletony_'+name).style.display = 'block';
                        anc_ongletony = name;
                }
        //-->
  </script>
  <div class="qeel_box_1">
    <div id="totaluser">{TOTAL_USERS}</div>
    <div id="totalpost">{TOTAL_POSTS}</div>
    <div id="newuser" style="margin-top: 10px;">{NEWEST_USER}</div>
    Merci d'être sympathique avec lui/elle
    <script type="text/javascript">
      document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Nous avons/,"Il y a en tout");
      document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/membre enregistré/,"légende inscrite.");
      document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/membres enregistrés/,"légendes inscrites.");
    </script>
    <script type="text/javascript">
      document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/Nos membres ont posté un total de/,"Le nombre total de quêtes est de");     
      document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/message/,"rien");
      document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/messages/,"riens");
      document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/riens/,"");
    </script>
    <script type="text/javascript">
      document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"La nouvelle recrue est");
    </script>
  </div>
  <div class="qeel_box_2">
    <div id="totalonline">{TOTAL_USERS_ONLINE}</div>
    <div id="loggedlist">{LOGGED_IN_USER_LIST}</div>
    <script type="text/javascript">
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Il y a en tout/,"Il y a");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateur en ligne ::/,"utilisateur en ligne :<br />");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateurs en ligne ::/,"utilisateurs en ligne :<br />");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistré/,"inscrit");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistrés/,"inscrits");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invisible/,"caché");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invisiblest/,"cachés");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invité/,"invité");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invités/,"invités");
    </script>
  </div>
  <div class="qeel_box_3">
    <div id="totalconn"><table>{L_CONNECTED_MEMBERS}</table></div>
    <script type="text/javascript">
      document.getElementById('totalconn').innerHTML=document.getElementById('totalconn').innerHTML.replace(/Membres connectés au cours des 24 dernières heures :/,"Utilisateurs connectés ces dernières 24 heures :<br />");
    </script>
  </div>
  <div class="qeel_box_4">
    Qui est avec nous?
  </div>
  <div class="qeel_box_5">
    <span class="ongletony_1 ongletony" id="ongletony_groupe1" onclick="javascript:change_ongletony('groupe1');">Dieux</span>,
    <span class="ongletony_0 ongletony" id="ongletony_groupe2" onclick="javascript:change_ongletony('groupe2');">Dieux-déchus</span>,
    <span class="ongletony_0 ongletony" id="ongletony_groupe3" onclick="javascript:change_ongletony('groupe3');">Demis-dieux</span>,
    <span class="ongletony_0 ongletony" id="ongletony_groupe4" onclick="javascript:change_ongletony('groupe4');">Créatures</span>,
    <span class="ongletony_0 ongletony" id="ongletony_groupe5" onclick="javascript:change_ongletony('groupe5');">Monstres</span>,
    <span class="ongletony_0 ongletony" id="ongletony_groupe6" onclick="javascript:change_ongletony('groupe6');">Sangs Anciens</span>,
    <span class="ongletony_0 ongletony" id="ongletony_groupe7" onclick="javascript:change_ongletony('groupe7');">Divinités Anciennes</span>,
    <span class="ongletony_0 ongletony" id="ongletony_groupe8" onclick="javascript:change_ongletony('groupe8');">Mortels</span>
  </div>
  <div class="qeel_box_6">
    <div class="contenu_ongletony" id="contenu_ongletony_groupe1">
      Description des Dieux
    </div>
    <div class="contenu_ongletony" id="contenu_ongletony_groupe2">
      Description des Dieux-déchus
    </div>
    <div class="contenu_ongletony" id="contenu_ongletony_groupe3">
      Description des Demis-dieux
    </div>
    <div class="contenu_ongletony" id="contenu_ongletony_groupe4">
      Description des Créatures
    </div>
    <div class="contenu_ongletony" id="contenu_ongletony_groupe5">
      Description des Monstres
    </div>
    <div class="contenu_ongletony" id="contenu_ongletony_groupe6">
      Description des Sangs Anciens
    </div>
    <div class="contenu_ongletony" id="contenu_ongletony_groupe7">
      Description des Divinités Anciennes
    </div>
    <div class="contenu_ongletony" id="contenu_ongletony_groupe8">
      Description des Mortels
    </div>
  </div>
  <div class="qeel_box_1 qeel_boxes"></div>
  <div class="qeel_box_2 qeel_boxes"></div>
  <div class="qeel_box_3 qeel_boxes"></div>
  <div class="qeel_box_6 qeel_boxes"></div>
</div>
<script type="text/javascript">
        //<!--
                var anc_ongletony = 'groupe1';
                change_ongletony(anc_ongletony);
        //-->
</script>

2. Mise en forme (CSS)

Si ti regardes ton qeel, tu remarques sans doute que ce n'est pas très esthétique pour le moment. Du coup, on va mettre en forme le qeel à l'aide du CSS.

Pour cela, on va aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, on va ajouter le CSS suivant :

Code:

/************************************************** QEEL **************************************************/
/*Fond du qeel*/
.qeel_box {
  position: relative;
  width: 800px;
  height: 400px;
  background: url('http://www.zupimages.net/up/14/36/bqy7.png');
  font-size: 18px;
  font-family: Amatic Sc;
  color: black;
  text-align: center;
}

/*Bloc du nombre total d'utilisateurs, de posts et du dernier utilisateur inscrit*/
.qeel_box_1 {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 10px;
  width: 300px;
  height: 105px;
  z-index: 2;
}

/*Bloc du nombre d'utilisateurs en ligne et connectés*/
.qeel_box_2 {
  position: absolute;
  top: 150px;
  left: 10px;
  padding: 10px;
  width: 300px;
  height: 95px;
  z-index: 2;
}
/*Bloc du nombre d'utilisateurs connectés*/
#loggedlist {
  overflow: auto;
  margin-top: 5px;
  height: 50px;
}

/*Bloc du nombre de personnes connectés au cours des 24 dernières heures*/
.qeel_box_3 {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 300px;
  height: 90px;
  padding: 10px;
  z-index: 2;
}
/*Intérieur du bloc*/
.qeel_box_3 td.row1 {
  padding: 0px;
  display: block;
  margin-top: -5px;
  width: 300px;
  height: 95px;
  overflow: auto;
  background: transparent;
  font-size: 16px;
  font-family: Amatic Sc;
  text-align: center;
  color: black;
}
/*Écriture du bloc*/
.qeel_box_3 td.row1 span.gensmall {
  display: block;
  font-size: 18px;
  font-family: Amatic Sc;
  color: black;
}

/*Bloc du titre QUI EST AVEC NOUS?*/
.qeel_box_4 {
  position: absolute;
  display: inline-block;
  top: 5px;
  right: 20px;
  height: 54px;
  font-family: reenie beanie;
  font-size: 54px;
  color: #b90000;
  font-weight: bold;
  text-align: right;
  border-bottom: 2px solid #b90000;
  z-index: 2;
}

/*Bloc des groupes*/
.qeel_box_5 {
  position: absolute;
  right: 10px;
  top: 80px;
  width: 450px;
  color: white;
  font-family: lovers quarrel;
  font-size: 28px;
  z-index: 2;
}
/*Écriture des groupes*/
.ongletony, .ongletony_0, .ongletony_1 {
  font-weight: bold;
  cursor: default;
  text-shadow: 0px 0px 3px black;
}
/*Écriture des groupes sélectionnés ou au survol*/
.ongletony_0:hover, .ongletony_1 {
  text-shadow: 0px 0px 3px white;
}
/*Groupe 1*/
#ongletony_groupe1 {
  color: #990654;
}
/*Groupe 2*/
#ongletony_groupe2 {
  color: #50078F;
}
/*Groupe 3*/
#ongletony_groupe3 {
  color: #0088FF;
}
/*Groupe 4*/
#ongletony_groupe4 {
  color: #0FC27A;
}
/*Groupe 5*/
#ongletony_groupe5 {
  color: #B32B2B;
}
/*Groupe 6*/
#ongletony_groupe6 {
  color: #155A80;
}
/*Groupe 7*/
#ongletony_groupe7 {
  color: #000CF0;
}
/*Groupe 8*/
#ongletony_groupe8 {
  color: #E685B1;
}

/*Bloc de description de groupe*/
.qeel_box_6 {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 10px;
  width: 420px;
  height: 200px;
  z-index: 2;
}
/*Contenu de description de groupe*/
.contenu_ongletony {
  width: 420px;
  height: 200px;
  overflow: auto;
  display: none;
}

/*Bulles transparentes sous les blocs.*/
.qeel_boxes {
  background: white;
  border: 1px solid black;
  text-align: center;
  border-radius: 30px;
  opacity: 0.5;
  filter: alpha(opacity=50);
  z-index: 1;
}

/************************************************** FIN DU QEEL **************************************************/

Et voilà, c'est tout ^^