Ce tutoriel nous permettra d'afficher le nombre ainsi que la liste des utilisateurs en ligne sur le forum directement dans la Toolbar.
Dans le template overall_header, ajouter la ligne suivante entre les balises head:
Dans le template index_body, trouver:
Remplacer cette partie par:
Créez un nouveau code Javascript sur Toutes les pages avec le code suivant:
Enfin, ajoutez le CSS suivant dans votre feuille de style:
phpBB2 :
Dans le template overall_header, ajouter la ligne suivante entre les balises head:
Code:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.6.96/css/materialdesignicons.min.css" />
Dans le template index_body, trouver:
Code:
<tr>
<td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}<br />
<br />
{LOGGED_IN_USER_LIST}</span></td>
</tr>
Remplacer cette partie par:
Code:
<tr>
<td class="row1"><span class="gensmall tuo">{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}<br />
<br />
<span class="liul">{LOGGED_IN_USER_LIST}</span></span></td>
</tr>
Créez un nouveau code Javascript sur Toutes les pages avec le code suivant:
Code:
$(function() {
$(function() {
$('#fa_right a#fa_hide').before('<div class="toolbar_users"><span class="mdi mdi-account"></span><span class="tu_count"></span></div><div class="online_users" style="display: none;"><span>Users Online</span><div></div></div>');
$('.tu_count').load('/ span.tuo > strong:first');
$('.online_users div').load('/ span.liul a');
$('.toolbar_users').on('click', function() {
$('.online_users').fadeToggle(150);
});
});
});
Enfin, ajoutez le CSS suivant dans votre feuille de style:
Code:
.toolbar_users {
display: inline-block;
line-height: 30px;
padding: 0 5px;
color: #fff;
margin-left: 10px;
vertical-align: top;
cursor: pointer;
}
.online_users {
position: fixed;
right: 0;
top: 30px;
background-color: white;
width: 175px;
max-height: 250px;
box-sizing: border-box;
box-shadow: 0 0 30px #30303020;
}
.online_users > span {
color: #111;
font-size: 10pt;
font-weight: 600;
padding-bottom: 4px;
display: block;
margin-bottom: 5px;
border-bottom: 1px solid #ebebeb;
background-color: ghostwhite;
margin-top: 5px;
padding: 2% 5%;
}
.online_users div a {
font-size: 9pt;
display: block !important;
margin: 2px 0;
}
.online_users > div {padding: 2.5% 10% 5% 10%;}
Merci de me créditer (Jei) quelque part sur le forum: footer, sujet dédié, PA ou autre; c'est un travail qui a pris plusieurs heures jours de mon temps libre.
phpbb2