Style Author Comments with WordPress Sandbox Theme

There are lots of advan­tages to design­ing web­sites with Cas­cad­ing Style Sheets. CSS is rel­a­tively easy to learn and cer­tainly easy to rework once a basic site frame­work has been estab­lished. Indi­vid­ual web­pages or sec­tions can eas­ily be changed into some­thing dif­fer­ent just by swap­ping a sin­gle CSS file, or a line within a CSS file. The genius behind the Sand­box theme for Word­Press is that it lever­ages CSS to let you change com­plex Word­Press func­tions – func­tions that used to require chang­ing the code or installing a plu­gin. In this post, I’ll show how you can use Sandbox’s com­ment classes to high­light authors’ com­ments with just a few lines of CSS.

Sandbox’s Seman­tic Classes

Sand­box is unique among Word­Press themes because of its rich seman­tic markup and its ele­gant, dynamic class-generating func­tions. One oppor­tu­nity this affords is the abil­ity to add spe­cial styling to com­ments made by the author or other reg­is­tered users, all with­out the use of plu­g­ins or theme mod­i­fi­ca­tions. Unique styling for com­ments helps reas­sure vis­i­tors that they can trust a com­ment was in fact made by you, and not by some­one pre­tend­ing to be you. In fact, Sand­box lets you dis­tin­guish com­ments made by the post’s author from other authors, and reg­is­tered from unreg­is­tered users and from each other. This bit of magic comes via the use of com­ments class-generating func­tions that adds the fol­low­ing seman­tic classes to each com­ment li tag: “bypostauthor”, “postbyuser”, and “comment-author-[name].”

Now, just add styling:

/*common style for all comments*/
 
div#comments div#comments-list ol li {
        list-style:none;
  margin:0 -1em;
  padding:1em;
}
 
/*style for alternating comments*/
div#comments div#comments-list ol li.alt {
  background:#fff/;
  border-top:1px solid #e4e4e4;
  border-bottom:1px solid #e4e4e4;
}
 
/*style for author comments*/
div#comments div#comments-list ol li.bypostauthor div.comment-author:after{
  font-style:italic;
  content:"The Author";
  margin-left:1em;
}

In this exam­ple, I’ve use the :after pseudo-class, which dis­plays “The Author” after the com­ment li ele­ment, but only if you are using a mod­ern browser like Mozilla/Firefox and Opera 7+, and IE7+. If you are still using Inter­net Explorer 6, then you’ll just have to trust me :-)

The Sand­box Designs Com­pe­ti­tion is an excel­lent place to learn how to make good use of Sandbox’s markup, and learn some advanced CSS tech­niques. For exam­ple, in her Sand­box theme Diur­nal, Car­olyn Smith clev­erly exploits the class that dis­plays the cur­rent hour when you are view­ing a page. (See the demo). The page changes with the daylight.

If You Don’t Use Sandbox

Few, if any, Word­Press themes come with such rich seman­tic markup and pro­fu­sion of classes that Sand­box does. But in the huge com­mu­nity that is Word­Press, you would expect alter­na­tives. And there are. K2, which is tech­ni­cally not a theme but an advanced Word­Press tem­plate, also offers a way to dis­tin­guish mul­ti­ple users, as Paul Sta­ma­tiou explains. Or, you can use Jonathan Leighton’s Author High­light plu­gin to add the required class attrib­utes, which then need styling. Alter­na­tively, you can mod­ify the Word­Press com­ment loop your­self to assign unique classes. Derek Pun­salan offers a par­tic­u­larly thor­ough tuto­r­ial that shows you how to add classes based on the author’s email address. Or give your comments.php a com­plete makeover à la Chris Mon­toya that adds author high­light­ing and much more. But, really, Sand­box makes it easy.

While the instruc­tions in this post are still valid, you no longer need to use a theme like Sand­box to give a spe­cial style to author com­ments. Word­Press 2.7 auto­mat­i­cally adds a CSS class to author and reg­is­tered users com­ments. To make use of them, add your styles to your style.css:

/* comment selectors in WordPress 2.7+ */
 
li.bypostauthor {
     /* add CSS styles for author comments */
}
 
li.byuser {
    /* add CSS styles for registered users comments */
}