2008-05-27

Blogging Tip : Styling comments with different styles

As you the author of your own blog, you may want to stand out from the rest when commenting on certain subject. Thus allowing your readers to differentiate whenever the author responded to the subject matter. This can be achieved in three ways:-
a- Use different colors.
b- Use background image.
c- Both.

As the title suggests it all, here are some steps that can help you work through:-

1- Login to your Dashboard> Layouts> Edit Html
2- Search for these lines:-

.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}

3- Add these lines below:-

.blog-author-comment {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.blog-author-comment p {
margin:0 0 .5em;
padding:0 0 0 20px;
color:#FFFFCC;
font-style: bold;
}

4- Save changes and you're done.
5- If you like to have an image instead of the background color, find yourself an image 20px X 20px in size exactly. Upload onto your own free image hosting and you'll be furnished with the image url. For example:-

http://i44.servimg.com/u/f44/11/94/91/73/author10.jpg

6- Add the image url to these lines (shown in red color).

.blog-author-comment p {
margin:0 0 .5em;
padding:0 0 0 20px;
background: url('
http://i44.servimg.com/u/f44/11/94/91/73/author10.jpg') no-repeat top left;
font-style: bold;
}

7- Once again, save changes and you're done with it.
8- But then, if you chose to have both i.e background color and the image, replace those lines with these lines (shown in blue color):-

.blog-author-comment p {
margin:0 0 .5em;
padding:0 0 0 20px;
background: #FFFFCC url('
http://i44.servimg.com/u/f44/11/94/91/73/author10.jpg') no-repeat top left;
font-style: bold;
}

End result is shown below:-

2 comments:

Sheila said...

I love this idea. I'll give it a go :)

Is said...

To Sheila and Komodo Dragon,

Happy to hear that. Let me know if both of you need my assistance :)

Post a Comment

1. Comments posted must be accompanied by names or pseudonyms.
2. Anonymous posting and those containing profanities will be rejected.
3. Comments are moderated due to spam problems. I have to approve the comment before it will show up.

:)) ;)) ;;) :D ;) :p :(( :) :( :X
=(( :-o :-/ :-* :| 8-} :)] :-t b-( :-L