Le code

1. Commencer par rechercher la portion de code présente comprise entre :

<!-- # Comments -->

et :

<tpl:EntryIf comments_active="1">

2. Remplacer les lignes comprises entre les 2 balises cités précédemment par :

<tpl:EntryIf operator="or" show_comments="1" show_pings="1">
       <tpl:Comments with_pings="1">
    <tpl:CommentsHeader>
      <div id="comments">
        <h3>{{tpl:lang Comments}}</h3>
      <dl>
    </tpl:CommentsHeader>
 
<!-- # COMMENTAIRES -->
<tpl:CommentIf is_ping="0">
      <dt id="c{{tpl:CommentID}}" class="comment {{tpl:CommentIfMe}} {{tpl:CommentIfOdd}} {{tpl:CommentIfFirst}}"><a
      href="#c{{tpl:CommentID}}" class="comment-number">{{tpl:CommentOrderNumber}}.</a>
      {{tpl:lang On}} {{tpl:CommentDate}}, {{tpl:CommentTime}}
      {{tpl:lang by}} {{tpl:CommentAuthorLink}}</dt>
 
      <dd class="comment {{tpl:CommentIfMe}} {{tpl:CommentIfOdd}} {{tpl:CommentIfFirst}}">
      <!-- # --BEHAVIOR-- publicCommentBeforeContent -->
      {{tpl:SysBehavior behavior="publicCommentBeforeContent"}}
 
      {{tpl:CommentContent}}
 
      <!-- # --BEHAVIOR-- publicCommentAfterContent -->
      {{tpl:SysBehavior behavior="publicCommentAfterContent"}}
      </dd>
</tpl:CommentIf>
 
 
<!-- # RETROLIENS -->
<tpl:CommentIf is_ping="1">
   <dt id="c{{tpl:PingID}}" class="ping {{tpl:PingIfOdd}} {{tpl:PingIfFirst}}"><a href="#c{{tpl:PingID}}"
        class="ping-number">{{tpl:PingOrderNumber}}.</a>
        {{tpl:lang On}} {{tpl:PingDate}}, {{tpl:PingTime}}
        {{tpl:lang by}} {{tpl:PingBlogName encode_html="1"}}</dt>
 
        <dd class="ping {{tpl:PingIfOdd}} {{tpl:PingIfFirst}}">
        <!-- # --BEHAVIOR-- publicPingBeforeContent -->
        {{tpl:SysBehavior behavior="publicPingBeforeContent"}}
 
        <p><a href="{{tpl:PingAuthorURL}}"
        {{tpl:PingNoFollow}}>{{tpl:PingTitle encode_html="1"}}</a></p>
        {{tpl:PingContent}}
 
        <!-- # --BEHAVIOR-- publicPingAfterContent -->
        {{tpl:SysBehavior behavior="publicPingAfterContent"}}
        </dd>
</tpl:CommentIf>
 
 
      <!-- # --BEHAVIOR-- publicCommentAfterContent -->
      {{tpl:SysBehavior behavior="publicCommentAfterContent"}}
 
    <tpl:CommentsFooter>
      </dl>
      </div>
    </tpl:CommentsFooter>
    </tpl:Comments>
  </tpl:EntryIf>

Styler

Tout ce qui agit sur les 2 formes de commentaires se jouent avec #comments et pour toute différence passer .comment et .ping.

Afin de bien différencier pour les besoins du tests (et donc à supprimer par la suite), j’ai inclus l’attribut content qui indique par un texte la qualité du commentaire.

/* # AGIT SUR COMMENTAIRES + RETROLIENS */
 
#comments dd {
	margin-bottom: 3em;
	padding: 1em;
}
 
#comments dt {
	padding: 0.25em 1em;
}
 
/* # AGIT SUR LES COMMENTAIRES */
dt.comment {
	font-weight: bold;
	background: #666;
	color: white;
}
 
	dt.comment:before {
	content:"Commentaire > "
	}
 
dt.comment.me {
	background: #336699;
}
 
	dt.comment.me:before {
	content:"Commentaire du proprio > "
	}
 
dt.comment a{
	color: #EEE;
}
 
dd.comment {
	border-bottom: 1px solid #666;
}
 
dd.comment.me {
	border-bottom: 1px solid #336699;
}
 
 
/* # AGIT SUR LES RETROLIENS */
dt.ping {
	background: #EEE;
}
 
	dt.ping:before {
	content:"Retrolien > "
	}
 
dd.ping {
	border-bottom: 1px solid #EEE;
}

En pièce-jointe, retrouver le fichier de mode post modifié.