Rounded user avatars


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


Hi there !

If you like to follow the look and styling of the Customizr rounded images for featured pages and post thumbnails here is how you can turn your square user images (gravatar and local) to rounded ones, or just with rounded corners. It will affect user images in comments and author-info boxes too.

Where to copy/paste this code? The simpliest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then a strongly recommend to create a child theme. Everything you need to know about child theme with Customizr here.

If you want to round only image (gravatar) in author info box then you should use

To be more fancy, you could add border around image by adding line bellow in existing rule, e.g.:

To achieve only rounded corners on square avatar image you need to change border-radius value to, let me say, 10%.


Related Snippets you may also like


21 thoughts on “Rounded user avatars

  • Legit Coder

    My avatars are not showing on the pages or posts especially in the comments. Help would be greatly appreciated. Thank You

  • Kay

    Thank you for the code. Nicolas you may should use as default in your theme 😉
    In my snippet, I add
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    to get a nice shadow below the avatar.

  • Gautham Sarang

    I am using featured images for posts in a category. Can I have different thumbnail size (than 250 x 270) for the rounded image?
    Also I am getting a secondary loop of header portion after the footer when I activate nextgen gallery plugin. Any fixes?

    • Nicolas

      Hi Gautham,
      You can easily change the default thumbnail size with a specific filter : ‘tc_thumb_size’.

      About the Nextgen gallery issue, it is fixed in the next version. Already available here.

      Thanks

  • Silvia

    Hello, I’m really new in building pages and I love your Customizr theme.
    Maybe this is a lazy question but I really couldn’t find were to add my avatar…
    Could you please help me?

    Thank you!

    • Nicolas

      Hi Silvia,to get an avatar, go on gravatar.com and create an account with your choosen avatar. Then the email adress used to create your account in gravatar will be linked to this avatar everywhere.
      Hope this helps

      • Silvia

        Thank you Nicolas!!!!
        Now I have a face and as I’m not clear using CCS I had to create an image inside a circle. It worked!!!!!
        Thanks again…

  • dhananjay

    @Nicolas, I have activated following component other than default
    WordPress.com Stats, Publicize,Jetpack Comments,Carousel(I don’t know how to deactivate it), Sharing,Gravatar Hovercards, WordPress.com Connect.
    That’s all!

    • Lucho

      Hello,
      I have the same problem of compatibility between Customizr and JetPack. For rounded thumbnails, It seems that the problem come from the Jetpack module Photon : when I deactivate it, thumbnail are rounded, whereas they are squared when the module is activated.

        • lucho

          Ok, thanks for your quick reply.
          If you look at the compatibility with Jetpack, can you also look at this other issue : when jetpack extension is active, lightbox effect does not work anymore on galleries (the image is simply shown inside a new page), but still work on individual image. I do not found the module that cause this issue (even when deactivating the galley module of Jetpack), but when I deactivate Jetpack, the lightbox effect work again on gallery images.
          Thanks

  • dhananjay

    Is Customizr rounded images for post thumbnails a default setting or I have to activate it somewhere? Because in my blog post thumbnail is neither showing rounded image nor that cool zoom animation. I am longing for them. Please help!

Comments are closed.