Customizing Embedded Comments Below Posts

November 3, 2008

Ok, if you don't know what are Embedded Comments, or want them on your Blog, read this article.
Here, we are going to customize them a little bit. On the picture below, you can see the default appearance of embedded comments.


Looks all right, but we can do better...
First thing, back-up your template. Then go to: DASHBOARD -- LAYOUT -- EDIT HTML. Find the following part of code (use CTRL + F for searching):

#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;
}

DELETE it, and REPLACE it with following code:

#comments h4 {
margin: 1em 3em;
font-weight: bold;
line-height: 1.4em;
color: #ffffff;
}
#comments-block {
margin-left:1.5em;
line-height:1.6em;
background: #ffffff;
color: black;
padding: 1em;
border:0px solid #ffffff;
}
#comments-block .comment-author {margin:.5em 0;}
#comments-block .comment-body {margin:.25em 0 0; background: #ffffff;}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
padding: 20px 10px 10px 10px;
background: #f3a64c url(http://i38.tinypic.com/27yu1xl.jpg) no-repeat top left;
}
.deleted-comment {
font-style:italic;
color:gray;
}

The URL in red color is the address of picture used in this tutorial. If you would like to use that one, it's ok. But, also, you can make your own pic. Just size it properly.

Ok. This is how it how it looks like now. But, keep in mind that you can do a lot more with just changing the code a bit. Here's another example, done with the same template as before...I've changed the template background, added some borders to comment box, and colored it blue...
Not much, but it's already happier.....

One more thing. If you want to change the "Post a comment", to something else (like "say something"), find the following code (EXPAND WIDGET TEMPLATES):

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

..and REPLACE the part in red with anything you want. So it will look like this:

<h4 id='comment-post-message'>Say something...</h4>

Well, this was a long one.....Smile!