Ce code a été fait pour phpbb2

HTML

A mettre donc dans le template index_body entre

Code:

<!-- BEGIN disable_viewonline -->

et

Code:

<!-- END disable_viewonline -->

Le voici :

Code:

<div class="qeeltotal">
  <div class="qeelhaut">
    <div class="qeelphotos">
        <h1>Qui se cache à Hilton ?</h1>
    </div>
    <div class="qeelstats">
      <span id="memtot">{TOTAL_USERS}<br/> inscrits</span>
      <span><strong id="messtot">{TOTAL_POSTS}</strong><br/> messages</span>
    </div>
    <div class="qeeldern">            
      <span id="last-user">
        <div id="newus"><h2><span class="titreuser">Bienvenue à notre hiltonien(ne)</span> {NEWEST_USER}</h2></div>
        <span id="ib-last-user"></span>
      </span>
    </div>
  </div>
  <div class="qeelmilieu">
    <div class="qeelgroupes">
      <div class="groupe1"><img src="https://nsm09.casimages.com/img/2021/02/15//AzLlLb-EzraMiller13.jpg"/><div><h3>Nom du groupe</h3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Vivamus vestibulum tincidunt quam, sit amet laoreet nibh pharetra in. Suspendisse vel elit enim.
        Suspendisse potenti. Suspendisse ornare est a consequat sodales.
        Praesent vehicula tempus purus, ac luctus nibh iaculis sed. Nam finibus arcu ut ante maximus placerat. </span></div></div>
        <div class="groupe2"><img src="https://nsm09.casimages.com/img/2021/02/15//AzLlLb-EzraMiller13.jpg"/><div><h3>Nom du groupe</h3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Vivamus vestibulum tincidunt quam, sit amet laoreet nibh pharetra in. Suspendisse vel elit enim.
        Suspendisse potenti. Suspendisse ornare est a consequat sodales.
        Praesent vehicula tempus purus, ac luctus nibh iaculis sed. Nam finibus arcu ut ante maximus placerat. </span></div></div>
      <div class="groupe3"><img src="https://nsm09.casimages.com/img/2021/02/15//AzLlLb-EzraMiller13.jpg"/><div><h3>Nom du groupe</h3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Vivamus vestibulum tincidunt quam, sit amet laoreet nibh pharetra in. Suspendisse vel elit enim.
        Suspendisse potenti. Suspendisse ornare est a consequat sodales.
        Praesent vehicula tempus purus, ac luctus nibh iaculis sed. Nam finibus arcu ut ante maximus placerat. </span></div> </div>
        <div class="groupe4"><img src="https://nsm09.casimages.com/img/2021/02/15//AzLlLb-EzraMiller13.jpg"/><div><h3>Nom du groupe</h3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Vivamus vestibulum tincidunt quam, sit amet laoreet nibh pharetra in. Suspendisse vel elit enim.
        Suspendisse potenti. Suspendisse ornare est a consequat sodales.
        Praesent vehicula tempus purus, ac luctus nibh iaculis sed. Nam finibus arcu ut ante maximus placerat. </span></div></div>
          <div class="groupe5"><img src="https://nsm09.casimages.com/img/2021/02/15//AzLlLb-EzraMiller13.jpg"/><div><h3>Nom du groupe</h3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Vivamus vestibulum tincidunt quam, sit amet laoreet nibh pharetra in. Suspendisse vel elit enim.
        Suspendisse potenti. Suspendisse ornare est a consequat sodales.
        Praesent vehicula tempus purus, ac luctus nibh iaculis sed. Nam finibus arcu ut ante maximus placerat. </span></div></div>
  </div>
       <div class="qeelcos" id="coforum">
         {LOGGED_IN_USER_LIST}
 </div>
          <div class="qeelder">
            <div class="dayQEEL" id="codern"><table id="24h">{L_CONNECTED_MEMBERS}</table></div>
          </div>
        </div>
        <div class="qeelbas" id="statsfin">{TOTAL_USERS_ONLINE}</div>
          </div>
          
 <script type="text/javascript">document.getElementById('messtot').innerHTML=document.getElementById('messtot').innerHTML.replace(/Nos membres ont posté un total de/,"");</script>
<script type="text/javascript">document.getElementById('messtot').innerHTML=document.getElementById('messtot').innerHTML.replace(/messages/,"");</script>
<script type="text/javascript">document.getElementById('messtot').innerHTML=document.getElementById('messtot').innerHTML.replace(/message/,"");</script>
  <script type="text/javascript">document.getElementById('memtot').innerHTML=document.getElementById('memtot').innerHTML.replace(/Nous avons/,"");</script>
<script type="text/javascript">document.getElementById('memtot').innerHTML=document.getElementById('memtot').innerHTML.replace(/membre enregistré/,"");</script>
<script type="text/javascript">document.getElementById('memtot').innerHTML=document.getElementById('memtot').innerHTML.replace(/membres enregistrés/,"");</script>
<script type="text/javascript">document.getElementById('newus').innerHTML=document.getElementById('newus').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"");</script>
<script type="text/javascript">document.getElementById('coforum').innerHTML=document.getElementById('coforum').innerHTML.replace(/Utilisateurs enregistrés/,"Ils font preuve de bravoure en venant sur le forum");</script>
<script type="text/javascript">document.getElementById('codern').innerHTML=document.getElementById('codern').innerHTML.replace(/Membres connectés au cours des 48 dernières heures/,"Ils sont passés nous voir et nous attendons impatiemment leur retour");</script>
<script type="text/javascript">document.getElementById('statsfin').innerHTML=document.getElementById('statsfin').innerHTML.replace(/Il y a en tout/,"En ce moment, il y a");</script>
<script type="text/javascript">document.getElementById('statsfin').innerHTML=document.getElementById('statsfin').innerHTML.replace(/utilisateur en ligne ::,/,"personne en ligne ::");</script>
<script type="text/javascript">document.getElementById('statsfin').innerHTML=document.getElementById('statsfin').innerHTML.replace(/utilisateurs en ligne ::,/,"personnes en ligne ::");</script>
<script type="text/javascript">document.getElementById('statsfin').innerHTML=document.getElementById('statsfin').innerHTML.replace(/Enregistré,/,"hiltonien qui se promène et");</script>
<script type="text/javascript">document.getElementById('statsfin').innerHTML=document.getElementById('statsfin').innerHTML.replace(/Enregistrés,/,"hiltoniens qui se promènent et");</script>
<script type="text/javascript">document.getElementById('statsfin').innerHTML=document.getElementById('statsfin').innerHTML.replace(/ Invisible et /," inaccessible ainsi que ");</script>
<script type="text/javascript">document.getElementById('statsfin').innerHTML=document.getElementById('statsfin').innerHTML.replace(/ Invisible et /," inaccessibles ainsi que ");</script>
<script type="text/javascript">document.getElementById('statsfin').innerHTML=document.getElementById('statsfin').innerHTML.replace(/Invité/," invité qui a peut-être envie de nous rejoindre");</script>
<script type="text/javascript">document.getElementById('statsfin').innerHTML=document.getElementById('statsfin').innerHTML.replace(/Invités/," invités qui ont peut-être envie de nous rejoindre");</script>

CSS

A savoir que la couleur des groupes est facile à changer :3

Code:

/* QEEL PAR KOALAVOLANT */

.qeeltotal{ width:839px; margin:0 auto; background-color:#BCCBAA; padding:15px; }
.qeeltotal, .qeeltotal *{ box-sizing:border-box; }

/* TITRE */

.qeeltotal h1{ margin:0 auto; color:#43672A; font-family: 'Homemade Apple', cursive; font-size:25px; text-align:center;
  text-shadow: 2px 2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, -2px -2px 0 #fff, 2px 0px 0 #fff, 0px 2px 0 #fff, -2px 0px 0 #fff, 0px -2px 0 #fff; line-height:28px;}

/* PREMIERE PARTIE DU HAUT */

.qeelhaut{ display:flex; justify-content:space-between;  align-items:center; }
.qeelstats{ width:274px; order:1; }
.qeelphotos{ width:308px; display:flex;
 order:2; margin-left:11px; }
.qeeldern{ width:406px; order:3;  }

.qeelstats{ display:flex; justify-content:space-between; flex-wrap:wrap; }
.qeelstats span{ width:100%; display:block; padding:5px; background-color:#6D9648;  text-align:center; border:5px solid #6D9648;
  box-shadow: 0 0 0 1px white inset;  outline: none; color:white; font-family: 'Libre Baskerville', serif; text-transform:uppercase;
font-size:12px; }
.qeelstats #memtot{ margin-bottom:5px; }

#last-user{ display:flex; align-items:center; width:100%;  height:106px; background-color:#C8D7B6; padding:5px; margin-left:5px; }
#last-user #newus{ padding-left: 10px; }
#last-user h2{ position:relative;}
#last-user img{ width:100px; height:107px; object-fit:cover; position:absolute; top:-26px; right:-6px;border:1px solid #6D9648; padding:3px; }

.titreuser{ width:65%; display:block; font-family: 'Libre Baskerville', serif; font-size:14px; text-align:center;
  letter-spacing:1px; text-transform:uppercase; color:#406B24;text-shadow: 2px 1px 0px rgb(255,255,255, 0.8); }
#newus a{ font-size:12px; margin-top:5px; width:65%; text-align:center; display:block;  }

/* DEUXIEME PARTIE DU HAUT */

.qeelmilieu{ display: flex;  justify-content: space-between; margin-top:5px; }
.qeelmilieu > div{ width:32.8%; }

[class^="groupe"]{ display:flex; justify-content:space-between; margin-bottom:5px; }
[class^="groupe"] img{ width: 60px; height: 50px;  object-fit: cover; }
[class^="groupe"] div{ width:100%; background-color:#C8D7B6; padding:5px; position:relative;     display: flex;    align-items: center;    justify-content: center;}
[class^="groupe"] div h3{ font-family: 'Libre Baskerville', serif; font-size:11px; text-align:center;
  letter-spacing:1px; text-transform:uppercase; color:#fff;margin:3px 0px; }
[class^="groupe"] div span{ font-size: 10px; display: block; height: 53px; overflow: auto; padding: 5px; text-align: justify;
  position:absolute; top:0px; background-color:#D6E1C8; -webkit-transform: scale(0);transform: scale(0); transition:500ms;}
[class^="groupe"] div:hover span{ -webkit-transform: scale(1);transform: scale(1);}
.groupe1 div h3{ color:#FF0000; }
.groupe2 div h3{ color:#FF6600; }
.groupe3 div h3{ color:#FFFF00; }
.groupe4 div h3{ color:#00CCFF; }
.groupe5 div h3{ color:#CC99FF; }

.qeelcos{     background-color: #6D9648;    color: #fff;    padding: 10px;    height: 271px;    overflow: auto;  font-size: 12px; }

.qeelder{     width: 33%; }
.qeelder td.row1{     background-color: white !important;    padding: 10px;    height: 269px;    display: flex;    overflow: auto;  }
/* BAS AVEC STATISTIQUES */

.qeelbas{ background-color:#456826; color:#fff; padding:5px; font-family:Verdana; font-size:12px; line-height:13px; }

Javascript

Celui ci a été trouvé sur "La Tambouille des Râleuses"
Donc dans Modules > Gestion des codes Javascript (à activer) et cocher "Sur l'index"

Code:

$(function(){
  
    // On teste si l'information du dernier inscrit
    // est visible sur la page
    if( $('#last-user').length ){
  
        var $lastUser = $('#last-user'),
      
        // Dans ce cas, on va récupérer l'url vers le profil du dernier inscrit
            urlLastUser = $lastUser.find('a').attr('href'),
        // Et son pseudo
            pseudoLastUser = $lastUser.find('a > span > strong').text();
      
        // On déplace l'infobulle juste après le lien
        $('#last-user #ib-last-user').insertAfter($lastUser.find('a'));
      
        // on va récupérer l'avatar dans l'infobulle
        $('#last-user #ib-last-user').load('' + urlLastUser +' img[alt="'+ pseudoLastUser +'"]');

    }
});