• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

How To Make An Image Round

One of the great things about owning all the StudioPress themes which have already been released and all future releases is the different code you get access to.

You can easily take code from one child theme and use it in another child theme when you own them. Sometimes you might need to make a few tweaks but generally CSS code works in all themes.

round avatar

Here’s an example of taking CSS code from the Minimum theme and using it on any other child theme:

.avatar, .featuredpage img, .featuredpost img, .post-image {      
background-color: #F5F5F5;      
border: 1px solid #DDDDDD;      
border-radius: 50% 50% 50% 50%;      
padding: 4px; 
}

Make Avatar Round

All you need to do now is modify the code so it only effects you avatar.

Paste the code at the end of your child themes style.css file and clear your browser cache if needed.

Easily add, modify or delete the different CSS properties and values in this declaration to suit your needs.

If you want to change the default comments avatar image, read this.

The code in this post will work on any avatar image including Gravatar images. If you don’t already use Gravatar to host your image, here’s some reasons every blogger needs a Gravatar.

You could even add some really cool CSS effects using an online generator.

Round Avatar With CSS 3 Transition

Paste this code at the end of your child themes style.css file and click your author avatar to check out the transition effect.

Make Featured Images Round

Clearly, you’d only apply this CSS code to featured images that are square otherwise you’ll turn rectangular images into oval shaped images.

Make Single Square Image Round

You’ll need to grab the i.d for the image from the HTML in the WordPress text editor, in the source code of the page containing the image or by using Firebug.

make square image round

There’s heaps more you can do to style your images so stay tuned as i’ll be posting more styling tips shortly.

Learn more about styling images in WordPress.

Reader Interactions

Comments

  1. Angel Anderson says

    August 26, 2013 at 10:10 pm

    Thank you, like the new look in the website author image

    Log in to Reply
    • Brad Dalton says

      August 26, 2013 at 11:52 pm

      Thanks Angel

      Log in to Reply
  2. Sean says

    August 21, 2013 at 7:48 pm

    Hi, I tested your avatar photo 125×125 on my website and got the same result (odd shape)….although on your website, the avatar looks fine on IOS. It must just be an issue with IOS when that code is added to advanced image settings. Oh well I guess. 🙂

    Log in to Reply
    • Brad Dalton says

      August 21, 2013 at 8:28 pm

      Yes. The code isn’t 100% perfect so may not work perfectly in all browsers and devices.

      Log in to Reply
  3. Sean says

    August 21, 2013 at 1:17 pm

    Hi, I added your code to wordpress using the built in media feature. Under advanced image settings and then styles, I added this – background-color: #f5f5f5; border: 1px solid #dddddd; border-radius: 50% 50% 50%
    It looks great in Firefox and IE, but it does not create a proper circle in IOS. I added a screenshot here http://tinypic.com/r/10faqfr/5
    Any help would be greatly appreciated.

    Log in to Reply
    • Brad Dalton says

      August 21, 2013 at 4:10 pm

      Hi Sean

      You might want to make sure its square first.

      Log in to Reply
  4. Amit Kolambikar (@Amit_Kolambikar) says

    May 25, 2013 at 11:39 am

    Hey Brad your site is awesome and your contribution to genesis themes is extremely helpful.I have implemented the above method on my site.I have one question though, in my theme.
    What is the image under the header ? its located in the assets file and i don’t know what it is ? how should i remove it ? Please suggest me a way to remove it

    /** Add new image sizes */
    add_image_size( ‘header’, 0, 0, TRUE);
    //add_image_size( ‘portfolio’, 330, 230, TRUE );

    /** Add support for custom background */
    add_theme_support( ‘custom-background’ );

    /** Add support for custom header */
    add_theme_support( ‘genesis-custom-header’, array(
    ‘width’ => 1423,
    ‘height’ => 59
    ) );

    What should i change in the above code or do you have a better suggestion ?

    Log in to Reply
    • Brad Dalton says

      May 26, 2013 at 8:22 am

      Thanks for the kind words Amit.

      Check you child theme for a folder named assets and remove an image named image.png and that should fix the problem.

      Cheers

      Log in to Reply
      • Amit Kolambikar (@Amit_Kolambikar) says

        May 26, 2013 at 9:42 am

        No sir i tried that which is the reason why there is no image there.It has something with the code in functions.php ? what could it be ? I had installed this plugin http://wordpress.org/plugins/genesis-minimum-images-extended/ set a banner image and then deleted the plugin because the image was not full scaled and it looked pathetic so maybe because of that something is going wrong ?

        Log in to Reply
        • Brad Dalton says

          May 26, 2013 at 10:07 am

          Yes, that could have caused the problem and may have left some code in your database.

          You could open each file in your child theme as well using Notepad++ and use the search and find feature.

          You could also do the same thing with a database export or use the search feature in phpMyAdmin.

          Log in to Reply
  5. Ellen says

    May 14, 2013 at 8:21 am

    Hi Brad!
    Thanks for this tutorial, really useful it is 🙂
    I inserted the avatar css code and it displays very nicely on the coment section of my site.
    Thanks ever so much for sharing this.

    Log in to Reply
    • Brad Dalton says

      May 14, 2013 at 1:08 pm

      Hi Ellen.

      Thanks for stopping by and leaving a nice comment.

      I’ll be writing more posts like this shortly as i discover cool stuff like this included in themes and on web design forums.

      Log in to Reply
  6. Keith Davis says

    May 13, 2013 at 9:03 pm

    Hi Brad
    Useful info as ever.
    Seeing lots of circular images these days… avatars and lots of other images.
    Looks very stylish.

    Log in to Reply
    • Brad Dalton says

      May 13, 2013 at 10:05 pm

      Hi Keith.

      I saw this question on the SP forums last week and Anita answered it told me where she got the code from so i thought it would be useful. A bit different than the standard square images.

      Thanks for the comment.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.