<   Prior Home         Share Blog Bloke     Share Blog Bloke Tips       Share to Twitter       Share to Facebook       Share to Twitter       Share to Google Plus       Share to LinkedIn       Pin this       Get Updates            
        Next   >  

Make Your Comments more Colorful!

Add some Pizazz to your boring Comments

 This tutorial will show you how to make your comments stand out from the crowd and boost your blog’s visual impact.

BLOGBloke readers have been asking me how I was able to add colorful backgrounds to the comments section in my blog.

Ask and ye shall receive. Today I’m going to show you how to do just that, and it’s so easy you’re going to kick yourself for not doing it sooner.

This tutorial will show how to do it for the New Blogger templates, but the principle is the same for all you WordPress users out there.

So why would you want to do this? Well, for starters most of the professional blogs do it because they know that colorizing the comments section will make their blog stand out more for the same reasons why you would use bold or italics to emphasize specific words in your posts.

Anything that adds impact to your blog will make it more memorable and encourage readers to come back and participate in the community, and nothing adds more pizazz than a splash of color so let’s go for it shall we.

Go into your Dashboard and click on the Layout, Template sections. Then click on Edit HTML and be sure to put a checkmark in the little Expand Widget Templates box as well.

Scroll down your CSS styles section and look for the code that refers to your comments section. In my case it looks like this:

.comment-body; {

This is the section that formats where my readers can add their comments. So all you have to do is add another line of code there to tell it what the background color should be. My color presently looks like this:

background:#FDF3E1 (Where #FDF3E1 represents the HTML color that I’m currently using)

Now don’t despair if you don’t know which color code you want to use. Just download this free software program (I use the standalone zipped version that doesn’t require an installation) and drag the little eyedropper over to a color that you like and ouila!

So in my case the CSS style that I’m using looks like this:

.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
background:#FDF3E1; }

Now do the same thing and scroll to the CSS style section where your own comments will go (you will find it close to the above code). It should look something like this:

.comment-body-author; {

Ok, now add the same CSS style as you did above but with a different color of course. In my case the color that I’m currently using is #E1EAFD, and it looks like this:

.comment-body-author {
margin:.5em 0;
padding:0 0 0 20px;
background:#E1EAFD; }

And that’s it! Hard eh?

So why don’t you give it a try and add some pizazz to your blog with your own colorful comments.

Written April 26th, 2007 by | 22 Comments | Filed under: Blog Tips, Design Tips, Tutorials ,

Thanks for Sharing     Share - enable java in your browser Share to Twitter            

Did you enjoy this article? Keep up to date with Blog Bloke Tips the moment it's published by email. Your Privacy is Guaranteed and will not be shared with anyone.

Keep it real with Blog Bloke Thanks for reading the original Blog Bloke. You can read more about me here. Contact me if you have any questions, tip requests or if you would like to be a guest blogger. Keep it real every day and subscribe to the newsfeed, share with friends or follow me.

    Subscribe to the Newsfeed     Share to Twitter     Share to Facebook     Share to Google Plus     Pin this     Share to LinkedIn

Got an opinion? Let's be real and start a conversation:

It's your turn to tell Blog Bloke what you think, ask a question or suggest another blog tip. Don't forget the comments policy and I'm looking forward to reading what you have to say.

There are 22 Comments so far to “Make Your Comments more Colorful!”

  1. This is just what I was looking for. Thanks… Jason

      Reply   ·   Share Share Blog Bloke Tips  

  2. I’m happy to see you’re out of the hospital and back to yer ol blogging tricks!

    Nothing can keep ya down
    Nary a frown
    For it’s back to blogging ya go (sung with a merry whistle!)

    The Best from Blondie

      Reply   ·   Share Share Blog Bloke Tips  

  3. I love it!

    Worked wonderfully…

    Thanks much, Blog Bloke.


    p.s. I hope your hospital thingee went well.

      Reply   ·   Share Share Blog Bloke Tips  

  4. You’re welcome Paula. I had you in mind when I wrote it.

      Reply   ·   Share Share Blog Bloke Tips  

  5. I’m missing ya Bloke! Twitter if you can! Sending you healing thoughts!

      Reply   ·   Share Share Blog Bloke Tips  

  6. Good to see up and about blogging again. I’ve added you to our blogroll - you have a great blog.

      Reply   ·   Share Share Blog Bloke Tips  

  7. Hi everyone!

    I’ve been dwelling in the house of pain having complications from the surgery, and I have to go the hospital again tomorrow morning.

    My computer also suffered a catastrophic crash that I haven’t had the strength to work on. I’ve set up another hard drive today but I’m so weak and the pain might keep me from blogging for awhile yet.

    The good news is I’m alive and I’m hoping that I can crawl out of this hole soon.

    It’s true when they say you can tell who your real friends are when you’re at your lowest.

    I really, really miss all of you and being online blogging.



      Reply   ·   Share Share Blog Bloke Tips  

  8. May you have a complete and speedy recovery.

      Reply   ·   Share Share Blog Bloke Tips  

  9. We’re holding down the (blog) fort for ya! So glad you’re doing better. Too bad about your computer.

      Reply   ·   Share Share Blog Bloke Tips  

  10. Tanks ;-)

      Reply   ·   Share Share Blog Bloke Tips  

  11. I having a problem with the author color. Every comment is the same color, there is no distinction.

      Reply   ·   Share Share Blog Bloke Tips  

  12. Curtis, make certain that your template has been saved after the changes. Sometimes if you’ve made an error with the syntax Blogger won’t let you save.

    Try cutting and pasting directly from this post instead of keying it in.

    After that, hit the refresh button on your browser (Ctrl-F5). If it still doesn’t show then keep fiddling with the code.

    It will work, but be patient.

      Reply   ·   Share Share Blog Bloke Tips  

  13. thanks for this great resource. i barely wait to do it myself. i’ve bookmarked it for future reference.

      Reply   ·   Share Share Blog Bloke Tips  

  14. i think that will be great ! there will be more colors on the comment box !! :)

      Reply   ·   Share Share Blog Bloke Tips  

  15. Was browsing your archives when i came across this post and have to say that this is a great idea and you are so right, anything that will encourage a person to come back to ones blog to talk via comments is well worth doing.

    I went to check out your link “standalone zipped version” and it comes back to ” Oops! This link appears to be broken.”? Would love to know the proper link as I tend to not like downloading everything in sight and this would be more useful for me?

      Reply   ·   Share Share Blog Bloke Tips  

    Reply by: BLOGBloke at 8:31 pm said...

    @Diane ( blogneta), FIXED! Thanks for letting me know.

      Reply   ·   Share Share Blog Bloke Tips  

    Reply by: Diane ( blogneta) at 8:58 pm said...

    @BLOGBloke, your welcome as always, going to play with a new toy now :-)

      Reply   ·   Share Share Blog Bloke Tips  

    Reply by: BLOGBloke at 5:29 am said...

    @Diane ( blogneta), next to Photoshop it’s my most indispensable design tool.

      Reply   ·   Share Share Blog Bloke Tips  

  16. […] […]

  17. @Diane ( blogneta), FIXED! Thanks for letting me know. http://bit.ly/bx7t4N

  18. @BLOGBloke, your welcome as always, going to play with a new toy now :-) http://bit.ly/bx7t4N

  19. @Diane ( blogneta), next to Photoshop it's my most indispensable design tool. http://bit.ly/bx7t4N

Share     Share this article with your friends

Subscribe to Better Blog Tips Newsfeed   SUBSCRIBE to Bloke Bloke's Articles (Newsfeed)

Subscribe to Better Blog Tips Newsfeed   Subscribe to only Comments for this Article | TrackBack URL

You can also use these html tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>