Changing comment style

  • Hi! I’d really like to change the style of my comments, but other than the color of the background and style, I don’t know how else to make it look differently. I’ve looked online and can’t find too much other than people saying comments are something overlooked when designing a website.

    Here is my website: https://fourleafcloverblog.com/
    To get to them quickly, here are some comments: https://fourleafcloverblog.com/?p=939#comments

    I’d love for a simple line to separate the comments from one another as well as a different colored line showing the distinction between the comment and the person’s name + date/time. Does anyone know how I could do this or have any helpful information on this issue?

    Thank you!
    Eva

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator keesiemeijer

    (@keesiemeijer)

    You change the styling of your comments in your theme’s stylesheet style.css

    These are the rule sets for your comments:

    .comment {background-color : #F0DDD5; border-left : 0px solid #cccccc; color : #505050; margin : 0 0 10px; padding : 8px 5px 0 8px;}
.comment p {font-size : 1em; line-height : 1.3em; margin : 0 0 6px; padding-bottom : 5px;}

    learn more about css borders here
    https://www.tagbytag.org/tutorials/html-css/css-beginner/css-borders

    For a border on the
    between the comment and the person’s name + date/time you have to put these in a container with a like a paragraph or div so you can style them seperatly. Right now your comment markup is (comments.php):

    <div class="comment">
<strong></strong> <strong><a href="https://darjeelingdreams.blogspot.com">Joyti</a></strong>
<br />
<strong></strong> 15 January 2011 - 12:31</p>
<p>Beautiful quote.<br />
Have a lovely MLK weekend :)</p>
</div>

    change it to something like this (comments.php):

    <div class="comment">
<p class="comment-meta"><a href="https://darjeelingdreams.blogspot.com">Joyti</a> 15 January 2011 - 12:31</p>
<p>Beautiful quote.
Have a lovely MLK weekend :)</p>
</div>

    Thread Starter koalaeva

    (@koalaeva)

    Thanks so much for the response keesiemeijer! I’ve got it to the point where I have just a line above individual comments, but I don’t understand your directions for adding a line between the name + date/time. I tried changing it to look more like the code you pasted, but nothing changed.

    Here is what’s in my comments.php:

    <div class="comment">
<strong><?php comment_type('','Trackback','Pingback'); ?></strong> <strong><?php if ('' != get_comment_author_url()) { ?><a href="<?php comment_author_url(); ?>"><?php comment_author() ?></a><?php } else { comment_author(); } ?></strong>
<?php edit_comment_link('[e]',' '); ?><br />
<strong></strong> <?php comment_date() ?> - <?php comment_time(); ?></p>
<?php comment_text() ?>

    I took out the < strong > in each place and added in the <p class=”comment-meta”>, but like I said.. it stayed the same.

    Moderator keesiemeijer

    (@keesiemeijer)

    Make a new rule set p.comment-meta {….} in your stylesheet and put a border-botttom on it. Well done!

    Thread Starter koalaeva

    (@koalaeva)

    keesiemeijer, I don’t know why, but nothing seems to work. I’ve added in the new rule set like you suggested and nothing happened. Either way, because of this post I’ve already made the comments look so much better and I really appreciate your responding to my question. Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Changing comment style’ is closed to new replies.