  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.
 Ce 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
 2a 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
 2b - 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="" />
 2c - 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}> <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>
 2d - 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>
 2e - 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.
 2f - 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>
 2g - 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 {
width: 0;
height: 0;
border-style: solid;
border-width: 25px 20px 25px 0;
border-color: transparent #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>
 2f - 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). |
6793![Open in new window](javascript:CaricaFoto("http://nsa31.casimages.com/img/2013/02/12/130212083451499129.png");)
![Open in new window](javascript:CaricaFoto("http://nsa31.casimages.com/img/2013/02/12/130212083452165318.png");)
![Open in new window](javascript:CaricaFoto("http://nsa32.casimages.com/img/2013/02/12/130212083452725981.png");)
![Open in new window](javascript:CaricaFoto("http://nsa32.casimages.com/img/2013/02/12/130212083453269723.png");)
![Open in new window](javascript:CaricaFoto("http://nsa32.casimages.com/img/2013/02/12/130212083453823552.png");)
![Open in new window](javascript:CaricaFoto("http://nsa32.casimages.com/img/2013/02/12/130212083454594267.png");)
![Open in new window](javascript:CaricaFoto("http://nsa31.casimages.com/img/2013/02/12/130212083455196475.png");)
![Open in new window](javascript:CaricaFoto("http://nsa32.casimages.com/img/2013/02/12/130212083458975866.png");)
![Open in new window](javascript:CaricaFoto("http://nsa31.casimages.com/img/2013/02/12/130212083459564407.png");)
Re: Chronique d'Alain01, Surcharge des commentaires,...
Re: Chronique d'Alain01, Surcharge des commentaires,...
