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.
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.
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.
Thank you, like the new look in the website author image
Thanks Angel
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. 🙂
Yes. The code isn’t 100% perfect so may not work perfectly in all browsers and devices.
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.
Hi Sean
You might want to make sure its square first.
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 ?
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
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 ?
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.
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.
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.
Hi Brad
Useful info as ever.
Seeing lots of circular images these days… avatars and lots of other images.
Looks very stylish.
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.