QEEL simple.

<!-- BEGIN disable_viewonline -->
 
<div class="qeel_lilie"> <div class="titreQEEL"><a href="https://adresseforum/viewonline">•</a> Qui est en ligne ? <a href="https://thecrescentcity.forumactif.com/viewonline">•</a></div>
   <div class="qeel_gauche">
          <div class="listem" <span id="membres">
                   {TOTAL_USERS}
                </span>
                
           <span id="stats" class="stats_qeel">
                   {TOTAL_USERS_ONLINE}
           </span>
          
           </div>
          <br>
          <div class="presents"> <table id="lilie">{L_CONNECTED_MEMBERS}</table> </div>
   </div>
  
   <div class="qeel_milieu"><a href="https://adresseforum/" class="g1">
                   Groupe 1
           </a>
          
           <a href="https://adresseforum/" class="g2">
                   Groupe 2
           </a>
          
           <a href="https://adresseforum/" class="g3">
                   Groupe 3
           </a>
          
           <a href="https://adresseforum/" class="g4">
                   Groupe 4
           </a>
          
           <a href="https://adresseforum/" class="g5">
                   Groupe 5
           </a>
          <a href="https://adresseforum/" class="g6">
                   Groupe 6
           </a>
          
            <a href="https://adresseforum/" class="g7">
                   Groupe 7
           </a>
            <a href="https://adresseforum/" class="g8">
                   Groupe 8
           </a>
          
   </div>
  
   <div class="qeel_droite"><span id="online"><span id="dernier_membre">
                 {NEWEST_USER}
  </span><br><br>
                   {LOGGED_IN_USER_LIST}
            </span>
          
   </div>
</div>
<!-- BEGIN switch_chatbox_activate -->

            <center><div class="cb">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
                <!-- BEGIN switch_chatbox_popup -->
                <div id="chatbox_popup"></div>
                <script type="text/javascript">
                //<![CDATA[
                insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
                //]]>
                </script>
                <!-- END switch_chatbox_popup -->
                              </div></center>
              <!-- END switch_chatbox_activate -->
  
          <script type="text/javascript">document.getElementById('membres').innerHTML=document.getElementById('membres').innerHTML.replace(/Nous avons/,"Actuellement,").replace(/membres enregistrés/,"personnages sont joués sur <ital><b>Crescent City</b></ital>. ");</script>
<script type="text/javascript">document.getElementById('stats').innerHTML=document.getElementById('stats').innerHTML.replace(/Il y a en tout/,"En ce moment ils sont").replace(/utilisateur(s?) en ligne/,"").replace(/::/,"").replace(/Enregistré(s?)/,"à jouer").replace(/Invisible(s?) et/,"à jouer les fantômes et ").replace(/Invité(s?)/,"à nous surveiller.");</script>
          <script type="text/javascript">document.getElementById('dernier_membre').innerHTML=document.getElementById('dernier_membre').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Qui s'est fraîchement installé dans les rues de la <ital2>Nouvelle-Orléans</ital2> ?");</script>
<script type="text/javascript">document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/Utilisateurs enregistrés/,"Les rôdeurs présents sont");</script>
<script type="text/javascript">jQuery('##lilie span.gensmall').html(jQuery('#kaboum span.gensmall').html().replace('Membres connectés au cours des 24 dernières heures : ','Ils étaient en ville ces 24 dernières heures :'));</script>
<!-- END disable_viewonline -->

/****QUI EST EN LIGNE by Lilie ****/

ital {
 color: #b48a84 ;
    font-style: italic;
    letter-spacing: 1px;
}

ital2 {
 color: #88919b;
    font-style: italic;
    letter-spacing: 1px;
}

.qeel_lilie {
background: url(votreimagedefond); /**modifiable**/
background-repeat: round;
width: 920px;
margin: 2% auto;
height: 310px;
box-sizing: border-box;
padding: 2% 2%;
font-size: 13px;
letter-spacing: 0px;
font-family: 'arial';
}

.titreQEEL {
color: #c4bfc7!important;
font-size: 25px;
letter-spacing: 2px;
text-align: center;
text-shadow: 0 2px 2px #121517;
color: #717171;
font-family: oswald;
letter-spacing: 1px;
padding: 5px;
text-transform: uppercase;
}

.qeel_gauche{
float: left;
width: 36%;
box-sizing: border-box;
text-align: center;
height: 200px;
color: #bababa;}

.listem{background: #2c2c2c;
    overflow: auto;
    padding: 4%;
    text-align: justify;
}

.presents{background: #2c2c2c;
  overflow: auto;
    padding: 4%;
    text-align: justify;
  height: 91px;
}

.qeel_droite {
background: #2c2c2c;
float: left;
padding: 1%;
width: 36%;
box-sizing: border-box;
text-align: center;
height: 202px;
color: #bababa;
overflow: auto;}

.qeel_milieu {
float: left;
width: 22%;
box-sizing: border-box;
text-align: center;
height: 200px;
color: #bababa;}

.qeel_milieu {margin: 0 3%;}

.qeel_gauche {text-align: justify;}

.qeel_droite {text-align: justify;}


/* STATISTIQUES */
#stats strong:nth-child(6n+1) {
display: none;}

.stats_qeel::after {
content: "";
display: block;}

/* UTILISATEURS CONNECTES */
.online_qeel {
display: block;
height: 99px;
overflow: auto;
width: 100%;
padding: 4%;
text-align: justify;
overflow: auto;
}

/* LISTE CONNECTES 24 HEURES */
.qeel_milieu table .row1 {
background: transparent;
width: 100%;
height: 160px;
overflow: auto;
display: block;
text-align: justify;
}

.qeel_milieu table .row1 .gensmall {
color: #bababa;
}


/* GROUPES */
a.g1, a.g2, a.g3, a.g4, a.g5, a.g6, a.g7, a.g8 {
color: #73b2c0;
background-color: #2c2c2c !important;
display: block;
text-transform: uppercase;
margin: 2% 0;
font-weight: bold;
font-size:12px;
padding: 4px;}

.a.g1, .a.g2, .a.g3, .a.g4, .a.g5, .a.g6, .a.g7, .a.g8, a:hover {
    color: #fff;
    text-decoration: none !important;
    background-color: #343637 !important;
    transition: 0.5s;}

a.g1 {color: #cfc1ab;}
a.g2 {color: #A84A4A;}
a.g3 {color: #706D99;}
a.g4 {color: #5C8D64;}
a.g5 {color: #B0AC68;}
a.g6 {color: #587C96;}
a.g7 {color: #936671;}
a.g8 {color: #c28841;}