Styling the Comment Controls

In this project I’ve included a file called base.css which is a working example of the styles necessary to make the comment controls behave in a decent manner. The script itself does not perform any styling whatsoever to the controls (albeit adjust the opacity during fade effects), instead it just spits out some raw HTML for you to style as you please.

Step One: Get base.css

Grab the styles from base.css and incorporate them into your own stylesheet.

Customize the Controls

Once you see the fundamentals of how we’re using CSS to control the presentation of the comment controls you can adjust them to work however you see fit. For instance, if you turned off absolute positioning you could have the comment controls appear below the comment causing the comment itself to temporarily expand in height. There are a lot of different things you can do and that is why I didn’t embed any inline styles into the HTML output generated by the script. Below is an example of the markup generated by the script for the comment controls.

<div class="comment-controls">
   <a class="comment-quote" href="#">Quote</a><a class="comment-reply" href="#">Reply</a>
   <div class="related-replies"><h6>1 reply to this comment</h6>
      <ol>
         <li><a href="#comment-34">Jane Doe</a></li>
      </ol>
   </div>
   <div class="related-comments">
      <h6>1 other comment from Jon Doe</h6>
      <ol>
         <li class="current">
            <a href="comment-33">January 4, 2009 at 4:25 pm</a>
         </li>
         <li class="">
            <a href="#comment-35">January 4, 2009 at 4:27 pm</a>
         </li>
      </ol>
   </div>
</div>

Customize the Respond Button

The html generated output for this element is very simple:

<span id="comment-respond">Respond</span>