Qui est en ligne | Noir et blanc

Qui est en ligne réalisé suite à la demande de Cecile362.
Les couleurs sont modifiables, merci de ne pas retirer le crédit. Le code a été fait avec la version de forum phpBB2

Voici un aperçu :

lien direct : www

Dans le template index-body, remplacer les lignes 173 à 221 par :

Code:

<!-- BEGIN disable_viewonline -->
<table width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
    <td>
<!-- TITRE -->
      <div class="titreQEEL">
        <a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
      </div>
      <div class="QEEL">
<!-- 24H -->
        <div class="dernierQEEL"><table>{L_CONNECTED_MEMBERS}</table>
        </div>
        <div class="GroupeQEEL">
          <div id="groupe">
            <div class="h3">Les Groupes</div>
            <div class="ha">
              <div class="square d1"><span>INTJ</span></div>
              <div class="square d2"><span>INTP</span></div>
              <div class="square d3"><span>ENTJ</span></div>
              <div class="square d4" ><span>ENTP</span></div>
              <div class="square d5 "><span>INFJ</span></div>
              <div class="square d6"><span>INFP</span></div>
              <div class="square d7 "><span>ENFJ</span></div>
              <div class="square d8 "><span>ENFP</span></div>
              <div class="square d9"><span>ISTJ</span></div>
              <div class="square d10"><span>ISFJ</span></div>
              <div class="square d11"><span>ESTJ</span></div>
              <div class="square d12"><span>ESFJ</span></div>
              <div class="square d13"><span>ISTP</span></div>
              <div class="square d14"><span>ISFP</span></div>
              <div class="square d15"><span>ESTP</span></div>
              <div class="square d16 "><span>ESFP</span></div>
            </div>
          </div>
        </div>
<!-- MESSAGES / MEMBRES / CONNECTES / DERNIER INSCRIT -->
        <div class="boxQEEL">
  <!-- TOTAL UTILISATEURS CONNECTES -->
          <span id="UsersOnline">{TOTAL_USERS_ONLINE}</span>
          <script type="text/javascript">document.getElementById('UsersOnline').innerHTML=document.getElementById('UsersOnline').innerHTML.replace(/Il y a en tout/,"");</script>
          <div class="boxQEEL">
<!-- TOTAL MESSAGES -->
            <div class="TotalPosts">
              <span id="tPOSTS"><b>{TOTAL_POSTS}</b></span>
              <script type="text/javascript">document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/Nos membres ont posté un total de /," "); document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/messages/," ");</script> messages
            </div>
<!-- TOTAL MEMBRES -->
            <div class="TotalUsers">
              <span id="tUSERS"><b>{TOTAL_USERS}</b></span>
              <script type="text/javascript">document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/Nous avons /," "); document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/membres enregistrés/," "); document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/membre enregistré/," ");</script> membres
            </div>
          </div>
<!-- MEMBRES CONNECTES -->
          <div class="online" id="onLINE">
            <table>{LOGGED_IN_USERS_LIST}</table>
          </div>
<!-- DERNIER UTILISATEUR ENREGISTRE -->
          <div class="lstQEEL">New Player :
            <span id="nUSER">{NEWEST_USER}</span>
            <script type="text/javascript">document.getElementById('nUSER').innerHTML=document.getElementById('nUSER').innerHTML.replace(/L'utilisateur enregistré le plus récent est /," ")</script>
          </div>
          <div class="creditQEEL">CREDITS : QEEL réalisé par Nemalus</div>
        </div>
      </div>
      <div class="FinQEEL"></div>
    </td>
  </tr>
</table>
<!-- END disable_viewonline -->

Dans la feuille de style (CSS) ajouter le code :

Code:

/****************************************
   QEEL par Nemalus sur Never-Utopia
   (Amphibole sur Exquisite
    Nemalus sur Cap-RPG
    Andramas sur Somewhere)
*****************************************/
/* BLOC TITRE QEEL */
.titreQEEL {
margin:auto;
width:900px; height:55px; padding-top:40px;
background:#000;  /* MODIFIABLE */
font-family:Oswald; letter-spacing:2px; text-transform:uppercase; text-align:right; color:#fff;
}
/* TITRE QEEL */
.titreQEEL a{
font-size:40px; padding-right:35px;
color:white; text-shadow:1px 1px 0 #cad78e; /* MODIFIABLE */
}
/* QEEL */
.QEEL {
margin:auto; width:900px; text-align:center; background:#fff; padding:12px 0;
}
/* 24H QEEL */
.dernierQEEL {
display:inline-block; vertical-align:top; margin:0 10px;
width:200px; height:300px; padding:5px; overflow:auto;
font-size:12px; text-align:justify;
background:#dedede;; /* MODIFIABLE */
}
.dernierQEEL .row1 {
background:none; padding:0 !important;
}
/* COULEUR TEXTE 24H QEEL */
.dernierQEEL .gensmall {
font-size:12px; color:black; /* MODIFIABLE */
}
/* Groupe QEEL */
.GroupeQEEL {
display:inline-block; vertical-align:top; margin:0 10px;
width:250px; padding:5px;
font-size:12px; text-align:justify;
}
#groupe .h3{
  margin:-5px -5px 5px;
  color:black;
  font:20px oswald;
  text-transform:uppercase;
  padding:10px 0;
  border-bottom:3px solid #333;
}
#groupe .square span{
  font:8px arial narrow;
  text-transform:uppercase;
  letter-spacing:1px;
  background:#333;
  text-shadow:1px 1px 0px black;
  color:#efefef;
  display:block;
  width:50px;
  padding:4px 0;
  -webkit-transition:ease-in-out 0.5s;
  transition:ease-in-out 0.5s;
  position:relative;
  left:50px;
}
#groupe a{color:transparent;text-decoration:none;}
#groupe{text-align:center;width:250px;margin: 0 auto;background:rgba(0,0,0,0.05);padding:5px 5px 0;}
#groupe .square{
  width:50px;
  height:50px;
  box-sizing:border-box;
  padding-top:17px;
  text-align:center;
  display:inline-block;
  vertical-align:top;
  overflow:hidden;
  margin-bottom:5px;
}
#groupe .square:nth-child(odd){
  margin-right:5px;
}
#groupe .square:hover span{
  left:0px;
}
/* COULEURS DES GROUPES */
#groupe .d1{background:#B891C4;}
#groupe .d2{background:#B36A8E;}
#groupe .d3{background:#80405C;}
#groupe .d4{background:#917277;}
#groupe .d5{background:#9AC59A;}
#groupe .d6{background:#ADC56B;}
#groupe .d7{background:#7F9D58;}
#groupe .d8{background:#698D4D;}
#groupe .d9{background:#90E7E5;}
#groupe .d10{background:#A7BCC7;}
#groupe .d11{background:#5CC7C8;}
#groupe .d12{background:#5DAFE6;}
#groupe .d13{background:#CB4C3B;}
#groupe .d14{background:#A20812;}
#groupe .d15{background:#E17257;}
#groupe .d16{background:#DD2B45;}

/* BLOC POSITIONNEMENT */
.boxQEEL {
display:inline-block; vertical-align:top;
}
/* TOTAL MESSAGES QEEL */
.TotalPosts {
margin-bottom:10px;
width:120px; height:50px; padding-top:13px;
text-align:center; font-size:16px; line-height:normal;
background:#dedede; color:black; /* MODIFIABLE */
}
/* TOTAL MEMBRES QEEL */
.TotalUsers {
width:120px; height:50px; padding-top:13px;
text-align:center; font-size:16px; line-height:normal;
background:#dedede; color:black; /* MODIFIABLE */
}
/* MEMBRES CONNECTES */
.online {
display:inline-block; vertical-align:top; margin-left:10px;
width:235px; height:120px; padding:10px; overflow:auto;
font-size:12px; text-align:justify;
background:#dedede;; color:black; /* MODIFIABLE */
}
/* DERNIER UTILISATEUR ENREGISTRE QEEL */
.lstQEEL {
margin-top:10px;
width:385px; height:40px; padding-top:20px;
background:#dedede;; color:white; /* MODIFIABLE */
text-align:center; font-size:18px;
}
/* NOMBRE UTILISATEURS EN LIGNE */
#UsersOnline {
display:block; margin-top:10px;
width:385px; height:15px; padding:5px 0;
font-size:11px; text-align:center;
background:white; color:black; /* MODIFIABLE */
}
/* CREDITS */
.creditQEEL {
margin-top:10px;
width:385px; height:40px; padding-top:20px;
color:black;font-family:Oswald;text-transform:Uppercase; text-align:left; /* MODIFIABLE */
text-align:center; font-size:18px; font-style:italic;text-shadow:1px 1px 0 #dedede;
}
/* BLOC FIN QEEL */
.FinQEEL {
margin:auto;
width:900px; height:35px; padding-top:40px;
background:#000;  /* MODIFIABLE */
}