Une astuce rapide pour afficher une mini-version du QEEL dans la Toolbar. 
On va ici dupliquer le QEEL pour garder la version originale à la fois sur l'index et avoir également ce mini-QEEL dans la Toolbar, les deux à la fois.
Rendez-vous dans le template index_body puis trouver la ligne suivante:
Juste avant cette balise, ajouter le code suivant:
Créez un nouveau code Javascript sur Toutes les pages avec le code suivant:
J'ai hésité entre deux styles pour ce code, du coup vous avez le choix entre deux apparences par défaut:
1. Block compact (voir l'image)
2. Block vertical (voir l'image)
modernBB :
On va ici dupliquer le QEEL pour garder la version originale à la fois sur l'index et avoir également ce mini-QEEL dans la Toolbar, les deux à la fois.
Rendez-vous dans le template index_body puis trouver la ligne suivante:
Code:
<!-- BEGIN disable_viewonline -->Juste avant cette balise, ajouter le code suivant:
Code:
<div style="display: none;">
<!-- BEGIN disable_viewonline -->
<qeel class="container">
<qeel class="tuo">{TOTAL_USERS_ONLINE}</qeel>
<qeel class="titles">
<span id="liul_t" class="qeelactive">Utilisateurs en ligne</span>
<span id="connected_t"><span></span> dernières heures</span>
</qeel>
<qeel class="liul qeelactive">{LOGGED_IN_USER_LIST}</qeel>
<qeel class="connected">{L_CONNECTED_MEMBERS}</qeel>
<qeel class="groups"><!-- BEGIN switch_group_legend -->{GROUP_LEGEND}<!-- END switch_group_legend --></qeel>
</qeel>
<!-- END disable_viewonline -->
</div>Créez un nouveau code Javascript sur Toutes les pages avec le code suivant:
Code:
$(function(){
var checkExist = setInterval(function(){
if ($("#fa_notifications").length){
$('a#fa_notifications').before('<div class="qeel_nav">Qui est en ligne ?</div> <div style="display: none;" class="qeel_content"></div>');
$('.qeel_content').load('/ qeel.container', function() {
var tuocount = $('#fa_right qeel.tuo strong').text();
$('#fa_right qeel.tuo strong').attr('data-count', tuocount);
var $hourstext = $('#fa_right qeel.connected').contents().get(0).nodeValue;
var sd = $hourstext.replace(/[^0-9]/gi, '');
var hnumber = parseInt(sd, 10);
$('#fa_right span#connected_t span').html(hnumber);
$('#fa_right span#liul_t').on('click', function() {
$(this).addClass('qeelactive');
$('#fa_right qeel.liul').addClass('qeelactive');
$('#fa_right span#connected_t').removeClass('qeelactive');
$('#fa_right qeel.connected').removeClass('qeelactive');
});
$('#fa_right span#connected_t').on('click', function() {
$(this).addClass('qeelactive');
$('#fa_right qeel.connected').addClass('qeelactive');
$('#fa_right span#liul_t').removeClass('qeelactive');
$('#fa_right qeel.liul').removeClass('qeelactive');
});
});
var offset = $(".qeel_nav").offset();
var width = $(".qeel_nav").width();
var left = offset.left - width + "px";
$(".qeel_content").css( {
'left': left
});
$(document).mouseup(function(e) {
var container = $('.qeel_content');
var containerclick =$('.qeel_nav');
if (!container.is(e.target) && !containerclick.is(e.target) && container.has(e.target).length === 0) {
container.hide();
}
});
$('.qeel_nav').on('click', function() {
$('.qeel_content').toggle();
});
clearInterval(checkExist);
}
}, 100);
});J'ai hésité entre deux styles pour ce code, du coup vous avez le choix entre deux apparences par défaut:
1. Block compact (voir l'image)
Code:
/* - - - AFFICHAGE D'UN MINI-QEEL DANS LA TOOLBAR - CSS 1 (SOURCE: IDYLLIC) - - - */
/* -- Lien "Qui est en ligne ?" dans la Toolbar -- */
.qeel_nav {
display: inline-block;
margin-left: 18px;
margin-top: 3px;
vertical-align: top;
line-height: 30px;
color: #fff;
border-radius: 3px;
padding: 0 9px;
cursor: pointer;
}
.qeel_nav:hover {
text-decoration: underline;
}
/* on fait en sorte de placer tous les liens de droite de la Toolbar au même niveau */
div#fa_menu {
vertical-align: top;
}
/* le block principal regroupant tout le mini-QEEL */
.qeel_content {
position: absolute;
width: 300px;
min-height: 300px;
background-color: white;
box-sizing: border-box;
padding: 1%;
color: black;
max-height: 400px;
overflow-y: scroll;
top: 42px;
}
/* affiche le nombre d'utilisateur(s) en ligne */
qeel.tuo {
font-size: 0;
display: block;
text-align: center;
margin-bottom: 10px;
background-color: #2869b5;
color: white;
text-transform: uppercase;
}
qeel.tuo strong {
font-size: 11pt;
vertical-align: middle;
}
qeel.tuo strong::after {
content: " utilisateurs en ligne";
font-weight: 400;
font-size: 10pt;
margin-left: 2px;
}
qeel.tuo strong[data-count="1"]::after {
content: " utilisateur en ligne";
}
/* block regroupant les deux titres ("Utilisateurs en ligne" et "X dernières heures") */
qeel.titles {
display: block;
text-align: center;
}
qeel.titles > span {
font-size: 9pt;
display: inline-block;
vertical-align: top;
margin: 0 .5%;
background-color: #efefef;
box-sizing: border-box;
padding: 1% 3%;
cursor: pointer;
transition: all .1s ease-in-out;
}
qeel.titles span.qeelactive {
background-color: #293f58;
color: white;
transition: all .1s ease-in-out;
}
/* liste des utilisateurs en ligne */
qeel.liul {
display: none;
font-size: 0;
margin: 10px 0;
text-align: center;
}
qeel.liul.qeelactive {
display: block;
}
qeel.liul a {
font-size: 10pt;
margin: 0 4px;
}
qeel.liul a strong {
font-weight: 500;
}
/* liste des utilisateurs connectés ces dernières X heures */
qeel.connected {
display: none;
font-size: 0;
margin: 10px 0;
text-align: center;
}
qeel.connected.qeelactive {
display: block;
}
qeel.connected a {
font-size: 10pt;
margin: 0 4px;
}
qeel.connected a strong {
font-weight: 500;
}
/* affichage des groupes */
qeel.groups {
font-size: 0;
text-align: center;
margin-top: 25px;
display: block;
}
qeel.groups > * {
font-size: 9.5pt;
margin: 0 5px;
}
/* scrollbar du block principal: customisé pour être invisible si la liste des utilisateurs
- - en ligne/dernièrement connectés ne dépasse pas le max-height de .qeel_content (qui est modifiable à souhait) */
.qeel_content::-webkit-scrollbar {
width: 4px;
}
.qeel_content::-webkit-scrollbar-track {
background: white;
}
.qeel_content::-webkit-scrollbar-thumb {
background: #444;
}
.qeel_content::-webkit-scrollbar-thumb:hover {
background: #242424;
}2. Block vertical (voir l'image)
Code:
/* - - - AFFICHAGE D'UN MINI-QEEL DANS LA TOOLBAR - CSS 2 (SOURCE: IDYLLIC) - - - */
/* -- Lien "Qui est en ligne ?" dans la Toolbar -- */
.qeel_nav {
display: inline-block;
margin-left: 18px;
margin-top: 3px;
vertical-align: top;
line-height: 30px;
color: #fff;
border-radius: 3px;
padding: 0 9px;
cursor: pointer;
}
.qeel_nav:hover {
text-decoration: underline;
}
/* on fait en sorte de placer tous les liens de droite de la Toolbar au même niveau */
div#fa_menu {
vertical-align: top;
}
/* le block principal regroupant tout le mini-QEEL */
.qeel_content {
position: fixed;
width: 300px;
min-height: 300px;
background-color: white;
box-sizing: border-box;
padding: 1%;
color: black;
overflow-y: scroll;
top: 42px;
height: calc(100vh - 42px);
max-height: calc(100vh - 42px);
left: unset !important;
right: 0;
box-shadow: 0 0 10px #00000050;
}
/* affiche le nombre d'utilisateur(s) en ligne */
qeel.tuo {
font-size: 0;
display: block;
text-align: center;
margin-bottom: 10px;
color: #101010;
text-transform: uppercase;
padding: 2% 0;
}
qeel.tuo strong {
font-size: 14pt;
vertical-align: middle;
}
qeel.tuo strong::after {
content: " utilisateurs en ligne";
font-weight: 400;
font-size: 9pt;
margin-left: 2px;
display: block;
}
qeel.tuo strong[data-count="1"]::after {
content: " utilisateur en ligne";
}
/* block regroupant les deux titres ("Utilisateurs en ligne" et "X dernières heures") */
qeel.titles {
display: block;
text-align: center;
}
qeel.titles > span {
font-size: 9pt;
display: inline-block;
vertical-align: top;
margin: 0 .5%;
background-color: #efefef;
box-sizing: border-box;
padding: 1% 3%;
cursor: pointer;
transition: all .1s ease-in-out;
}
qeel.titles span.qeelactive {
background-color: #293f58;
color: white;
transition: all .1s ease-in-out;
}
/* liste des utilisateurs en ligne */
qeel.liul {
display: none;
font-size: 0;
margin: 10px 0;
text-align: justify;
}
qeel.liul.qeelactive {
display: block;
}
qeel.liul a {
font-size: 10pt;
margin: 0 4px;
}
qeel.liul a strong {
font-weight: 500;
}
/* liste des utilisateurs connectés ces dernières X heures */
qeel.connected {
display: none;
font-size: 0;
margin: 10px 0;
text-align: justify;
}
qeel.connected.qeelactive {
display: block;
}
qeel.connected a {
font-size: 10pt;
margin: 0 4px;
}
qeel.connected a strong {
font-weight: 500;
}
/* affichage des groupes */
qeel.groups {
font-size: 0;
text-align: center;
margin-top: 25px;
display: block;
}
qeel.groups > * {
font-size: 9.5pt;
margin: 0 5px;
}
/* scrollbar du block principal: customisé pour être invisible si la liste des utilisateurs
- - en ligne/dernièrement connectés ne dépasse pas le max-height de .qeel_content (qui est modifiable à souhait) */
.qeel_content::-webkit-scrollbar {
width: 4px;
}
.qeel_content::-webkit-scrollbar-track {
background: white;
}
.qeel_content::-webkit-scrollbar-thumb {
background: #444;
}
.qeel_content::-webkit-scrollbar-thumb:hover {
background: #242424;
}Merci de me créditer (Jei) quelque part sur le forum: footer, sujet dédié, PA ou autre. 
modernBB