This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

How to Style Vantage Comments Layout

Open 9 replies premiumthemetheme-vantage
Hosein Naseri
10 years ago · Last reply by Andrew Misplon 10 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.

Need fast email support? Get SiteOrigin Premium

Replies

9
  1. Andrew Misplon Staff 10 years, 3 months ago

    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. Hosein Naseri 10 years, 3 months ago

    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. Andrew Misplon Staff 10 years, 3 months ago

    For the border around the area, try targetting:

    .comments-area {
}
  4. Andrew Misplon Staff 10 years, 3 months ago

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

  5. Andrew Misplon Staff 10 years, 3 months ago

    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. Hosein Naseri 10 years, 3 months ago

    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. Andrew Misplon Staff 10 years, 3 months ago

    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. Hosein Naseri 10 years, 3 months ago

    Yes. it produces the same issue.

  9. Andrew Misplon Staff 10 years, 3 months ago

    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.

Have a different question or issue?

Start New Thread