Remember: Before proceeding, please backup your current template layout. (?)
Find & Change the Default CSS Code for Comments
To do this quick makeover, just go to Layout then Edit HTML section. Find this code there:
/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}Tip: If you can't find this code then please comment here with your blog address otherwise continue with the tutorial.
Actually, this is the CSS code responsible for the appearance of your comments. So, you need to replace the above code with the following code:
/* Comments
----------------------------------------------- */
.comment-form {
margin-left:.5em;}
.comments {
margin-left:.5em;}
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $commentheadingcolor;
}
#comments-block {
font-size:13px;
}
#comments-block .comment-author {
color: $commentauthorcolor;
font-size:12px;
background: $commentauthorbackcolor;
padding:4px;
font-weight:bold;
text-decoration:none;
}
#comments-block .comment-author a:link, .comment-author a:visited, .comment-author a:hover {
font-weight:bold;
color: $commentauthorcolor;
border-bottom:solid 1px $authorborderbottom;
padding-bottom:2px;
text-decoration:none;
}
dd{margin:0; border:0; padding:0; padding:0 10px; background: $bodybackcolor; color: $bodytexcolor;}
dd.comment-body{border:solid 2px $bodysidesbordercolor; border-bottom:none; border-top:none;}
dd.comment-body p{border:0; padding:0; margin:0; padding:10px 0;}
dd.comment-footer{border:solid 2px $footerbordercolor; border-top:none; margin-bottom:10px;}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
.comment-timestamp{font-size:11px; color: $commentdatecolor;}
.comment-timestamp a:link, .comment-timestamp a:visited {
font-size:11px; color: $commentdatecolor; background:none; width:auto; height:auto;
text-align:left; font-weight:normal;}
.deleted-comment {
font-style:italic;
color:gray;
}Save the template and see the comments. You'd notice that the comments are now looking really decent and stylish.
Add the Customization Code in CSS
We've changed the default styling for comments after adding the code in previous step but everyone has different taste so let's add some juicy code to the template's HTML. Now, scroll down a little and you'll find this piece of code:
/* Variable definitions
====================Right after the above code, you need to add the following code:
<Variable name="commentheadingcolor" description="Comments Heading Color" type="color" default="#0B486B" value="#0B486B">
<Variable name="commentauthorcolor" description="Comment Author Color" type="color" default="#53524b" value="#53524b">
<Variable name="commentauthorbackcolor" description="Comment Author Background Color" type="color" default="#d7e8f0" value="#d7e8f0">
<Variable name="authorborderbottom" description="Comment Top Border Color" type="color" default="#80a8ba" value="#80a8ba">
<Variable name="bodybackcolor" description="Comment Body Background Color" type="color" default="#f5f8fa" value="#f5f8fa">
<Variable name="bodytexcolor" description="Comment Text Color" type="color" default="#333" value="#333333">
<Variable name="bodysidesbordercolor" description="Comment Sides Border Color" type="color" default="#d7e8f0" value="#d7e8f0">
<Variable name="footerbordercolor" description="Comment Bottom Border Color" type="color" default="#d7e8f0" value="#d7e8f0">
<Variable name="commentdatecolor" description="Comment Date Color" type="color" default="#999999" value="#999999">Now, the overall code should look something like this:
/* Variable definitions
====================
<Variable name="commentheadingcolor" description="Comments Heading Color" type="color" default="#0B486B" value="#0B486B">
<Variable name="commentauthorcolor" description="Comment Author Color" type="color" default="#53524b" value="#53524b">
<Variable name="commentauthorbackcolor" description="Comment Author Background Color" type="color" default="#d7e8f0" value="#d7e8f0">
<Variable name="authorborderbottom" description="Comment Top Border Color" type="color" default="#80a8ba" value="#80a8ba">
<Variable name="bodybackcolor" description="Comment Body Background Color" type="color" default="#f5f8fa" value="#f5f8fa">
<Variable name="bodytexcolor" description="Comment Text Color" type="color" default="#333" value="#333333">
<Variable name="bodysidesbordercolor" description="Comment Sides Border Color" type="color" default="#d7e8f0" value="#d7e8f0">
<Variable name="footerbordercolor" description="Comment Bottom Border Color" type="color" default="#d7e8f0" value="#d7e8f0">
<Variable name="commentdatecolor" description="Comment Date Color" type="color" default="#999999" value="#999999">Save your template. Now, you can go to the Fonts & Colors section and customize all the colors according to your taste.
