Home>Support>How to Style Vantage Comments Layout

How to Style Vantage Comments Layout

By Hosein Naseri, 8 years ago. Last reply by Andrew Misplon, 8 years ago.

Hi,
I would like to change the way my comments are shown in my blog,
1- when comments are nested, they become too narrow. I want to be able to handle left and right padding of nested comments.
2- I want to highlight the author of post comments in some way. for example to use a different color for font and to change the background color of the comment. a “(post author)” next to the name of the comments author would also be great.
3- How can I change the background color of even and odd comments?
4- How can I put a comment and its replays into a big box around them?
Thanks

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Hi Hosein

    Thanks for reaching out. We’ll do what we can to assist. All CSS to go at Appearance > Custom CSS. Edit as required:

    1.

    #comments .commentlist .children {
    margin-left: 75px;
}

    2.

    #comments .commentlist article .comment-author {
    color: #474747;
    font-size: 13px;
    font-weight: 500;
    line-height: 1em;
    margin-bottom: 0.35em;
}

    3. No existing styling for this. You can try targeting:

    .commentlist .thread-even {

}

    and

    .commentlist .thread-odd {

}

    4. You can target this class:

    #single-comments-wrapper {

}

    With border and padding as required.

  2. 8 years, 10 months ago Hosein Naseri

    Hi Andrew,
    Thank you for your replay,
    I used the following CSS to highlight post author comments:

    
#comments .commentlist .bypostauthor article .comment-author {
    color: blueviolet;
    font-size: 14px;
    font-weight: 700;
}
#comments .commentlist .bypostauthor  .comment-content {

    font-weight: 700;
}

    I have a little problem though, when someone replays to my reply, that comment also gets highlighted.
    this problem can clearly be seen here : http://tinyurl.com/o5rnp8p

    also for the problem number 4, I tried the following CSS:

    #single-comments-wrapper {
border: 10px solid #e18728 !important;
}

    but nothing happened.

  3. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    For the border around the area, try targetting:

    .comments-area {

}
  4. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    You can add padding as well as your border declaration to help the border around the comments area.

  5. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Perhaps try this for the Post Author:

    #comments .commentlist .bypostauthor article .comment-author {
	position: relative:
}

#comments .commentlist .bypostauthor article .comment-author::after {
	border-radius: 3px;
	background: black; 
	color: white; 
	content: "Post Author";
	font-size: 1rem;
	font-weight: 400; 
	left: 0.25rem; 
	padding: 0.1875rem 0.25rem 0.125rem; 
	position: relative;
	text-transform: uppercase;
	top: -1rem; 
}

    I’ve pulled it from some other work so you’ll need to tweak it a bit. It’ll add a little bubble next to your name where you can add content.

    (If you aren’t already using your browser developer tool to inspect the page source and CSS, please, see our video: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/

  6. 8 years, 10 months ago Hosein Naseri

    Hi Andrew,
    Thank you very much for your support. I worked for me but still need some modification.
    The problem I have is that when I apply your final code for post author, something weird happens in the following situation: http://imgur.com/9Pabmg3
    The problem is that when I reply to someone, I correctly am tagged as post author.
    However when someone replies to my comment, Not only me but also them are tagged as post author.

  7. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    This isn’t necessarily the styling you have to use but can you just try this out to see if it suffers from the same issue?

    .commentlist .bypostauthor {background: #e7f8fb;}
.commentlist li ul.children li.bypostauthor {background: #e7f8fb;}

    Thanks

    Ref: http://www.wpbeginner.com/wp-tutorials/how-to-highlight-authors-comments-in-wordpress/

  8. 8 years, 10 months ago Hosein Naseri

    Yes. it produces the same issue.

  9. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Here we go:

    #comments .commentlist .bypostauthor > article .comment-author {
	position: relative:
}

#comments .commentlist .bypostauthor > article .comment-author::after {
	border-radius: 3px;
	background: black; 
	color: white; 
	content: "Post Author";
	font-size: 1rem;
	font-weight: 400; 
	left: 0.25rem; 
	padding: 0.1875rem 0.25rem 0.125rem; 
	position: relative;
	text-transform: uppercase;
	top: -1rem; 
}
Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More