WordPress 2.7 Comments – Style Starter #1

Comments

34 responses to “WordPress 2.7 Comments – Style Starter #1”

1. 

   2008-12-10

   Mark Jaquith

   Nice work! This should prove to be very useful to theme authors. Thanks for sharing.
   1. 

      2008-12-10

      Chris Harrison

      My pleasure. Thank you for all you do with WordPress, Mark!
2. 

   2008-12-10

   baal666

   Looks cool…

   But what are “#
   ol.commentlist li div.vcard img.avatar-32 {}
   #
   ol.commentlist li div.vcard img.photo {} ” all about?

   I tried to modify this but did not found their use… Any idea? ?hanks
   1. 

      2008-12-11

      Chris Harrison

      They’re included for reference mainly. You may need to make the selectors more specific if they’re not working right or at all.
   2. 

      2008-12-11

      Chris Harrison

      With the images, I think height and width are explicitly defined in the HTML. CSS won’t be able override that. Have patience. I’m sure someone will develop an avatar options plugin to address the issue you’re having. ;)
      1. 

         2008-12-11

         baal666

         Can’t wait for such plugin!

         I had big problem getting the image behind the avatar to display correctly. I think it has something to do with display:inline or such, but I am not very good in CSS.. Maybe you can help?

         Thanks

         Great work!
      2. 

         2008-12-18

         Gordon Brander

         Actually, it is possible to override those width/height values with CSS, but you usually don’t want to do it because the image will look pixelated in most browsers. The brilliant thing about Gravatar: it serves up an image of whatever size you need, reducing load times and giving you the highest quality. I’m not sure offhand where the size setting is in the new comment function, but it is there somewhere.
      3. 

         2008-12-18

         Gordon Brander

         Update: found it! The parameter you’re looking for is avatar_size. So if you wanted your avatar size to be 75px (for example), you would use the function this way: wp_list_comments('avatar_size=70'). There are more parameters listed in this thread on wordpress.org. Hopefully we’ll get full documentation soon.
         1. 

            2008-12-18

            Chris Harrison

            Very cool :) Thanks for posting that.
         2. 

            2008-12-18

            Gordon Brander

            Typo: The size param was meant to be 75px in both places. E.g. if you wanted 50px the param would be avatar_size=50.
3. 

   2008-12-16

   Joel Drapper

   What plugin do you use to display the code like that in your post?
   1. 

      2008-12-16

      Chris Harrison

      I use SyntaxHighlighter Plus.
4. 

   2008-12-22

   Tiara

   Thanks for this great tutorials… You can check my blog to see my comment section ;)
   1. 

      2008-12-22

      Chris Harrison

      It looks GREAT! I like the little touch you added to the Gravatar making them look like a speech balloon. Very nicely done!
5. 

   2009-01-03

   Kalle Kniivilä

   I just checked my site in IE 6.0. For some reason all the comments in the ordered list are intem number one. Looks like IE 6.0 is interpreting this as a large amount of ordered lists with one item in each. Why is that?

   I’d generally prefer not numbering the comments, but I can’t see how. Tried messing with comments.php, but changing

   ol class=”commentlist”

   to

   ul class=”commentlist”

   just messes up everything. :-(

   But they aren’t numbered on your site. Must be something with my theme.
6. 

   2009-01-03

   Kalle Kniivilä

   I finally did get rid of the numbering, I just needed

   ol.commentlist { list-style:none }

   in the stylesheet.

   But now I am wondering why IE 6 shows the first comment narrower than the others.
   1. 

      2009-01-03

      Chris Harrison

      I’m not seeing that issue when I view your site in IE6. (Specifically, I was looking here: Krigiskt helgon vann över Stalin). If you can send me a screenshot via email (chris@cdharrison) to see what’s going on… It’s possible that it’s caused by not having text-indent:0; as an attribute for ol.commentlist… but I’m not certain. If you continue having issues, let me know.
      1. 

         2009-01-03

         Kalle Kniivilä

         Yes, you are right, the issue is gone. Must have been some caching issue.

         Now I only have two other IE 6 issues, the search box showing too low and too large headings for exceprts in the sidebar…

         Thanks for the great tutorial!
         1. 

            2009-01-03

            Chris Harrison

            Glad to be of assistance! :)
7. 2009-01-15

   Styling Threaded Comments in Wordpress 2.7 | Dowan.org

   […] WordPress 2.7 Comment Style Starter #1 […]
   1. 

      2009-03-25

      Bob

      Do these comments use ajax?
      1. 

         2009-03-25

         Chris Harrison

         They do. They’re using a built-in WordPress function – wp_enqueue_script('comment-reply'):
         [code][/code]

         You can find more information on it here: WordPress 2.7 Comments Enhancements
8. 

   2009-02-03

   Tayfun

   Thank you very much. Great style…
9. 

   2009-02-06

   Dustin

   Now that I changed it to a larger Gravar size how do I make it fit into the LI?
   1. 

      2009-02-06

      Chris Harrison

      Easiest way would probably to make sure floats on ol.commentlist li are cleared properly (clear:both;) and more padding is added to the left-margin to accomodate the larger avatar.

      Your new selector might look like this:
      ol.commentlist li { border:1px solid #d5d5d5; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; clear:both; height:1%; margin:0 0 10px; padding:5px 7px 5px 97px; position:relative; }
10. 

    2009-02-09

    Kim Woodbridge

    Hi Chris – Thanks for your great tutorials. I have a question about styling author comments. I have my comments in a different color than all other comments. I use this

    ul.commentlist li.bypostauthor {background: #def6d8 url(http://kimwoodbridge.com/wp-content/themes/kimwoodbridge/images/comment-bg.gif) repeat-x !important;}

    When I reply to someone and then someone replies to my reply, their comment is green rather than the white that it should be. I’m not sure which style I should use so this doesn’t happen – would it be one of the children or do I need to specify something for ol.commentlist li.byuser {} ?

    Thanks for your help!
11. 

    2009-02-28

    Mike Smith

    Hi Chris, I am working on getting this working. I added the style to my css file and it’s working but for some reason the REPLY button doesn’t say REPLY and is not clickable. Is this something to do with my comments.php file? I copy/pasted the comments.php file from the default theme folder when I downloaded wordpress 2.7.1 and thought that would work. Am I missing something?

    Thanks,
    Mike
    1. 

       2009-02-28

       Mike Smith

       Sorry about that – I didn’t realize you had to activate the nested comments in the wordpress admin panel. I fixed it and it’s working great now. Thank you so much for this!
       1. 

          2009-02-28

          Chris Harrison

          no worries :) I’m glad you got it working and found this useful.
12. 

    2009-03-25

    Bob

    Thanks for this!
    1. 

       2009-03-25

       Chris Harrison

       I’m glad you found it useful!
13. 

    2009-04-05

    Buddha

    Great tutorial man, thx!
14. 

    2009-05-01

    palma | buddha trance

    Chris, thank you so much, this was extremely helpful! I was starting to really dislike threaded comments, they looked so messy. Now I am giving them another chance, thanks to you. They look so much better with your style starter!
15. 2009-12-06

    untell.com

    cdharrison.com » archive » WordPress 2.7 Comments – Style Starter #1…

    This is the personal site/blog/experiment of Chris Harrison, a web designer living, working and playing in Augusta, GA….