Version nécessaire du forum : phpbb2

La maquette a été faite par Kaerin, la version proposée a néanmoins quelques modifications par rapport à la première.
Le code de Javascript/Jquery a été faite par Miettes
A savoir que ces deux personnes m'ont donné leur accord pour proposer ce code.

HTML

Pour placer le HTML il suffit d'aller dans le template et de rempalcer ce qui se trouve entre "begin disable_viewonline" et "end disable_viewonline" par ce qui suit :

Code:

<div class="qeeltotal">
  
  <div class="qeelgroupes"><em></em>
    <div class="qgroupe1"><h1>Nom du groupe 1</h1>
    <img src="https://64.media.tumblr.com/907a74a916a6fdbcfbaf95bc3b107a75/1686daa89d2e0c1a-63/s400x600/a75ef69cd3d2a43cb4260a0c2b3c598801331532.gifv">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor faucibus molestie. Donec ut faucibus lacus. Aliquam maximus risus vitae maximus vehicula.
          Nam aliquam sem a lectus finibus, ut scelerisque purus condimentum. Proin ac lectus tristique, congue ligula eu, accumsan mi.
          Ut rutrum at felis vitae pharetra. Sed risus libero, interdum vel erat ac, consequat blandit lectus.
          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed consequat sapien nec aliquet tempus. </span>
        <img src="https://64.media.tumblr.com/907a74a916a6fdbcfbaf95bc3b107a75/1686daa89d2e0c1a-63/s400x600/a75ef69cd3d2a43cb4260a0c2b3c598801331532.gifv">
        </div>
          <div class="qgroupe2"><h1>Nom du groupe 2</h1>
    <img src="https://64.media.tumblr.com/907a74a916a6fdbcfbaf95bc3b107a75/1686daa89d2e0c1a-63/s400x600/a75ef69cd3d2a43cb4260a0c2b3c598801331532.gifv">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor faucibus molestie. Donec ut faucibus lacus. Aliquam maximus risus vitae maximus vehicula.
          Nam aliquam sem a lectus finibus, ut scelerisque purus condimentum. Proin ac lectus tristique, congue ligula eu, accumsan mi.
          Ut rutrum at felis vitae pharetra. Sed risus libero, interdum vel erat ac, consequat blandit lectus.
          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed consequat sapien nec aliquet tempus. </span>
        <img src="https://64.media.tumblr.com/907a74a916a6fdbcfbaf95bc3b107a75/1686daa89d2e0c1a-63/s400x600/a75ef69cd3d2a43cb4260a0c2b3c598801331532.gifv">
        </div>
          <div class="qgroupe3"><h1>Nom du groupe 3</h1>
    <img src="https://64.media.tumblr.com/907a74a916a6fdbcfbaf95bc3b107a75/1686daa89d2e0c1a-63/s400x600/a75ef69cd3d2a43cb4260a0c2b3c598801331532.gifv">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor faucibus molestie. Donec ut faucibus lacus. Aliquam maximus risus vitae maximus vehicula.
          Nam aliquam sem a lectus finibus, ut scelerisque purus condimentum. Proin ac lectus tristique, congue ligula eu, accumsan mi.
          Ut rutrum at felis vitae pharetra. Sed risus libero, interdum vel erat ac, consequat blandit lectus.
          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed consequat sapien nec aliquet tempus. </span>
        <img src="https://64.media.tumblr.com/907a74a916a6fdbcfbaf95bc3b107a75/1686daa89d2e0c1a-63/s400x600/a75ef69cd3d2a43cb4260a0c2b3c598801331532.gifv">
        </div>
          <div class="qgroupe4"><h1>Nom du groupe 4</h1>
    <img src="https://64.media.tumblr.com/907a74a916a6fdbcfbaf95bc3b107a75/1686daa89d2e0c1a-63/s400x600/a75ef69cd3d2a43cb4260a0c2b3c598801331532.gifv">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor faucibus molestie. Donec ut faucibus lacus. Aliquam maximus risus vitae maximus vehicula.
          Nam aliquam sem a lectus finibus, ut scelerisque purus condimentum. Proin ac lectus tristique, congue ligula eu, accumsan mi.
          Ut rutrum at felis vitae pharetra. Sed risus libero, interdum vel erat ac, consequat blandit lectus.
          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed consequat sapien nec aliquet tempus. </span>
        <img src="https://64.media.tumblr.com/907a74a916a6fdbcfbaf95bc3b107a75/1686daa89d2e0c1a-63/s400x600/a75ef69cd3d2a43cb4260a0c2b3c598801331532.gifv">
        </div>
                <div class="qgroupe5"><h1>Nom du groupe 5</h1>
    <img src="https://64.media.tumblr.com/907a74a916a6fdbcfbaf95bc3b107a75/1686daa89d2e0c1a-63/s400x600/a75ef69cd3d2a43cb4260a0c2b3c598801331532.gifv">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor faucibus molestie. Donec ut faucibus lacus. Aliquam maximus risus vitae maximus vehicula.
          Nam aliquam sem a lectus finibus, ut scelerisque purus condimentum. Proin ac lectus tristique, congue ligula eu, accumsan mi.
          Ut rutrum at felis vitae pharetra. Sed risus libero, interdum vel erat ac, consequat blandit lectus.
          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed consequat sapien nec aliquet tempus. </span>
        <img src="https://64.media.tumblr.com/907a74a916a6fdbcfbaf95bc3b107a75/1686daa89d2e0c1a-63/s400x600/a75ef69cd3d2a43cb4260a0c2b3c598801331532.gifv">
        </div>
      </div>
      
      <div class="qeelstruct">
                <div class="qeelmess">
                  <span id="messtot"><div></div>{TOTAL_POSTS}</span>
        <span id="memtot"><div></div>{TOTAL_USERS} membres</span>
        </div>
        
        <div class="qeelco" id="memen">
          {LOGGED_IN_USER_LIST}
        </div>
        
                        <div class="qeelder">
<div class="dayQEEL"><table id="24h">{L_CONNECTED_MEMBERS}</table></div>
        </div>

            </div>
            
            <div class="qeelfin">
              <div class="qeelicon">
                <div class="groupe1">Groupe 1</div>
                                  <div class="groupe2">Groupe 2</div>
                                                    <div class="groupe3">Groupe 3</div>
                                                                      <div class="groupe4">Groupe 4</div>
                  <div class="groupe5">Groupe 5</div>
                                                      </div>
              <h1 id="dernin">Bienvenue à {NEWEST_USER} sur Nom du forum</h1>
                                    </div>
                  </div>


A savoir aussi qu'il vous faut placer juste avant "end switch legend" (ou si vous enlevez switch legend juste avant auto_dst) ceci :

Code:

<script type="text/javascript">document.getElementById('dernin').innerHTML=document.getElementById('dernin').innerHTML.replace(/L'utilisateur enregistré le plus récent est /,"");</script>
      <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('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('memen').innerHTML=document.getElementById('memen').innerHTML.replace(/Utilisateurs enregistrés :/,"<strong class='strongjs'>Membres connectés :</strong>");</script>
                  <script type="text/javascript">document.getElementById('24h').innerHTML=document.getElementById('24h').innerHTML.replace(/Membres connectés au cours des 48 dernières heures :/,"<strong class='strongjs'>Derniers passages :</strong>");</script>

CSS

Code:

/* QEEL par KoalaVolant / Maquette par Kaerin / JQuery par Miettes */

.qeeltotal{ width:800px; background-color:#000; }
.qeeltotal *{ box-sizing:border-box; }

.qeelgroupes{ width:800px; height:150px; background-image:url('https://i.servimg.com/u/f30/19/45/51/53/fondqe12.jpg');  position:relative; margin-bottom:15px; }
.qeelgroupes em{    position: absolute; display: block; top: 0; left: 0; height: 100%; width: 100%;
    background: rgba(255, 255, 255, 0.1);    mix-blend-mode: normal; }
.qeelgroupes div{ width:800px; height:150px; display:flex; justify-content:space-between; flex-wrap:wrap; position:absolute; z-index:8; padding:10px; display:none; }
.qeelgroupes img{ width:200px; height:97px; object-fit:cover; border:2px solid #fff; }
.qeelgroupes h1{ width:100%; position:relative; z-index:11; text-align:center; font-size:22px; font-family: 'Libre Baskerville', serif; margin:0; font-size:26px; text-transform:uppercase;}
.qeelgroupes span{ display: block;  width: 355px; color:#fff; font-family: 'Libre Baskerville', serif; font-size:13px;
  line-height:14px; height:97px; overflow:auto; padding:10px; text-align:justify; }

/* Bas du QEEL */

.qeelstruct{ width:800px; display:flex; justify-content:space-between; }
.qeelmess span{ position:relative; display:block; width:175px; height:57px; margin:5px; text-align:center; color:#fff; font-family: 'Libre Baskerville', serif;
  font-size:17px; line-height:57px;  z-index:8;  }
.qeelmess span div{ position:absolute; top:0; left:0; width:175px; height:57px; z-index:2;
  opacity:0.3; background-image:url('https://i.servimg.com/u/f30/19/45/51/53/fondqe12.jpg'); }

.dayQEEL{ width: 326px; height:188px; overflow:auto; padding:2px; font-family: 'Libre Baskerville', serif; }
.dayQEEL strong{ color:#D3CFD0; font-family: 'Libre Baskerville', serif; font-size:16px;  }
.dayQEEL .strongjs{ color:#7B4873; }

.qeelco{ padding: 5px;    width: 277px;    height: 188px;    overflow: auto; font-family: 'Libre Baskerville', serif; }
.qeelco strong{ color:#D3CFD0; }
.qeelco .strongjs{ color:#7B4873; }

/* Tout bas du QEEL */

.qeelfin{ color:#D3CFD0; font-family: 'Libre Baskerville', serif; display:flex; justify-content:center; flex-wrap:wrap;  position:relative; }
.qeelfin h1{ color:#D3CFD0; width:100%; text-align:center; font-size:18px; text-transform:uppercase;}
.qeelicon{ display:flex; justify-content:space-between; }
.qeelicon div{ padding:5px; text-transform:uppercase; margin:0px 5px; font-size:13px; }

.qeelgroupes .actif{ display:flex; }

/* Couleurs groupes */

.groupe1{ background-color:#AD2D1C; }
.groupe2{ background-color:#58ABC9; }
.groupe3{ background-color:#414878; }
.groupe4{ background-color:#757474; }
.groupe5{ background-color:#752A55; }

JQuery

Le Jquery est à placer dans Modules > Pages javascript
N'oubliez pas de l'activer.
Il vous faudra cocher "Sur l'index"

Code:

;( function(){

    $(document).ready( function(){
      
    // par défaut
    $('.qeelicon .groupe1').addClass('dpb-bloc');
    $('.qeelgroupes .qgroupe1').addClass('actif');
      
         $('body')
           .on('click', '.qeelicon [class^="groupe"]', function(){
                var $this = $(this),
                // on récupére le nom du groupe
                idGroupe = $this.attr('class');

                // On désactive tous les groupes
                $('.qeelicon [class^="groupe"]').removeClass('dpb-bloc');
                $('.qeelgroupes [class^="qgroupe"]').removeClass('actif');

                // On active le bon groupe
                $('.qeelicon .'+ idGroupe +'').addClass('dpb-bloc');
                $('.qeelgroupes .q'+ idGroupe +'').addClass('actif');
            });
  
    });
  
  })($);