Rounded Avatars in Comments Tutorial

I was quite pleased to discover a little trick while I was messing around with my blog template in the last couple of days. I had seen on a friend's   blog that the comment avatars were little circles rather than the standard    square shape. The circle was just really cute, and was one of those small  touches that adds so much to a design, so I decided to add it to my own  blog.

I didn't have any luck finding a tutorial to follow, so I fiddled around until I came up with the right combination and here it is!

1. Of course you begin every similar tutorial like this by going to the html editor of your blog, and downloading the template. That is unless you're like me (read: lazy), and don't. It's up to you.

2. Search for the following code:

.avatar-image-container {

3. Right under that, paste this code:

-moz-border-radius: 20px !important;
-webkit-border-radius: 20px !important;
-goog-ms-border-radius: 20px !important;
border-radius: 20px !important;

4. Save your template, and go check it out! The preview won't work in this situation, because the comments don't show up on the home page.

Enjoy!

7 comments:

  1. Ooh, this is handy! I can't wait to try it out! :D Thanks for writing up this tutorial -- you rock!

    ReplyDelete
  2. I'm getting a blog-redesign soon - I'll have to try this out! Thanks for the tutorial!

    ReplyDelete
  3. Awesome! Thanks for sharing=)

    ReplyDelete
  4. Great one! But.. I can't find the code in my blog template's HTML codes. How's that? Thanks for this by the way. :D

    ReplyDelete
  5. Just wanted to let you know that I used your tutorial on rounded corners for my new design! I love it that you posted this around the same time I was working on my new template.

    Also just wanted to add for anyone having trouble, the original code didn't work for me, and instead of using the line with "avatar-image-container" I finally found a different code I had to start it out with. This is what I finally pasted into my code:

    .delayLoad {
    -moz-border-radius: 12px !important;
    -webkit-border-radius: 12px !important;
    -goog-ms-border-radius: 12px !important;
    border-radius: 12px !important;
    }


    You'll notice that I changed my numbers, and this gave it more of a rounded square effect, rather than circles. Thank you so much for posting this tutorial!

    ReplyDelete
    Replies
    1. Thank you so much for those added tips, Tarissa! It is a little difficult sometimes to translate these tricks to fit all templates. It looks great on your blog!

      Delete

Did you know that by leaving a comment you will totally make my day? Please make sure that you are not nasty in any way, shape, or form, otherwise I will have to delete what you had to say.