Some Comment Styling

By , Tuesday, 19th June, 2007

This post is simply to do some Comment Styling of the theme and be able to test it. πŸ™‚
Things I’d like to get right are:

  1. Gravatars displayed at full size (80px x 80px), preferably on left hand side
  2. Gravatars displayed in line, ie not indented further into the page as more and more comments are added (see picture below)
  3. Default Gravatar picture changed (see current picture below)
  4. Different coloured background for author (my) comments
  5. Perhaps a number displayed in each comment
  6. Perhaps some stats listed on front page (number of posts, number of comments, etc)

The following sites might be of use for me to get this happening:
Gravatar and the Broken Image Icon
Gravatar Popup Plugin
CSS Styling for Alternating Colours & Author Comment Background
WordPress Codex – Using Gravatars
WordPress Codex – Plugins
Comment Styling
Styling your WordPress Forms
WordPress Author Comment Highlighting
WordPress Support – number on comments
Plugin for my comments
Counting Comments & Trackbacks

Comments being indented:


Unknown Gravatar Picture:


EDIT (11/8/07): Tonight I came across the separate comments & Pings plugin (Version 1.0) which fixed up the problem of counts not being correct. Then followed these instructions to get it all right.

I was also able to use the following sites to help me sort it all out:

  1. Ryan J Parker’s Site
  2. Lorelle’s Site
  3. Noscope’s Site
  4. Tamba2’s Site

15 Responses to “Some Comment Styling”

  1. Mr Gray says:

    This is an example of the first comment.

  2. Mr Gray says:

    this is an example of the second comment. Unlike the first comment, this one doesn’t currently have the Gravatar aligned fully to the left.

  3. Mr Gray says:

    And a third comment.

  4. Mr Gray says:

    I think the indenting thing has something to do with the length of comment.

  5. Mr Gray says:

    Another short comment.

  6. Visitor 1 says:

    Visitor 1 leaves a comment

  7. Visitor 2 says:

    Visitor 2 leaves a comment

  8. Visitor 3 says:

    Visitor 3 leaves a comment

  9. Ozh says:

    Visitor 4 leaves a comment (and wonders why his name, addy & url are all capitalized in your input boxes)

  10. Ozh says:

    Your weird indenting problem is because of the floating behavior. Adding “clear:both” to “.commentlist li” fixes it (on FF at least, didn’t check on IE)

  11. Mr Gray says:

    Thanks for dropping by Ozh. Re the capitalisation – I checked the CSS and noticed there was a text transform to uppercase – got rid of it πŸ™‚
    And adding “clear:both” has aligned everything correctly.
    Now I would like to have the alternating background colour extend below the gravatar for the same amount of spacing as what’s above the gravatar (particularly for the shorter comments). Don’t happen to know how to fix that do you? πŸ˜‰

  12. Paul Gray says:

    Have you seen my other site?…

    If you’re interested in education you might like my other site,
    Here is a test trackback link.

  13. Test Track says:

    Test trackyback…

    trackback to this

  14. […] this ping today This was written by Test Track. Posted on Saturday, July 21, 2007, at 8:57 am. Filed under […]

  15. […] test ping This was written by Test Track. Posted on Saturday, July 21, 2007, at 8:42 am. Filed under Trackback Tests. Bookmark the permalink. Follow comments here with the RSS feed. Post a comment or leave a trackback. […]

Leave a Reply

OfficeFolders theme by Themocracy