Comments: Advanced Styling
Xtreme has a few general options to style comments.
If you need more detail styling changes, below are some key rules to target the various elements of the comment section.
The rules below are mostly here to show you which CSS selector to use to target any given part of the comments.
You can include different properties in these rules to match your requirement.
Comment Top Meta info bar: Removing the background color and the line
.commentlist li.comment .comment-meta { border-bottom:none; background-color:transparent; }
Avatar Icon: Moving it in and removing the shadow
.commentlist li.comment .comment-author img.avatar { left:0px; top:0px; margin: 0 10px !important; box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none; }
Reply link: Make it into a button
.comment .reply { width:55px; background-color:grey; border-radius:5px; padding:5px 0 5px 20px; margin-left:10px; margin-bottom:10px; } .comment .reply a {color:white;} /* Link Color */ .comment .reply span {display:none;} /* Remove down arrow */
Comment text: Moving it to the right.
.commentlist .comment-content { padding:0 10px 0 60px !important; }
Main comment box Borders:
.commentlist li.comment { border:2px solid green !important; }
Nested comment box borders:
.children li.comment { border:5px solid grey !important; }
Author comment box borders:
.commentlist .bypostauthor.comment { border:5px solid yellow !important; border-radius:5px; }