Le "Qui est ligne" revu et amélioré ..

Introduction :



Vous en avez rêvé de ce pied page pour le forum PBt ? Il ne nous manquait que quelques informations que je vais vous dévoiler sur ce sujet.

- Version du CMS : PHPBoost V3.XX Tornade (adaptable vers les autres versions avec beaucoup de modtifications, mais pas testé.)

Le visuel :



Voici ce que cette modification va vous apporter :
- Les membre connectés en même temps que vous.
- Les derniers connectés sur les dernières 24heures.
- Des statistiques ...
- Et la couleur des légendes des groupes ( que vous pourrez ensuite modifier manuellement dans le tpl si vous en avez d'autres ..)



Preview du pied du forum après ...




La mise en place:



- Commencez par vérifier que dans le dossier "templates/votre thème", dans le dossier "modules/forum" est existant, si oui, regardez si le fichier "forum_bottom.tpl" est présent. Si oui éditez le avec Notpad++

Ou

- Si le dossier et le fichier sont inexistants dans le dossier "templates/votre thème", Créez le dossier "Modules" ( si inexistant bien sur ), le dossier forum ( si inexistant bien sur ), créez y un document texte avec Notpad++, que vous nommerez "forum_bottom.tpl" par la suite..

Vous avez le fichier vierge ouvert ... Copiez y le code ci dessous en totalité :

Code TPL :
 
<br />
<div class="module_position_forum" style="border:none;">
# IF C_AUTH_POST #
<div class="forum_infos">
<div class="forum_action">
# IF C_DISPLAY_MSG #
<span id="forum_change_statut">
<a href="action{U_ACTION_MSG_DISPLAY}#go_bottom">{ICON_DISPLAY_MSG}</a><a href="action{U_ACTION_MSG_DISPLAY}#go_bottom" class="small_link">{L_EXPLAIN_DISPLAY_MSG_DEFAULT}</a>
</span>
<script type="text/javascript">
<!--
document.getElementById('forum_change_statut').style.display = 'none';
document.write('<a href="javascript:XMLHttpRequest_change_statut()" class="small_link">{ICON_DISPLAY_MSG2}</a> <a href="javascript:XMLHttpRequest_change_statut()" class="small_link"><span id="forum_change_msg">{L_EXPLAIN_DISPLAY_MSG_DEFAULT}</span></a>');
-->
</script>
&nbsp;
# ENDIF #
<a href="alert{U_ALERT}#go_bottom" class="small_link"><img class="valign_middle" src="{MODULE_DATA_PATH}/images/important_mini.png" alt="" /></a> <a href="alert{U_ALERT}#go_bottom" class="small_link">{L_ALERT}</a>
<span id="forum_track">
<a href="action{U_SUSCRIBE}#go_bottom">{ICON_TRACK}</a> <a href="action{U_SUSCRIBE}#go_bottom" class="small_link">{L_TRACK_DEFAULT}</a>
</span>
<script type="text/javascript">
<!--
document.getElementById('forum_track').style.display = 'none';
document.write('<a href="javascript:XMLHttpRequest_track()" class="small_link">{ICON_TRACK2}</a> <a href="javascript:XMLHttpRequest_track()" class="small_link"><span id="forum_track_msg">{L_TRACK_DEFAULT}</span></a>');
-->
</script>
&nbsp;
<span id="forum_track_pm">
<a href="action{U_SUSCRIBE_PM}#go_bottom">{ICON_SUSCRIBE_PM}</a> <a href="action{U_SUSCRIBE_PM}#go_bottom" class="small_link">{L_SUSCRIBE_PM_DEFAULT}</a>
</span>
<script type="text/javascript">
<!--
document.getElementById('forum_track_pm').style.display = 'none';
document.write('<a href="javascript:XMLHttpRequest_track_pm()" class="small_link">{ICON_SUSCRIBE_PM2}</a> <a href="javascript:XMLHttpRequest_track_pm()" class="small_link"><span id="forum_track_pm_msg">{L_SUSCRIBE_PM_DEFAULT}</span></a>');
-->
</script>
&nbsp;
<span id="forum_track_mail">
<a href="action{U_SUSCRIBE_MAIL}#go_bottom">{ICON_SUSCRIBE}</a> <a href="action{U_SUSCRIBE_MAIL}#go_bottom" class="small_link">{L_SUSCRIBE_DEFAULT}</a>
</span>
<script type="text/javascript">
<!--
document.getElementById('forum_track_mail').style.display = 'none';
document.write('<a href="javascript:XMLHttpRequest_track_mail()" class="small_link">{ICON_SUSCRIBE2}</a> <a href="javascript:XMLHttpRequest_track_mail()" class="small_link"><span id="forum_track_mail_msg">{L_SUSCRIBE_DEFAULT}</span></a>');
-->
</script>
</div>
</div>
# ENDIF #
# IF C_USER_CONNECTED #
<div class="forum_infos">
<img src="{MODULE_DATA_PATH}/images/track_mini.png" alt="" class="valign_middle" /> {U_TOPIC_TRACK} &nbsp;
<img src="{MODULE_DATA_PATH}/images/last_mini.png" alt="" class="valign_middle" /> {U_LAST_MSG_READ} &nbsp;
<img src="{MODULE_DATA_PATH}/images/new_mini.png" alt="" class="valign_middle" /> <span id="nbr_unread_topics2">{U_MSG_NOT_READ}</span>
<div style="position:relative;float:left;">
<div style="position:absolute;z-index:100;float:left;margin-left:130px;display:none;" id="forum_blockforum_unread2">
</div>
</div>
<a href="javascript:XMLHttpRequest_unread_topics('2');" onmouseover="forum_hide_block('forum_unread2', 1);" onmouseout="forum_hide_block('forum_unread2', 0);"><img src="../templates/{THEME}/images/refresh_mini.png" alt="" id="refresh_unread2" class="valign_middle" /></a>
&nbsp;<img src="../templates/{THEME}/images/read_mini.png" alt="" class="valign_middle" /> {U_MSG_SET_VIEW}
</div>
# ENDIF #
</div>
# IF SELECT_CAT #
<br />
<div class="module_position_forum" style="height: 80px;">
<div class="forum_infos"><strong>&nbsp; Navigation rapide</strong></div>
<br />
<div style="float:left;width:auto;">
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/breadcrumb.png" alt="" class="valign_middle" /> Rechercher un forum en toute simplicité avec la navigation rapide
</div>
<div style="float:right;width:auto;">
<form action="{U_CHANGE_CAT}" method="post">
<div>
<select name="change_cat" onchange="if(this.options[this.selectedIndex].text.substring(0, 4) == '----') document.location = 'forum{U_ONCHANGE}'; else document.location = '{U_ONCHANGE_CAT}';">
{SELECT_CAT}
</select>
<noscript>
<div><input type="submit" name="valid_change_cat" value="Go" class="submit" /></div>
</noscript>
</div>
</form>
</div>
</div>
# ENDIF #
<br />
<table class="mod_pos_for">
 <tbody>
<tr> 
<td class="module_top" colspan="4" ><a href="index.php{SID}">Qui est en ligne ?</a></td>
 </tr>
 <tr>     
<td class="row_image" valign="middle" align="center" rowspan="4" >
<img alt="Qui est en ligne ?" src="{PATH_TO_ROOT}/templates/{THEME}/modules/forum/images/whoisonline.png">
</td>
<td class="row_users" width="100%" align="left">
<div class="forum_online">
<h3><img src="{PATH_TO_ROOT}/templates/{THEME}/images/ancre.png" alt="" class="valign_middle" /> En ce moment, sur le site :</h3>
# IF USERS_ONLINE #
Au total il y a {TOTAL_ONLINE} {L_USER} {L_ONLINE} :: {ADMIN} {L_ADMIN}, {MODO} {L_MODO}, {USER} {L_USER} {L_AND} {GUEST} {L_GUEST}
<br /><em>( basées sur les utilisateurs actifs des 5 dernières minutes ) </em>
<br />
{L_USER} {L_ONLINE}: {USERS_ONLINE}  
# ENDIF #
<br /> 
</div>
</td>
  </tr>
<tr style="border-top: 1px solid #DDDDDD;"> 
<td class="row_stats" align="left" >
<div class="forum_online">
<h3><img src="{PATH_TO_ROOT}/templates/{THEME}/images/ancre.png" alt="" class="valign_middle" /> Membres connectés au cours des dernières 24 heures: </h3>
<?php
GLOBAL $Sql ;
$timestamp = 3600 * 24;
$time = time();
$time_left = $time - $timestamp;
$result = $Sql->query_while("
SELECT user_id, login, last_connect, level, user_groups
FROM " . DB_TABLE_MEMBER . "
WHERE last_connect > ". $time_left ."
", __LINE__, __FILE__);
$level = array('class="member" ', 'class="modo" ', 'class="admin" ');
while($row = $Sql->fetch_assoc($result)) {
if ($row['level'] !== '-1'){ $group_color = User::get_group_color($row['user_groups'], $row['level']); }
$LEVEL=(!empty($group_color) ? ' style="font-weight:bold;color:' . $group_color . '"' : $level[$row['level']]) ;
echo '<a href="/member/member.php?id='.$row['user_id'].'" '.$LEVEL.'> '.$row['login'].'</a>, ';
}
$Sql->query_close($result);
?>
<div class="spacer"></div>
</div>
</td>
</tr>
<tr style="border-top: 1px solid #DDDDDD;"> 
<td class="row_stats" align="left" >
<div class="forum_online">
<h3><img src="{PATH_TO_ROOT}/templates/{THEME}/images/ancre.png" alt="" class="valign_middle" />  Statistiques </h3>
# IF C_TOTAL_POST #
Nos membres ont posté un total de: <strong>{NBR_MSG}</strong> {L_MESSAGE} {L_DISTRIBUTED} <strong>{NBR_TOPIC}</strong> {L_TOPIC}&nbsp;|
# ENDIF #
  <a href="stats.php{SID}">Voir les Statistiques ... </a>
<div class="spacer"></div>
</div>
</td>
</tr>
<tr style="border-top: 1px solid #DDDDDD;"> 
<td class="row_stats" align="left" >
<div class="forum_online">
<h3><img src="{PATH_TO_ROOT}/templates/{THEME}/images/ancre.png" alt="" class="valign_middle" /> <em>Légende</em></h3>
&nbsp;[ <a class="admin" href="#">Administrateurs</a> ] &nbsp; [ <a class="modo" href="#">Modérateurs</a> ] &nbsp; [ <a class="member" href="#"> Membres </a> ]
<div class="spacer"></div>
</div>
</td>
</tr>
</tbody>
</table>
<br />
# IF C_USER_NOTCONNECTED #
<table class="mod_pos_for" cellspacing="1" cellpadding="3" >
<tbody>
  <tr> 
<td height="28" colspan="2" class="forum_infos">&nbsp; Se connecter ...</td>
  </tr>
 
  <tr>   
<td class="row_connectR" valign="middle" align="left" rowspan="1"><h3><img src="{PATH_TO_ROOT}/templates/{THEME}/images/ancre.png" alt="" class="valign_middle" />  Connexion</h3></td>
<td align="left" class="row_connectL">
<div class="forum_online">
<span style="text-align:middle;">
<form method="post" action="">
<p style="margin-bottom:8px;" class="text_small"><label>{L_PSEUDO} <input size="20" type="text" class="text" name="login" maxlength="25" /></label>
<label><input type="password" maxlength="30" class="text" name="password" size="20"></label>
&nbsp;| <label>Connexion auto {L_AUTOCONNECT} <input type="checkbox" name="auto" checked="checked" /></label>
&nbsp;| <input class="submit" type="submit" value="Se connecter" name="connect"></p>
</form>
</span>
</div>
</td>
  </tr>
 
  <tr style="border-top: 1px solid #cccccc;">   
<td class="row_connectR" valign="middle" align="left" rowspan="1"><h3><img src="{PATH_TO_ROOT}/templates/{THEME}/images/ancre.png" alt="" class="valign_middle" /> Vous n'êtes pas encore inscrit ? </h3></td>
<td align="left" class="row_connectL">
<div class="forum_online">
<span style="text-align:middle;">
<a href="/site/member/register.php">Inscrivez vous dès maintenant</a>
</span>
</div>
</td>
  </tr>
 
</tbody>
</table>
# ENDIF #
<div class="spacer"></div>
<br />
 


<span class="note"> Pour les férus du html comme EDN, vous remarquerez que nous avons utilisé une table, des TD et des TR .. certes moins flexibles que des DIV, mais plus strict pour cette architecte là, pour avoir ce résultat.</span>

Enregistrer le avec Notpad++ sous forum_bottom.tpl au format d'encodage de fichier : ANSI

L'image



Vous trouverez l'appel de l'image de la ligne 103 à 107, du fichier "forum_bottom.tpl", soit :

Code TPL :
<td class="row_image" valign="middle" align="center" rowspan="4" >
<img alt="Qui est en ligne ?" src="{PATH_TO_ROOT}/templates/{THEME}/modules/forum/images/whoisonline.png">
</td>


- Votre image se nomme : whoisonline.png
- Le gabarit de l'image est de 168px de large par 318px de hauteur.



*Pour plus de simplicité vous pouvez changer le lien de l'image vers le dossier "/templates/{THEME}/theme/images".

Et n'oubliez pas de mettre l'image dans le dossier que vous aurez choisi, bien entendu ;)


Le css ...



Récupèrez le fichier "forum.css" dans le dossier racine "forum/templates" et copier collez le dans le dossier "templates/votre thème/modules/form" ( si inexistant bien sur ), sinon éditez le, pour y placer le code ci-dessous tout à la fin du fichier :

Code CSS :
 
/*---------------------------------
 * Titre    : Mod Online EDN forum 
 * Auteur   : EDN | Swan
 * Site web :  http://easy-design.net/
 * Commentaire ou autre de l'auteur 
 # Contient les conteneur, fortement dépendant du design.
 # Merci de ne pas toucher au entête des fichiers CSS.
 *----------------------------------------------------------*/
.module_position_forum{
    background: none repeat scroll 0 0 #eeeeee;
    border: 1px solid #dddddd;
    border-radius: 3px;
color: #444444;
    margin: 5px 0 15px;
    width: 99%;
}
.forum_infos {
    background: none repeat scroll 0 0 #333333; 
    border-bottom: 1px solid #DDDDDD;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
 color: #eeeeee;
    font-weight: normal;
    height: 28px;
    padding-left: 6px;
padding-top: 5px;
}
.forum_infos  a.small_link {
 color: #eeeeee;
}
table.mod_pos_for {
    background: none repeat scroll 0 0 #eeeeee;
    border: 1px solid #dddddd;
    border-radius: 3px;
    margin: auto;
color: #444444;
    padding: 6px;
    width: 98%;
}
.row_image {
    border-right: 1px solid #686868;
    padding: 8px 6px;
}
.row_users {
    padding: 8px 6px;
}
.row_stats {
    padding: 8px 6px;
}
.row_connectR {
    border-right: 1px solid #686868;
    padding: 8px 6px;
}
.row_connectL {
    padding: 8px 6px;
}
.msg_contents_container img {
    max-width: 600px;
}
 


<span class="astuce"> C'est dans cette parti de css que vous redéfinirez les couleurs de lien et de fonds</span>

Enregistrer le avec Notpad++ sous forum.css au format d'encodage de fichier : ANSI

Conclusion



Pour adapter ce tutoriel pour les versions supérieur V4.xx & 4.1 et plus ... veiller à supprimer les balises commentaires et à faire attention aux variables qui ont surement changées entre les différentes versions. Je ne garantie aucunement le fonctionnement sur les version supérieur.

Et pour finir n'oubliez pas de régénérer vos caches : celui de l'administration de votre site et s'il le faut aussi celui de votre navigateur.

Si vous avez des questions ou alors que vous souhaitez de plus amples informations, le forum est à votre disposition :)
Cette page a été consultée 2032 fois