Pages

▼

Thursday, June 7, 2012

Round avatars, thumbnails, and other images

Lately I learned how images can be rounded using CSS. This seems to be a "good formula":
.someclass {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
For some templates, and maybe just for a change, those rounded images can look very good. I'll show you CSS you can add to my hacks, and one Blogger gadget, to make images round. In my hacks you should add the CSS in the code before </style>.

Better recent comments gadget

Add this style:
.recent-comment-ico img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}


Profile gadget with post count

Add this style:
.author-avatar {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}


Top Commentators gadget

Add this style:
.top-commenter-line img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}


Gadget for YouTube activity feed

This gives a nice "tube TV" like effect, add this style:
div.ytc_thumb img {
border:none;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}



Just one more, and I think you'll get the hang of it. :)

Popular Posts (Blogger gadget)

Add this style using Template Designer, Advanced, Add CSS:
.PopularPosts .item-thumbnail img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}


   Posted at

18 comments:

  1. the searching oneJune 8, 2012 at 10:06 PM

    Those round avatars look great!
    Thanks for that ♥

    ReplyDelete
  2. KarolineJune 20, 2012 at 6:46 AM

    I really like your tips, very usefull. Thanks for sharing your knowledge with us. :)

    www.karolinevendramini.com

    ReplyDelete
  3. Levis RajuJune 22, 2012 at 3:43 PM

    Check this too..... :)

    Show Rounded Avatar Images On Blogger Comments

    ReplyDelete
  4. UnknownOctober 10, 2012 at 4:52 PM

    I just used it on my recent items... wow!! It looks great! Thanks, L

    ReplyDelete
  5. UnknownOctober 10, 2012 at 4:58 PM

    How can I make my "related posts" round, too?

    They are at the bottom of the page above the comments..
    http://hippressurecooking.blogspot.it/2012/09/pressure-cooker-dulce-de-leche-condensed-milk.html

    Thanks,

    L

    ReplyDelete
  6. MS-potilasOctober 10, 2012 at 6:38 PM

    @Laura @ hip pressure cooking
    Hi, great you liked these :) For the related posts, try the following CSS definition:

    #related-posts img {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    }

    ReplyDelete
  7. UnknownOctober 10, 2012 at 7:43 PM

    @MS-potilas

    yay! It worked. Not the image size, though. It looks like that might be decided some other way.

    I love that "related posts" sciript - it's the only one that looks at labels and not just the post titles when making a selection.

    Very nice, these circles, it breaks up all the squares.

    Ciao,

    L

    ReplyDelete
  8. UnknownNovember 23, 2012 at 11:46 AM

    Nice But Will it Do All The Avatars Round

    ReplyDelete
  9. MS-potilasNovember 24, 2012 at 9:54 AM

    @yogesh mandge
    Hi,

    this technique rounds images belonging to the classes that are specified in the CSS code. I've given some examples on the article, and Levis Raju has an examples here for comment avatars: Show Rounded Avatar Images On Blogger Comments.

    ReplyDelete
  10. AnonymousDecember 22, 2012 at 6:15 AM

    I used this for my blog, because round avatar look great.

    thanks

    ReplyDelete
  11. UnknownJanuary 13, 2013 at 8:16 AM

    I had been using this hack on popular and related posts and ABSOLUTELY love it! However, even with your post-supression hack I always have the same popular posts (if I supress the top 10 popular posts then non show - not your fault that is design of the widget).

    So I moved to the featured post widget:
    http://www.bloggerplugins.org/2011/09/featured-posts-widget-for-blogger.html

    But now it looks horribly square and boring.

    Any way to round those thumb-nails?!?

    Ciao,

    L

    ReplyDelete
  12. MS-potilasJanuary 13, 2013 at 12:26 PM

    @Laura Pazzaglia
    For ".someclass" try "div.bp_item_thumb img", like this:

    div.bp_item_thumb img {
    ...css definitions here...
    }

    ReplyDelete
  13. UnknownJanuary 13, 2013 at 1:12 PM

    @MS-potilas

    OK, I tried it like this:

    div.bp_item_thumb img {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0);
    }

    and nothing happened : (

    I placed it in the blogger:templates:advanced:css

    Then, because I'm out of my depth I also tried..

    .sidebar_section img {...

    and

    .sidebar-left-1 img {...

    But, probably no surprise to you, neither of them worked either.


    Ciao,

    L

    ReplyDelete
  14. MS-potilasJanuary 13, 2013 at 3:02 PM

    @Laura Pazzaglia
    There are two versions of this gadget, the first one, which you use, cannot be styled using CSS because it is in iframe. I'm afraid that neither the thumbnail size cannot be changed in the first gadget. The second one, "HTML/JavaScript Widget for Featured Posts", which may be more difficult to install, can be styled.

    ReplyDelete
  15. UnknownJanuary 13, 2013 at 5:03 PM

    @MS-potilas

    WOW! I installed the second script and the images are round using the same style sheet that works for popular posts you gave me originally.

    The other advantage of the second "featured post" script is that you can set the image size right in there.

    The "auto install" of that script didn't work but I just copied and pasted the javascript in a new widget and ... WOW!

    Thank you so much!

    Ciao,

    L

    ReplyDelete
  16. MS-potilasJanuary 13, 2013 at 7:24 PM

    @Laura Pazzaglia
    Great! :)

    ReplyDelete
  17. MS-potilasJanuary 30, 2013 at 3:13 PM

    @Muhammed iSham
    There are many images used in templates for different purposes, and it probably won't look good, if all images are rounded. Probably some discrimination should be used. But you can try, just replace ".someclass" with "img" (without quotation marks) in the first code snippet, and put that into the CSS definitions in the template.

    ReplyDelete
  18. MS-potilasJanuary 31, 2013 at 11:53 AM

    @Muhammed iSham
    Hi, I remember that Picture Window template has rounded corners in header etc. That is probably done by some CSS, but I'm not so good in CSS that I could say how. My CSS knowledge is more or less based on Google search.

    ReplyDelete

Smileys :) ;) :P :D :( and ;( are converted to graphical emoticons in the blog.