• I installed a gravatar plugin in wordpress and now no matter how small I make the default gravitar one line comments cause the comments to pile up. I need to make the individual comments take up more space before the next avatar. If this makes any sense I NEED HELP!
    Thanks in advance.

Viewing 11 replies - 1 through 11 (of 11 total)
  • Thread Starter shawnwasson

    (@shawnwasson)

    Here is a link to the website in question:
    https://www.bareknucklepolitics.com

    I cannot exactly see what you mean by comments “piling up”, but I notice that ther is no horizontal space to the right of your gravatars.
    The best method of making a well defined space around the images, would be to give the gravatar image a class like
    <img class=”gravatar” src=”…” />
    and then add a rule to your stylesheet, for example
    img.gravatar {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }

    You can find examples of more flexible rules i the defalt themes stylesheet, style.css.
    It has rules for img.alignleft, img.alignright and img.centered

    Thread Starter shawnwasson

    (@shawnwasson)

    I am using the default comments.php Here is an example of what I mean by the comments piling up:
    https://bareknucklepolitics.com/?p=616#comments
    Notice comments 6 and 7 because the comment on number 6 was only one line the gravitars sort of ran into each other. Forgive me as I am not a whiz with CSS….
    Any ideas?

    Oki – that’s what I expected to see, but didn’t find on your blog. It’s really ugly. I’ll get back here if I find the answer.

    Hi again shawn.
    Here is a quick and dirty work around and I’m not sure it’s the most elegant way.
    Your theme generates an ordered list of comments

    <ol>
    <li> comment and metadata </li>
    <li> comment and metadata </li>
    ...
    </ol>

    The hight of the comment should be at least equal to the hight of the gravatar image, and possibly this could be done in the style sheet. I’m not sure that tis will work in every browser. What you can do in markup is the following – my workaround.
    After each comment you insert a break like this:

    <ol>
    <li> comment and metadata </li>
    <br clear="all">

    <li> comment and metadata </li>
    <br clear="all">
    ...
    </ol>
    You cannot do this by hand for every comment of course – you have to search for the place in your fasttrack theme where the comments are generated and insert the break there.

    Apart from that:
    Regareding your theme I fond some strange style rules.
    You have i style.css:

    #commentlist {
    font-size:1em;
    font-weight:bold;
    color: #ccc;
    }

    This means that you set the style for a block with id=”commentlist”

    In the markup, the list of comments has the markup
    <ol class=”commentlist”>

    Good luck with break thing!

    Thread Starter shawnwasson

    (@shawnwasson)

    Where exactly do I put the comment and metadata string?

    Sorry, you’ve misunderstood me.
    The comment text and meta information is already there.
    The only thing you should add is the <br clear="all">.

    In your theme there is a php page that creates the list of comments ( I don’t know which page in your theme ).
    In the loop that produces your comments list there is a starting <li> tag and an ending <li> tag.
    Place the break tag right after the </li> like this:
    </li><br clear="all">

    However..hmmm, seems that I mislead you. Really sorry about that! I can’t find the

    • tags I was referring to in your ( or my ) theme.
      The
    • tags seam to be generated at a lower level and I’m trying to find advice at WordPress docs just now – it’s slow for the moment.
      We’ll have to work out something else when I find a solution if no hard core developer shows up here ??

    Allright, so I’m very sorry about the confusion. and I’m now trying to go the narrow road, and making things the good way ?? – i.e. I’m returning to CSS.

    As I mentioned in the style.css you have a rule
    #commentlist {
    font-size:1em;
    font-weight:bold;
    color: #ccc;
    }

    You may want to change this to
    .commentlist {
    font-size:1em;
    font-weight:bold;
    color: #ccc;
    }

    ( The dot means we are referring to an class instead of an id )

    What’s more important and probably solves your problem is to change the next rule:
    #commentlist li {
    color: #666;
    font-weight: normal;
    font-size:0.85em;
    }

    to read:
    .commentlist li {
    color: #666;
    font-weight: normal;
    font-size:0.85em;
    height:80px;
    }

    This applies to every comment within the commens list.
    This will render the comment at least 80 pixels high or as high as the gravatar. You’ll wnat to experiment with the hight, maybe making it 90px or 100px to get a little extra space between the images.

    Hopes this helps.

    Thread Starter shawnwasson

    (@shawnwasson)

    Thanks so much, you rule!

    I do? sounds nice ??
    You may go to your profile page and mark this tread as resolved if you like.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Comments Bunching Up’ is closed to new replies.