- MävenAdmin
- Messages : 236
Points : 106213
Sexe :
Date d'inscription : 24/11/2009
Age : 30
Localisation : chez moi
Feuille de personnage
plouf mon champ RPG: plouf mon champ
Un "Qui est en ligne" simple et clair
Mar 4 Juin 2019 - 21:57
Un "Qui est en ligne" simple et clair
Bonjour à toi
Tu cherches une idée de codage pour le "qui est en ligne" de ton forum ? Je viens t'en proposer un modèle ici, simple et clair
Tu dois avoir accès aux templates
Un minimum de connaissances en HTML et CSS est préférable pour tout comprendre
Ce LS avait été fait pour phpBB2 en priorité. Il a été adapté à toutes les versions SAUF AwesomeBB. Cependant, note bien qu'il change totalement la structure du QEEL des versions autres que phpBB2 (ou pbpBB3)
Ce LS n'est pas du tout adapté ni adaptable à AwesomeBB
Ici, on a des petits différences selon la version. Mais voilà ce qui ne change pas : repère ces deux commentaires :
Supprime tout ce qu'il ya entre les 2 (oui oui, tout ) et remplace le par le HTML qui correspond à la version de ton forum :
On enregistre et on oublie pas de publier le template
Dans la CSS de ton forum (PA -> Affichage -> Couleurs -> Feuille de style CSS) colle la CSS qui correspond à ta version :
Au début de la CSS, pour toutes les versions, je te conseille d'ajouter ce code, qui va permettre, sur l'ensemble de ton forum, que toutes les marges et remplissages (padding et margin) soient pris en compte sans agrandir les tailles données (pour en savoir plus rendez-vous ici :
Aucun des codes n'est commenté, n'hésite pas à dire si tu es un peu perdu, j'en ajouterai. De même si tu as besoin d'aide pour la personnalisation n'hésite pas à le dire je t'assisterai
Si tu te sers de ce code, merci de mettre un petit lien vers la tambouille quelque part sur ton forum, pas trop caché, pour que tes membres puissent venir chercher de l'aide ou des codes par ici aussi : )
Tu cherches une idée de codage pour le "qui est en ligne" de ton forum ? Je viens t'en proposer un modèle ici, simple et clair
Tu dois avoir accès aux templates
Un minimum de connaissances en HTML et CSS est préférable pour tout comprendre
Ce LS avait été fait pour phpBB2 en priorité. Il a été adapté à toutes les versions SAUF AwesomeBB. Cependant, note bien qu'il change totalement la structure du QEEL des versions autres que phpBB2 (ou pbpBB3)
Ce LS n'est pas du tout adapté ni adaptable à AwesomeBB
Partie HTML : modifions le template
Ici, on a des petits différences selon la version. Mais voilà ce qui ne change pas : repère ces deux commentaires :
- Code:
<!-- BEGIN disable_viewonline -->
- Code:
<!-- END disable_viewonline -->
Supprime tout ce qu'il ya entre les 2 (oui oui, tout ) et remplace le par le HTML qui correspond à la version de ton forum :
PhpBB2
- Code:
<div id="qeel">
<div id="groupes">
<span class="gensmall">{GROUP_LEGEND} </span>
</div>
<div id="milieu">
<div class="colonne">
<span class="gensmall">{TOTAL_USERS}<br />
{TOTAL_POSTS}<br />
{NEWEST_USER}</span>
<table>
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
</table>
</div>
<div class="colonne">
<span class="gensmall">{TOTAL_USERS_ONLINE}
<br />
<br />
{LOGGED_IN_USER_LIST}
</span>
<table>{L_CONNECTED_MEMBERS}</table>
</div>
</div>
<div id="chat">
<!-- BEGIN switch_chatbox_activate -->
<span class="gensmall">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}<br />
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
<script type="text/javascript">
//<![CDATA[
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
//]]>
</script>
<!-- END switch_chatbox_popup -->
</span>
<!-- END switch_chatbox_activate -->
</div>
</div>
phpBB3 - punBB - Invision - ModernBB
- Code:
<div id="qeel">
<div id="groupes">
<span class="gensmall">{GROUP_LEGEND} </span>
</div>
<div id="milieu">
<div class="colonne">
<span class="gensmall">{TOTAL_USERS}<br />
{TOTAL_POSTS}<br />
{NEWEST_USER}</span>
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
</div>
<div class="colonne">
<span class="gensmall">{TOTAL_USERS_ONLINE}
<br />
<br />
{LOGGED_IN_USER_LIST}
</span>
{L_CONNECTED_MEMBERS}
</div>
</div>
<div id="chat">
<!-- BEGIN switch_chatbox_activate -->
<span class="gensmall">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}<br />
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
<script type="text/javascript">
//<![CDATA[
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
//]]>
</script>
<!-- END switch_chatbox_popup -->
</span>
<!-- END switch_chatbox_activate -->
</div>
</div>
On enregistre et on oublie pas de publier le template
Partie CSS : attaquons la mise en page
Dans la CSS de ton forum (PA -> Affichage -> Couleurs -> Feuille de style CSS) colle la CSS qui correspond à ta version :
Au début de la CSS, pour toutes les versions, je te conseille d'ajouter ce code, qui va permettre, sur l'ensemble de ton forum, que toutes les marges et remplissages (padding et margin) soient pris en compte sans agrandir les tailles données (pour en savoir plus rendez-vous ici :
- Code:
*{
box-sizing:border-box;
}
PhpBB2
- Code:
/******************QUI EST EN LIGNE*****************************/
#qeel{
width:100%;
margin: 5px; auto 0;
background : #4C5F85;
border: 2px solid #000;
padding:0.5%;
}
#qeel #milieu{
display:flex;
width:100%;
justify-content:space-between;
padding:0.5% 0;
}
#qeel #milieu .colonne{
width:49%;
}
#qeel td{
background:none !important;
}
#qeel #chat, #qeel #groupes{
text-align:center;
}
#qeel #milieu .colonne,#qeel #chat, #qeel #groupes{
padding:1%;
background:#798CB0;
border: 2px solid #000;
}
/******************FIN DU QUI EST EN LIGNE*****************************/
PhpBB3 - PunBB - Invision
- Code:
/******************QUI EST EN LIGNE*****************************/
#qeel{
width:100%;
margin: 5px; auto 0;
background : #4C5F85;
border: 2px solid #000;
padding:0.5%;
}
#qeel #milieu{
display:flex;
width:100%;
justify-content:space-between;
padding:0.5% 0;
}
#qeel #milieu .colonne{
width:49%;
}
#qeel #chat, #qeel #groupes{
text-align:center;
}
#qeel #milieu .colonne,#qeel #chat, #qeel #groupes{
padding:1%;
background:#798CB0;
border: 2px solid #000;
}
/******************FIN DU QUI EST EN LIGNE*****************************/
ModernBB
- Code:
/******************QUI EST EN LIGNE*****************************/
#qeel{
width:100%;
margin: 5px; auto 0;
background : #4C5F85;
border: 2px solid #000;
padding:0.5%;
}
#qeel #milieu{
display:flex;
width:100%;
justify-content:space-between;
padding:0.5% 0;
}
#qeel #milieu .colonne{
width:49%;
}
#qeel #chat, #qeel #groupes{
text-align:center;
}
#qeel #milieu .colonne,#qeel #chat, #qeel #groupes{
padding:1%;
background:#798CB0;
border: 2px solid #000;
}
#chatbox_popup {
float: none;
}
/******************FIN DU QUI EST EN LIGNE*****************************/
Aucun des codes n'est commenté, n'hésite pas à dire si tu es un peu perdu, j'en ajouterai. De même si tu as besoin d'aide pour la personnalisation n'hésite pas à le dire je t'assisterai
Si tu te sers de ce code, merci de mettre un petit lien vers la tambouille quelque part sur ton forum, pas trop caché, pour que tes membres puissent venir chercher de l'aide ou des codes par ici aussi : )
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|