Fork me on GitHub

Chronique d'Alain01, Surcharge des commentaires, pas à pas...

201313
Février
  alain01 Divers 3132
Divers

Je vous propose ici de remanier la présentation par défaut des commentaires sous XOOPS, lui apporter un style bien plus épuré, on y gagnera en simplicité, facilité de lecture et convivialité.
Un exemple du rendu final ici (site non xoopsé).

Il est une chose qu'il est impératif de comprendre, voire de maîtriser si l'on veut obtenir le rendu visuel souhaité, pour son site propulsé par XOOPS :
Il s'agit de la surcharge du thème.

En prérequis, je ne pourrai pas m'empêcher de vous aiguiller vers cet article que vous devez lire avec attention.

Pour aujourd'hui, nous allons traiter de surcharge de thèmes, et plus particulièrement de la présentation des commentaires dans votre site.
Si la fonction est présente et opérationnelle, force est de constater que la présentation par défaut des commentaires sous XOOPS n'est pas des plus convivale.
Nous allons donc avancer par étape et tenter de vous fournir les éléments qui vous permettront d'obtenir le même résultat ou du moins un résultat approchant, et surtout de comprendre ce que vous réalisez.

A la fin, vous serez en capacité d'effectuer le même type d'actions sur d'autres éléments.
C'est en quelques sorte un TP (travaux Pratiques) en mode tutorat. Je vous invite à pousser les fichiers à chaque étape afin de voir les changements répercutés.
Bon TP !

Trêve de bavardage, entamons le travail.

Open in new windowCe dont nous avons besoin :
- Les fichiers "templates" commentaires du module système
- Le fichier css (style.css) de votre thème


1 - Copie des fichiers templates vers la surcharge du thème

Copiez les fichiers /www/modules/system/templates/system_comment*.html vers /www/themes/montheme/modules/system
- system_comment.html
- system_comments_flat.html (présentation commentaires à plat)
- system_comments_net.html (présentation commentaires emboités)
- system_comments_thread.html (présentation commentaires par conversation)


2 - Customisation

Open in new window2a Entête

Maintenant, on va travailler uniquement sur les fichiers en surcharge, c'est à dire, sous /www/themes/montheme/modules/system
On va commencer par enlever le bandeau du haut qui n'apporte pas grand chose ("AUTEUR" + "COMMENTAIRE EN DÉBAT")
Éditez les 3 fichiers system_comments_*.html et commentez ceci (ou supprimez-les) :

<!--
<
tr>
    <
th class="width20"><{$lang_poster}></th>
    <
th><{$lang_thread}></th>
  </
tr>
-->

On trouve ces lignes
- 2 fois dans system_comments_net.html et system_comments_thread.html
- 1 fois dans system_comments_flat.html


Open in new window2b - Suppression infos auteur - On ne garde que l'avatar

Maintenant, tout va se passer dans le fichier system_comment.html (pour la suite aussi)
on retire les informations concernant l'auteur :
- Le classement
- La date d'inscription
- Le lieu d'origine
- Le nombre de contributions
- Le statut

On ne laisse que l'avatar de l'auteur
<div class="comUserRank">
    <
div class="comUserRankText"><{$comment.poster.rank_title}></div>
    <
img class="comUserRankImg" src="<{$xoops_upload_url}>/<{$comment.poster.rank_image}>" alt="" />
</
div>
<
img class="comUserImg" src="<{$xoops_upload_url}>/<{$comment.poster.avatar}>" alt="" />
<
div class="comUserStat"><span class="comUserStatCaption"><{$lang_joined}>:</span> <{$comment.poster.regdate}></div>
<
div class="comUserStat"><span class="comUserStatCaption"><{$lang_from}>:</span> <{$comment.poster.from}></div>
<
div class="comUserStat"><span class="comUserStatCaption"><{$lang_posts}>:</span> <{$comment.poster.postnum}></div>
<
div class="comUserStatus"><{$comment.poster.status}></div>

devient
<img class="comUserImg" src="<{$xoops_upload_url}>/<{$comment.poster.avatar}>" alt="" />



Open in new window2c - Déplacement nom auteur et date, mise en forme

On simplie l'affichage de la date du commentaire :
On remplace donc
<tr>
          <
td class="head"><a id="comment<{$comment.id}>"></a> <{$comment.poster.uname}></td>
          <
td class="head"><div class="comDate"><span class="comDateCaption"><{$lang_posted}>:</span> <{$comment.date_posted}>&nbsp;&nbsp;<span class="comDateCaption"><{$lang_updated}>:</span> <{$comment.date_modified}></div></td>
        </
tr>

par
<tr>
          <
td><a id="comment<{$comment.id}>"></a></td>
          <
td><{$comment.poster.uname}> a dit le <{$comment.date_posted}> (<{$lang_updated}>: <{$comment.date_modified}>)</td>
        </
tr>



Open in new window2d - Date commentaire et modification identiques ?

Ici, on ne veut pas voir apparaître la date de modification du commentaire si c'est la même que la date de publication du commentaire.
On remplace donc le code précédent par
<tr>
    <
td><a id="comment<{$comment.id}>"></a></td>
    <
td><{$comment.poster.uname}> a dit le <{$comment.date_posted}>
        <{if 
$comment.date_posted != $comment.date_modified}>
            (
modifié le <{$comment.date_modified}>)
        <{/if}>
    </
td>
</
tr>



Open in new window2e - Déplacement des boutons vers le haut

On veut placer les boutons sur le haut.
D'abord, récupérez le code de test auteur, en bas du fichier, en enlevant toutes les lignes qui se rapportent à < td > et < /td >.
On obtient pour ce bout de code donc ceci, avec l'ajout d'un div appuyé à droite :
<div style="float:right;">
<{if 
$xoops_iscommentadmin == true}>
    <
a href="<{$editcomment_link}>&com_id=<{$comment.id}>" title="<{$lang_edit}>"><img src="<{$xoops_url}>/images/icons/edit.gif" alt="<{$lang_edit}>" /></a>
    <
a href="<{$deletecomment_link}>&com_id=<{$comment.id}>" title="<{$lang_delete}>"><img src="<{$xoops_url}>/images/icons/delete.gif" alt="<{$lang_delete}>" /></a>
    <
a href="<{$replycomment_link}>&com_id=<{$comment.id}>" title="<{$lang_reply}>"><img src="<{$xoops_url}>/images/icons/reply.gif" alt="<{$lang_reply}>" /></a>
<{elseif 
$xoops_isuser == true && $xoops_userid == $comment.poster.id}>
    <
a href="<{$editcomment_link}>&com_id=<{$comment.id}>" title="<{$lang_edit}>"><img src="<{$xoops_url}>/images/icons/edit.gif" alt="<{$lang_edit}>" /></a>
    <
a href="<{$replycomment_link}>&com_id=<{$comment.id}>" title="<{$lang_reply}>"><img src="<{$xoops_url}>/images/icons/reply.gif" alt="<{$lang_reply}>" /></a>
<{elseif 
$xoops_isuser == true || $anon_canpost == true}>
        <
a href="<{$replycomment_link}>&com_id=<{$comment.id}>"><img src="<{$xoops_url}>/images/icons/reply.gif" alt="<{$lang_reply}>" /></a>
<{/if}>
</
div>
Insérez ce code juste après le <{/ if }> de la date de commentaire

Maintenant, il faut retirer les boutons en bas, qui sont alors en doublons avec ceux que l'on vient de placer en haut.
Il suffit de supprimer tout le contenu du dernier < tr >< /tr > du fichier, y compris le < tr >< /tr > lui-même.


Open in new window2f - Mises en forme

- Suppression du titre et de l'image du titre :
On supprime la ligne
<div class="comTitle"><{$comment.image}><{$comment.title}></div>


- Ajout d'une largeur fixe sur la colonne de gauche
<td style="width:120px;"><a id="comment<{$comment.id}>"></a></td>


- Supression classe "odd" au conteneur 'td' contenant l'avatar de l'utilisateur et centrage de l'image dans sa colonne
<td style="text-align:center;">
                    <
img class="comUserImg" src="<{$xoops_upload_url}>/<{$comment.poster.avatar}>" alt="" />
                </
td>



Open in new window2g - Ajout d'une flèche

On a maintenant besoin d'intervenir sur le fichier style.css de notre thème pour utiliser une flèche réalisée en pur CSS.
Pour mon thème, il se situe sous /www/themes/montheme/css/style.css
On ajoute dans ce fichier :
.arrow-left {
width0;
height0;
border-stylesolid;
border-width25px 20px 25px 0;
border-colortransparent #ECE9D8 transparent transparent;
}
Evidemment, la couleur #ECE9D8 est à adapter selon la couleur de votre classe "odd"

Ajout d'une colonne.
On va insérer une colonne qui permettra de placer notre flèche à gauche du commentaire.
- Ajoutez une balise
<td></td>
après
<td style="width:120px;"><a id="comment<{$comment.id}>"></a></td>

- Ajoutez une balise
<td></td>
avant
<td class="odd"><div class="comText"><{$comment.text}></div></td>


Sur la deuxième balise insérée, ajoutez dedans :
<div class="arrow-left"></div>
et un style définissant la largeur à 20 pixels :
On obtient donc :
<td style="width:20px;"><div class="arrow-left"></div></td>



Open in new window2f - Mises en forme

Ajout de 2 sauts de lignes pour bien séparer visuellement les commentaires entre eux. (À laisser juste avant le nom de l'auteur)
<td><br /><br /><{$comment.poster.uname}>


Et voilà. Vous avez fini...

3 - Fichier system_comment.html final

Pour ceux et celles qui veulent obtenir le fichier system_comment.html finalisé, il est ici, disponible :
<!-- start comment post -->
        <
tr>
            <
td style="width:120px;"><a id="comment<{$comment.id}>"></a></td>
            <
td></td>
            <
td><br /><br /><{$comment.poster.uname}> a dit le <{$comment.date_posted}>
                    <{if 
$comment.date_posted != $comment.date_modified}>
                        (
modifié le <{$comment.date_modified}>)
                    <{/if}>
                    <
div style="float:right;">
                        <{if 
$xoops_iscommentadmin == true}>
                            <
a href="<{$editcomment_link}>&com_id=<{$comment.id}>" title="<{$lang_edit}>"><img src="<{$xoops_url}>/images/icons/edit.gif" alt="<{$lang_edit}>" /></a>
                            <
a href="<{$deletecomment_link}>&com_id=<{$comment.id}>" title="<{$lang_delete}>"><img src="<{$xoops_url}>/images/icons/delete.gif" alt="<{$lang_delete}>" /></a>
                            <
a href="<{$replycomment_link}>&com_id=<{$comment.id}>" title="<{$lang_reply}>"><img src="<{$xoops_url}>/images/icons/reply.gif" alt="<{$lang_reply}>" /></a>
                        <{elseif 
$xoops_isuser == true && $xoops_userid == $comment.poster.id}>
                            <
a href="<{$editcomment_link}>&com_id=<{$comment.id}>" title="<{$lang_edit}>"><img src="<{$xoops_url}>/images/icons/edit.gif" alt="<{$lang_edit}>" /></a>
                            <
a href="<{$replycomment_link}>&com_id=<{$comment.id}>" title="<{$lang_reply}>"><img src="<{$xoops_url}>/images/icons/reply.gif" alt="<{$lang_reply}>" /></a>
                        <{elseif 
$xoops_isuser == true || $anon_canpost == true}>
                            <
a href="<{$replycomment_link}>&com_id=<{$comment.id}>"><img src="<{$xoops_url}>/images/icons/reply.gif" alt="<{$lang_reply}>" /></a>
                        <{/if}>
                    </
div>
            </
td>
        </
tr>

        <
tr>
            <{if 
$comment.poster.id != 0}>
                <
td style="text-align:center;">
                    <
img class="comUserImg" src="<{$xoops_upload_url}>/<{$comment.poster.avatar}>" alt="" />
                </
td>
            <{else}>
                <
td class="odd"> </td>
            <{/if}>
                <
td style="width:20px;"><div class="arrow-left"></div></td>
                <
td class="odd">
                    <
div class="comText"><{$comment.text}></div>
                </
td>
        </
tr>
 <
tr><td></td><td></td><td></td></tr>
<!-- 
end comment post -->


Bien sûr, ce n'est pas parfait, il faudrait notamment :
- Enlever la "table" pour n'utiliser que des "div",
- Ne pas définir en dur des styles dans le code mais faire référence à des classes pré-déclarées.
- Arrondir les angles,
- affiner le positionnement des éléments...

Le but ici n'était pas de produire un code parfait. Il était de maîtriser la prise en main d'une surcharge, et de montrer pas à pas comment faire évoluer le design de son site.

Conclusion :
Avec un peu de temps et une bonne compréhension de la surcharge du thème, il est largement possible de rendre un module d'aspect vieillissant en module convivial, simple et adapté à son public.

J'espère avoir ouvert une porte pour certains d'entre vous et que vous allez vous y faufiler pour surcharger les "templates" de vos modules.

Si ce type d'articles vous a plu, faites-le nous savoir dans vos commentaires (toute critique est bonne à prendre).

Note: 9.00 (1 vote) - Noter cet article -

Partager Twitter Partagez cette article sur GG+
Format imprimable Envoyer cet article à un ami Créer un fichier PDF à partir de cet article
Les commentaires appartiennent à leurs auteurs. Nous ne sommes pas responsables de leur contenu.
Admin Frxoops
Inscrit le: 16/05/2003
De: Rhone-Alpes
Contributions: 3128
alain01 Posté le: 13/02/2013 08:55  Mis à jour: 13/02/2013 09:45
 Re: Chronique d'Alain01, Surcharge des commentaires,...
Hello,
Amis Hackers, l'adresse IP que vous voyez ici dans les captures d'écrans n'est pas la mienne mais celle d'un routeur d'un fournisseur d'accès...
Autant vous le dire tout de suite...

PS : Attention coquille
Il faut lire "/www/themes/montheme/" plutôt que /www/theme/montheme/, désolé.
Admin Frxoops
Inscrit le: 16/03/2009
De: Tende (06)
Contributions: 2390
Cesag Posté le: 13/02/2013 10:59  Mis à jour: 13/02/2013 10:59
 Re: Chronique d'Alain01, Surcharge des commentaires,...
Citation :
alain01 a écrit :
Il faut lire "/www/themes/montheme/" plutôt que /www/theme/montheme/, désolé.


Corrigé
Team FrXoops
Inscrit le: 08/11/2011
De:
Contributions: 92
gwenael Posté le: 13/02/2013 11:48  Mis à jour: 13/02/2013 11:48
 Re: Chronique d'Alain01, Surcharge des commentaires,...
Il y a quelques mois, je n'avais pas d'avis prononcé sur un CMS particulier, ne connaissant pas grand-chose de ce monde. J'ai plutôt regardé, à l'estime, le comportement des communautés d'utilisateurs et de développeurs. J'ai remarqué FrXOOPS ; je ne regrette pas de m'y être attaché.. ; cet article confirme mon intuition première, le mémo sur CRON, tout autant.

Gwénaël
Semi pro
Inscrit le: 10/11/2004
De:
Contributions: 1644
Nikita Posté le: 13/02/2013 14:48  Mis à jour: 13/02/2013 14:48
 Re: Chronique d'Alain01, Surcharge des commentaires,...
Chapeau Alain , toutes les ressources que tu apportes à la communauté sont de qualité et très très appréciables. Merci pour ce boulot !!!!
Régulier
Inscrit le: 29/03/2007
De:
Contributions: 343
flaggada Posté le: 15/02/2013 11:44  Mis à jour: 15/02/2013 11:44
 Re: Chronique d'Alain01, Surcharge des commentaires,...
Super tuto, merci!
Admin Frxoops
Inscrit le: 16/05/2003
De: Rhone-Alpes
Contributions: 3128
alain01 Posté le: 15/02/2013 16:15  Mis à jour: 15/02/2013 16:15
 Re: Chronique d'Alain01, Surcharge des commentaires,...
Merciiii !

Si vous faîtes le pas et que vous avez des questions, rendez-vous sur le forum ici :
http://www.frxoops.org/modules/newbb/viewtopic.php?post_id=227131
Semi pro
Inscrit le: 25/08/2005
De: Aix les bains
Contributions: 1234
petitours Posté le: 18/02/2013 21:55  Mis à jour: 18/02/2013 21:55
 Re: Chronique d'Alain01, Surcharge des commentaires,...
Merci beaucoup

Un article comme ça est une mine d'information, même quand on a compris la surcharge. On y trouve confirmation sur certaines choses et ce qui ressemble à une révolution sur d'autres choses pratiquées de manière beaucoup moins efficaces !

Quand on sait le temps qu'il faut pour faire un tel article... Merci beaucoup !
Newbie
Inscrit le: 19/02/2013
De:
Contributions: 2
xiding99 Posté le: 19/02/2013 02:19  Mis à jour: 22/02/2013 18:51
 Re: Chronique d'Alain01, Surcharge des commentaires,...
Super tuto, merci!
Admin Frxoops
Inscrit le: 16/05/2003
De: Rhone-Alpes
Contributions: 3128
alain01 Posté le: 19/02/2013 15:31  Mis à jour: 19/02/2013 15:31
 Re: Chronique d'Alain01, Surcharge des commentaires,...
Merkiii, ça me fait plaisir ^^
Admin Frxoops
Inscrit le: 04/03/2011
De: Lot
Contributions: 2007
montuy337513 Posté le: 22/02/2013 17:01  Mis à jour: 22/02/2013 17:01
 Re: Chronique d'Alain01, Surcharge des commentaires,...
tiens une coquille que je n'avais pas vu, en CSS on ne met pas width : 0px; mais width: 0;

Je vais corriger cela dans l'article.
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

17 Personne(s) en ligne (1 Personne(s) connectée(s) sur Articles) | Utilisateur(s): 0 | Invité(s): 17 | Plus ...