Ajouter la date et l'heure dans la shoutbox verticaleWiki

Introduction

Cette article a pour but de vous expliquer comment ajouter la date et l'heure dans la shoubox lorsqu'elle est affichée sur une colonne droite ou gauche.

L'affichage dans la colonne droite ou gauche correspond à un affichage de type "vertical".

Les fichiers à modifier

Code HTML

L'affichage de la shoutbox en vertical correspond au fichier shoutbox_mini.tpl du répertoire \shoutbox\templates.

Et plus précisément à la partie suivante :

Code TEMPLATE :

# IF C_VERTICAL #
    <div class="module-mini-container">
        <div class="module-mini-top">
            <h5 class="sub-title">{L_SHOUTBOX}</h5>
        </div>
        <div class="module-mini-contents">
            <div id="shout-container">
                # START shout #
                <p id="shout-container-{shout.IDMSG}"><span class="small">{shout.PSEUDO} : {shout.CONTENTS}</span></p>
                # END shout #
            </div>
            # IF C_VISIBLE_SHOUT #
            <label for="shout_pseudo"><span class="small">{L_PSEUDO}</span></label>
            <input size="16" maxlength="25" type="text" name="shout_pseudo" id="shout_pseudo" value="{SHOUTBOX_PSEUDO}">
            # ENDIF #
            # IF C_HIDDEN_SHOUT #
            <input size="16" maxlength="25" type="hidden" name="shout_pseudo" id="shout_pseudo" value="{SHOUTBOX_PSEUDO}">
            # ENDIF #
            <br />
            <label for="shout_contents"><span class="small">{L_MESSAGE}</span></label>
            <textarea id="shout_contents" name="shout_contents" rows="4" cols="16"></textarea>
 
            <p class="shout-spacing">
                <button onclick="XMLHttpRequest_shoutmsg();" type="button">{L_SUBMIT}</button>
                <a href="javascript:XMLHttpRequest_shoutrefresh();" title="{L_REFRESH}"><i class="fa fa-refresh" id="shoutimg"></i></a>
            </p>
            <a class="small" href="{PATH_TO_ROOT}/shoutbox/shoutbox.php{SID}" title="">{L_ARCHIVES}</a>
        </div>
        <div class="module-mini-bottom"></div>
    </div>
# ELSE #

Pour afficher la date, il suffit d'ajouter à la place de la ligne 126 :

Code TPL :

<p id="shout-container-{shout.IDMSG}"><span class="small">{shout.PSEUDO} : {shout.CONTENTS}</span></p>

l’élément suivant :

Code TPL :

<span class="small"> {shout.DATE} : </span>

Ce qui donne :

Code TPL :

<p id="shout-container-{shout.IDMSG}">
    <span class="small"> {shout.DATE} : </span><br />
    <span class="small">{shout.PSEUDO} : {shout.CONTENTS}</span>
</p>

Gérer aussi le rafraîchissement

Afin d'actualiser les messages au fil du temps, il y a une gestion en AJAX des messages.

Pour cela il suffit de modifier la ligne 83 :

Code TPL :

var xhr_object = xmlhttprequest_init('{PATH_TO_ROOT}/shoutbox/xmlhttprequest.php?refresh=1# IF C_HORIZONTAL #&display_date=1# ENDIF #&token={TOKEN}');

par celle-ci :

Code TPL :

var xhr_object = xmlhttprequest_init('{PATH_TO_ROOT}/shoutbox/xmlhttprequest.php?refresh=1&display_date=1&token={TOKEN}');

Adaptation CSS

Afin d'optimiser l'affichage, il sera sûrement nécessaire d'agrandir la surface d'affichage.

Le CSS du mini_module Shoutbox est le fichier shoutbox_mini.css du répertoire \shoutbox\templates.

Je conseil d'ajouter en fin de fichier la classe suivante :

Code CSS :

div#shout-container {
    width: 95%;
}