Quotable Comments

For quotable comments things are a little different. Here you must refrain from using the quotable class and instead follow some basic conventions in your comment markup. First, give the HTML object that contains all of your comments the class ‘commentlist’ then make sure every individual comment has the class ‘comment’ applied to it.

Setup the Comment List Container

In many blogging systems you may have a heading for your comments. This traditionally has the id of comments. Somewhere below that is a list of responses to your article. This can either be a ol, ul, or div. Wordpress, for example, traditionally uses an ol in most cases. To designate your comment container just add the class ‘commentlist’ to this element.

This:

   <body...
<code>
   <div id="blog-entry" class="quotable">
      ...
   </div>
   <h3 id="comments">3 Comments</h3>
   <ol>
      <li id="comment-35">
      ...
      </li>
   </ol>
</code>
   .../body>

Becomes:

   <body...
<code>
   <div id="blog-entry" class="quotable">
      ...
   </div>
   <h3 id="comments">3 Comments</h3>
   <ol class="commentlist">
      <li id="comment-35">
      ...
      </li>
   </ol>
</code>
   .../body>

Designate Your Comments

You will need to ensure that every individual comment is contained in an element with a unique ID and has the class ‘comment’.

This:

   <body...
<code>
   <ol class="commentlist">
      <li id="comment-35">
      ...
      </li>
      <li id="comment-36">
      ...
      </li>
   </ol>
</code>
   .../body>

Becomes:

   <body...
<code>
   <ol class="commentlist">
      <li id="comment-35" class="comment">
      ...
      </li>
      <li id="comment-36" class="comment">
      ...
      </li>
   </ol>
</code>
   .../body>

Designate Comment Permalinks

Now we need to add a class to each permalink for an individual comment. Simply add the class ‘comment-permalink’ to the anchor of the permalink for that individual comment.

This:

   <body...
<code>
   <ol class="commentlist">
      <li id="comment-35" class="comment">
      ...
      <div class="comment-meta commentmetadata">
         <a href="#comment-35">January 4, 2009 at 4:27 pm</a>
      </div>
      ...
      </li>
   </ol>
</code>
   .../body>

Becomes:

   <body...
<code>
   <ol class="commentlist">
      <li id="comment-35" class="comment">
      ...
      <div class="comment-meta commentmetadata">
         <a href="#comment-35" class="comment-permalink">January 4, 2009 at 4:27 pm</a>
      </div>
      ...
      </li>
   </ol>
</code>
   .../body>

Designate Comment Authors

Next, you will need to designate the element in your HTML containing the comment’s author name. Simply add the class ‘comment-author-name’ to this element.

This:

   <body...
<code>
   <ol class="commentlist">
      ...
      <div class="vcard">
         <cite class="fn">
            <a href='http://example.com' rel='external' class='url'>Jon Doe</a>
         </cite> <span class="says">says:</span>      
      </div>
      ...
      </li>
   </ol>
</code>
   .../body>

Becomes:

   <body...
<code>
   <ol class="commentlist">
      ...
      <li id="comment-35" class="comment">
      <div class="vcard">
         <cite class="fn">
            <a href='http://example.com' rel='external' class='url comment-author-name'>Jon Doe</a>
         </cite> <span class="says">says:</span>      
      </div>
      ...
      </li>
   </ol>
</code>
   .../body>

Designate Comment Entry Content

Last but not least, you will need to wrap the body of your comment’s text in an with the class ‘entry-content’.

This:

   <body...
<code>
   <ol class="commentlist">
      ...
      <li id="comment-35" class="comment">
         <p>My comment is full of useful advice...</p>
         <p>And it goes on and on and on..</p>
         ...
         <p>Yeah it was a lengthy comment.</p>
         ...
      </li>
   </ol>
</code>
   .../body>

Becomes:

   <body...
<code>
   <ol class="commentlist">
      ...
      <li id="comment-35" class="comment">
         <div class="entry-content">
            <p>My comment is full of useful advice...</p>
            <p>And it goes on and on and on..</p>
            ...
            <p>Yeah it was a lengthy comment.</p>
         </div>
         ...
      </li>
   </ol>
</code>
   .../body>