Découvrir le conceptSans inscriptionMettez les créditsCommandes ouvertes
-23%
Le deal à ne pas rater :
EVGA SuperNOVA 650 G6 – Alimentation PC 100% modulaire 650W, 80+ ...
77.91 € 100.91 €
Voir le deal

KoalaVolant
KoalaVolant
Dim 21 Aoû 2022 - 15:29
En terme de crédits, vous pouvez mettre KoalaVolant/Pretty Girl/Miettes merci Very Happy (au pire vous mettez Pisrale avec un lien Wink)
Version : PHPBB2


Donc pour le qeel.



HTML



1. Aller dans index_body
2. Trouver tout ce qu'il y a entre BEGIN  disable_viewonline et END  disable_viewonline
3. Remplacez les par :

Code:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@400;700&family=Lato&display=swap" rel="stylesheet">
<div class="qeeltotal">
  <div class="qeelleft">
    <div class="qeelmembres">
      <div class="dayQEEL" id="codern"><h2>Membres connectés au cours des 24 dernières heures</h2><table id="24h">{L_CONNECTED_MEMBERS}</table></div>
      <div class="qeelcos" id="coforum"><h2>Membres connectés</h2><div>{LOGGED_IN_USER_LIST}</div></div>
  </div>
  <div class="qeelgroupes">
    <div class="imggroupes">
      <img src="https://i.servimg.com/u/f30/19/45/51/53/giphy11.gif" class="grp1">
      <img src="https://i.servimg.com/u/f30/19/45/51/53/origin10.gif" class="grp2">
      <img src="https://i.servimg.com/u/f30/19/45/51/53/2c6c1a10.gif" class="grp3">
       <img src="https://i.servimg.com/u/f30/19/45/51/53/source10.gif" class="grp4">
      <img src="https://i.servimg.com/u/f30/19/45/51/53/giphy_11.gif" class="grp5">
      <img src="https://i.servimg.com/u/f30/19/45/51/53/giphy_10.gif" class="grp6">
        </div>
         </div>
        </div>
         <div class="qeelright">
           <div class="qeelone">
           <div class="qgroupes">
             <div class="qgrp1"><strong>Groupe 1 - </strong>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.</div>
             <div class="qgrp2"><strong>Groupe 2 - </strong>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.</div>
             <div class="qgrp3"><strong>Groupe 3 - </strong>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.</div>
             <div class="qgrp4"><strong>Groupe 4 - </strong>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.</div>
             <div class="qgrp5"><strong>Groupe 5 - </strong>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.</div>
             <div class="qgrp6"><strong>Groupe 6 - </strong>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.</div>
           </div>
           <div class="qeelflex">
             <img src="https://i.imgur.com/WBGOtyE.jpg"/>
             <div id="memtot">{TOTAL_USERS}habitants</div>
             <div id="messtot">{TOTAL_POSTS}</div>
             </div>
           </div>
           <div class="qeelbienvenue">Bienvenue <span id="newus">{NEWEST_USER}</span></div>
         </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('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 :/,"");</script>
        <script type="text/javascript">document.getElementById('codern').innerHTML=document.getElementById('codern').innerHTML.replace(/Membres connectés au cours des 24 dernières heures :/,"");</script>
       

CSS



Code:
/* QEEL */

.qeeltotal{ width:850px; margin:0 auto; display:flex; justify-content:space-between; background-color:#fff; padding:5px; font-family: 'Lato', sans-serif; }
.qeeltotal, .qeeltotal *{ box-sizing:border-box; }
.qeelleft{ width:450px; display:flex; justify-content:space-between; }
.qeelright{ width:400px; display:flex; justify-content:space-between;  flex-wrap:wrap; }

.qeelflex{ display:flex; justify-content:space-between; }

.qeelleft h2{ font-family: 'Balsamiq Sans', cursive; color:#62466B; font-size:14px; margin:2px 0px;}
#codern .gensmall, #coforum div{ width:205px; height:105px; overflow:auto; display:block; }
.qeelleft a{ text-decoration:none; font-size:14px; }

.qeelmembres{ background-color:#AEB3C2; padding:10px; width:230px; height:300px; border-radius:10px; }
.qeelmembres .row1{ background:none; }
.qeelgroupes{ width:200px; position:relative; height:288px;  }
.qeelgroupes img{ width:85px; height:85px; object-fit:cover; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); position:absolute; }
.grp1{ left:10px; top:40px; }
.grp2{ right:10px; top:40px; }
.grp3{ left:50%; transform:translateX(-50%); top:85px; }
.grp4{left:10px; top:130px; }
.grp5{ right:10px; top:130px; }
.grp6{ left:50%; transform:translateX(-50%); top:175px; }

.qgroupes div{ display:none; }
.qgroupes .actif{ display:block; }

#memtot, #messtot{ display: flex;    align-items: center;    justify-content: center;    text-align: center;    flex-wrap: wrap; }
#memtot strong, #messtot strong{ font-size:25px; text-align:center; font-family: 'Balsamiq Sans', cursive; color:#62466B; display:block; width:100%; }


/* Droite */

.qeelone{ width:100%; }
.qgroupes{ background-color:#B5C2B7; padding:5px; height:120px; overflow:auto; text-align:justify; border-radius:5px;}

.qeelflex{ height:80px; margin-top:5px;  }
.qeelflex img{ width:140px; height:103px; object-fit:cover; margin-right:3px; border-radius:5px;border-radius:5px;}
.qeelflex div{ padding:5px; width:131px; margin:0px 3px; height:103px; background-color:#B5C2B7; padding:5px; border-radius:5px; }

.qeelbienvenue{ margin-top:5px; background-color:#c7b2cd; color:#222; font-size:20px; text-align:center; padding:10px; width:100%; border-radius:5px;
display:flex; justify-content:center; align-items:center; }
.qeelbienvenue a{ color:#f0f0f0; text-decoration:none; margin-left:5px;  }

Javascript



1. Allez dans Modules > Pages Javascript
2. Assurez vous que le javascript soit activé
3. Créer une nouvelle page et cocher "Toutes les pages"
4. Coller ce qui suis :

Code:
;( function(){

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

                // On désactive tous les groupes
                $('.imggroupes [class^="grp"]').removeClass('dpb-bloc');
                $('.qgroupes [class^="qgrp"]').removeClass('actif');

                // On active le bon groupe
                $('.imggroupes .'+ idGroupe +'').addClass('dpb-bloc');
                $('.qgroupes .q'+ idGroupe +'').addClass('actif');
            });
  
    });
  
  })($);
Revenir en haut

Nos amis proches

QEEL n°6 Parto512 Logo WyvArtem