1. Log in to your dashboard--> Design- -> Edit HTML
2. Click on "Expand Widget Templates"
3. Search "Ctrl+F" and find the following cod:
<dl id='comments-block'>
4. Replace the upper code with the next one:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
5. Search for:
<a expr:name='data:comment.anchorName'/>
6. Before the upper code paste the following one:
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' width='35px' style='margin-bottom:-2px;' />
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
7. Now find #comments{ and replace him with:
#comments{
padding: 0 15px 15px 15px;
position: relative;
background-color: #f6f9fc;
border: 1px solid #116abd; }
#comments h4 {
margin: 0 0 10px;
padding-top: 0;
padding-right: 14px;
padding-bottom: 2px;
padding-left: 29px;
font-size: 120%;
line-height: 1.4em;
}
#comments a:link, #comments a:visited, #comments a:active, #comments a:hover{
color: #986610;
}
.comment-author {
margin: .5em 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 20px;
font-weight: bold;
}
.comment-body {
margin: 0 0 1.25em;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 20px;
}
.comment-body p {
margin: 0 0 .5em;
}
.comment-footer {
margin: 0 0 .5em;
border-bottom: 1px solid #000;
padding-top: 0;
padding-right: 0;
padding-bottom: .75em;
padding-left: 20px;
Change the values of the red lines or simply remove them if you dont want to have a colored comment background and a border around it.
Change the values of the blue line to change the separator line between comment.
Modify the green line to change the color of the links.
DEMO
Post a Comment