Si votre thème ne touchait pas aux fichiers de structure (*.php), il est déjà fort présentable. Il y a toutefois un certain nombre de sélecteurs qui ont été modifiés et d’autres ajoutés. Ce billet compare les commentaires et décrit les modifications à apporter à votre feuille de style.

Structure

Sous DotClear 1.x.x

<div id="trackbacks">
  <h3 id="tb">Trackbacks</h3>
    <p id="c1" class="comment-info"> <span class="comment-number"><a>n° x</a></span>la date <strong>l’auteur</strong></p>         
      <blockquote>
      <p><strong>lien du blog qui trackbaque</strong></p>
      <p>Contenu de l’extrait</p>
      </blockquote>
      <p>URL de trackback</p>
</div>

<div id="comments">
  <h3 id="co">Commentaires</h3>
    <p id="c2" class="comment-info"> <span class="comment-number"><a>n° x</a></span> la date <strong>l’auteur</strong></p>
      <blockquote>
      <p>contenu du commentaire</p>
      </blockquote>
  <h3>Ajouter un commentaire</h3>
     <form>
     (le formulaire ayant été très peu modifié, je m’abstiens de le recopier ici.)
      </form>
</div>

Sous DotClear 2

<div id="comments">
  <h3>Commentaires</h3>
    <dl>
    <dt id="c2" class=" odd first"><a href="#c2" class="comment-number">n° x</a> date <a>Auteur</a></dt>
    <dd class=" odd first"><p>Contenu du commentaire</p></dd>
    <dt id="c5903" class="me  "><a href="#c3" class="comment-number">n° x</a> date <a>Auteur</a></dt>
    <dd class="me  "><p>Contenu du commentaire.</p></dd>
    </dl>
</div>
 
<form id="comment-form">
      <h3>Ajouter un commentaire</h3>
      (le formulaire ayant été très peu modifié, je m’abstiens de le recopier ici.)
</form>
  
<div id="pings">
    <h3>La discussion continue ailleurs</h3>
</div>
    
<p id="ping-url">URL de rétrolien</p>

<p id="comments-feed"><a class="feed">URL du rss du billet</a></p>

Différences

On notera tout particulièrement :

  • les deux blocs #trackbacks et #comments (dans lequel le formulaire était inclus) sont remplacés par 5 éléments :
    • div#comments
    • form#comment-form
    • div#pings
    • p#ping-url
    • p#comments-feed
  • Au passage, #trackbacks s’appelle désormais #pings et ce bloc est désormais affiché après les commentaires et non plus en premier.
  • Les commentaires et pings n’utilisent plus une suite de <p>(comment-info)</p> <blockquote> (commentaire)</blockquote> <p> (comment-info) </p> <blockquote> (commentaire) </blockquote> ... mais sont regroupés dans une liste de définition <dl> <dt> (comment-info) </dt> <dd> (commentaire) <dt> (comment-info) </dt> <dd> (commentaire) ... </dl>
  • Le formulaire de commentaire inclut désormais le titre h3 formant ainsi un bloc complet isolable et doté d’un identifiant.
  • Les paragraphes comportant les url de ping et du fil de suivi des commentaires sont identifés.

Ajoutons également que

  • l’identifiant du bloc de prévisualisation #comment-preview devient #pr.
  • des class odd (impair), me (proprio du blog) et first (premier) font leur apparition.

Style

Reproduire l’existant

A l’exclusion de la mise en forme du formulaire, il faut donc réécrire les règles de présentation de toute cette partie. Pour le thème Kit par exemple, dont vous pouvez voir la css d’origine ici on supprimera tout le passage :

/* =================================================================
        6. COMMENTAIRES, TRACKBACKS
            (voir aussi formulaires en 8)
/* ============================================================= */

#trackbacks, #comments, #comment-preview {
        }
#trackbacks {
        border-top : 4px dotted #ddd;
        background : transparent url(images/comments.png) no-repeat top right;
        }
#comments h3, #trackbacks h3 {
        margin-top : 2em;
        margin-bottom : 1em;
        }
.comment-info {
        margin : 1.5em 0 0.5em 0;
    }
#comments blockquote, #trackbacks blockquote {
        margin : 0.5em 2em;
    }

Et pour retrouver une présentation similaire on remplacera ces règles par :

#pings, #comments, #pr{
        }
#comments {
        border-top : 4px dotted #ddd;
        background : transparent url(images/comments.png) no-repeat top right;
        }
#comments h3, #pings h3, #pr h3, #comment-form h3 {
        margin-top : 2em;
        margin-bottom : 1em;
        }
#comments dt, #pings dt {
        margin : 1.5em 0 0.5em 0;
        }
#comments dd, #pings dd {
        margin : 0.5em 2em;
        }

Une présentation plus élaborée

C’est déjà bien, mais on peut faire mieux. Tout d’abord en adaptant le tuto de Kit 1 pour la personnalisation des commentaires, puis en utilisant les possibilités offertes par les nouveaux sélecteurs.

Etape 1, reproduire le tuto de Kit pour DC1

Suivant la même démarche que dans l’exemple donné dans cet article, on remplacera les règles données ci-dessus :

#comments dt, #pings dt {
        margin : 1.5em 0 0.5em 0;
        }
#comments dd, #pings dd {
        margin : 0.5em 2em;
        }

par ces nouvelles, pour obtenir un résultat exactement identique à celui du tuto pour Kit 1 :

#comments dt, #pings dt {
        margin : 0;
        padding :  2px 1em;
        background : #ddd;
}
#comments dd, #pings dd {
        background : #eee;
        margin : 0 0 2em 0;
        padding : 2px 1em 0.5em 1em;
}

Mais on peut faire encore bien mieux sans difficultés grâce aux nouveaux sélecteurs. Inutile par exemple de mettre les mains dans le cambouis pour se faire remarquer dans les commentaires, DotClear 2 affectera la class="me" automatiquement aux commentaires de l’auteur du blog pour peu que celui-ci fournisse exactement les mêmes renseignements dans le formulaire de commentaire que dans son panneau des Préférences de l’utilisateur.

Etape 2 : encore !

Offrons-lui des caractères rouges en ajoutant à la suite des règles ci-dessus :

#comments dt.me, #comments dd.me {
        color : #A71602;
}

Wahoo, on ne pourra pas vous rater avec ça ;)

Bien et maintenant, sur le même principe, nous pourrions décider d’alterner le fond des infos de commentaire afin d’égayer la mise en page. On continue donc nos ajouts avec la règle :

#comments dt.odd, #pings dt.odd {
        background : #bbb;
}
Toujours plus

A vous d’inventer les enrichissements de mise en forme supplémentaires : ajouter une icône à l’url du flux des commentaires, un pictogramme pour l’url de trackback, un fond de couleur pour la prévisualisation... Si vous le souhaitez, n’hésitez pas à trackbaquer ici vos propres personnalisations de cette zone.