Wordpress 2.7 Comments – Style Starter #2

In case you missed the first post related to Wordpress 2.7 comments, please check it out. This is the second set of Wordpress 2.7 Comment style starters. (Here’s Style Starter #1.)

wp-comment-style-2This CSS can be used as the basis for stylizing comments in your Wordpress 2.7-compatible theme. It may require some tweaking to get it to fit properly into your theme. (I should note that you have to enable Nested Comments in order for this to work on your site. To do so,  go to your Admin site and go to Settings > Discussions. Make sure the checkboxes next to Enable threaded (nested) comments ___ levels deep is checked. (You’ll probably also want to enable Break comments into pages with ___ comments per page and the ___ page displayed by default as well.)

[sourcecode language=’css’]
ol.commentlist { list-style:none; margin:0; padding:0; text-indent:0; }
ol.commentlist li { border:5px solid #ddd; height:1%; margin:0 0 10px; padding:5px 7px 5px 57px; position:relative; }
ol.commentlist li.alt { }
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment { }
ol.commentlist li div.comment-author { padding:0 170px 0 0; }
ol.commentlist li div.vcard { font:bold 14px/1.4 helvetica,arial,sans-serif; }
ol.commentlist li div.vcard cite.fn { font-style:normal; }
ol.commentlist li div.vcard cite.fn a.url { color:#c00; text-decoration:none; }
ol.commentlist li div.vcard cite.fn a.url:hover { color:#000; }
ol.commentlist li div.vcard img.avatar { border:5px solid #ddd; left:7px; position:absolute; top:7px; }
ol.commentlist li div.vcard img.avatar-32 {}
ol.commentlist li div.vcard img.photo {}
ol.commentlist li div.vcard span.says {}
ol.commentlist li div.commentmetadata {}
ol.commentlist li div.comment-meta { font:bold 10px/1.4 helvetica,arial,sans-serif; position:absolute; right:10px; text-align:right; top:5px; }
ol.commentlist li div.comment-meta a { color:#333; text-decoration:none; }
ol.commentlist li div.comment-meta a:hover { color:#000; }
ol.commentlist li p { font:normal 12px/1.4 helvetica,arial,sans-serif; margin:0 0 1em; }
ol.commentlist li ul { font:normal 12px/1.4 helvetica,arial,sans-serif; list-style:square; margin:0 0 1em; padding:0; text-indent:0; }
ol.commentlist li div.reply { background:#999; border:2px solid #666; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; color:#fff; font:bold 9px/1 helvetica,arial,sans-serif; padding:5px 10px;  text-align:center; width:36px; }
ol.commentlist li div.reply:hover { background:#c30; border:2px solid #c00; }
ol.commentlist li div.reply a { color:#fff; text-decoration:none; text-transform:uppercase; }
ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
ol.commentlist li ul.children li {  }
ol.commentlist li ul.children li.alt {}
ol.commentlist li ul.children li.bypostauthor {}
ol.commentlist li ul.children li.byuser {}
ol.commentlist li ul.children li.comment {}
ol.commentlist li ul.children li.comment-author-admin {}
ol.commentlist li ul.children li.depth-2 { margin:0 0 .25em; }
ol.commentlist li ul.children li.depth-3 { margin:0 0 .25em; }
ol.commentlist li ul.children li.depth-4 { margin:0 0 .25em; }
ol.commentlist li ul.children li.depth-5 {}
ol.commentlist li ul.children li.odd {}
ol.commentlist li.even { background:#f7f7f7; }
ol.commentlist li.odd { background:#fff; }
ol.commentlist li.parent { }
ol.commentlist li.pingback { }
ol.commentlist li.pingback.parent { }
ol.commentlist li.pingback div.vcard { padding:0 170px 0 0; }
ol.commentlist li.thread-alt { }
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

Wordpress 2.7 Comment Style Starters:

19 Replies to “Wordpress 2.7 Comments – Style Starter #2”

  1. It seems to me this is not working correctly with IE6…

    1. I didn’t test in IE6. If demand warrants, I’ll release some fixes. But honestly… we need to let that browser die.

  2. Another question here.

    I installed the same thing on my web site, but strangely enough when I click on “reply” it does not “pop up” a reply link right below the message, but rather it links to the commentform at the bottom of the page… Can you explain this?


    1. That’s just how it works by default.

      1. Indeed, that’s the way it is working. When you are implementing the solution as Otto describes it on his blog, the comment section will move just below the comment you are replying to.

        Otto explains it in very detail how this works. Just try to reply to a comment on his site and you will see what I mean.

        Furthermore, thanx for the style elements overview. This way I can use this to port the old Blix theme to a wordpress 2.7 compatible version.

        1. I definitely need to look into Otto’s solution. What I’ve done assumes one would just use what is provided with the new Default theme that comes with Wordpress 2.7. (I copied it over to my own theme and then stylized it…) An inline comment reply form would definitely be a better solution in the long run.

          Glad my overview of the style elements will come in handy! I figured if it was something I found useful, others might be able to use it as well…

        2. What would be nice would be to use Otto solution for the reply appearing right below the comment AND cdharrison easy-to-use CSS… If anyone know how to do this, it’s a go for me! :)

        3. Yeah! It works well for me now! :)

          Tell me, cdharrison, how do you modify your template colors? I tried to modify the CSS, but without success (as I said on Wordpress forum, I am not an expert).. How would you modify the color of the “reply” button?


  3. Another question Chris (sorry for all the questions).

    I was able to use bypostauthor to set the background color, but it only works in the main comments panel; when I reply, the color is not there. Do you know how to arrange this?

    Thanks a lot.

    1. Maybe delete some of the bypostauthor style, because I see you now have 3 of these elements defines in your stylesheet.

      Furthermore you can also take a look at Otto’s solution as he also describes some more style elements (like: byuser, comment-author-authorname, etc.) that can be used.

      1. I am not sure how to do this. The first bypostauthor defines the background color, but for some reason it does not do it with replies; this is why I tried to set “ol.commentlist li ul.children li.bypostauthor {background: #xxxxx} ” but it didn’t work either. Any idea? Otto’s solution seems more complicated, or maybe I missed his point, which is also a possibility.

  4. No one want to see IE6 go away more then me.

    That being said, people still use it, so I cater. If the issue you were having was with the avatars not being positioned correctly it is because of the problem IE6 has with absolute positioning. The relative element needs some kind of width or height.

    ul.commentlist li { border:1px solid #ddd; margin:0 0 10px; padding:5px 7px 5px 57px; position:relative; height:1%; }

    Note how I added the 1% height to the end.

    1. Wow now that’s an easy solution. I simply added “height:1%” and it works fine with IE6 now.

      I hope IE6 will be soon dead. I can’t believe about 25% of my visitors still use that crap. Well, anyway, got to deal with that, and now it is working fine!


  5. I just wanted to say “woot” because my name is in your post :D

  6. For an inline reply box you need to add this:

    if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ );

    to your header.php immediately before the call to wp_head():

    Read more in Codex

    Thanks for comment styling help, I am now using your code on my site. However, I have got a problem with child comments getting an unwanted “>>” prefix. I haven’t yet figured out how to prevent this part of my style.css

    .entry ul li:before{ content: “0BB 020”; }

    from affecting the comment list. I am beginning to suspect that line shouldn’t be in the style sheet at all, but if I removed it, I would need to restyle all my unordered lists, so I’d prefer to find a way to just keep it away from my comment childs. But how?

  7. Hi, whats the plugin that you’re using to reply with ajax? And what’s the plugin that you’re using to the “notify me of followup comments via e-mail”.

    Thanks a lot.

  8. Thank you for making this code available. It’s helping me get a handle on the comments feature in wordpress 2.7 and how to style them. Now, I just need to tweak the code to work with my site. Thanks for the start!

  9. Just want to say thanks for posting this info. You saved me a lot of hard work ;)

  10. It seems to me this is not working correctly with IE6…..

Comments are closed.