KoalaVolant
Dim 21 Aoû 2022 - 15:29
En terme de crédits, vous pouvez mettre KoalaVolant/Pretty Girl/Miettes merci (au pire vous mettez Pisrale avec un lien )
Version : PHPBB2
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');
});
});
})($);
|
|