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.
Leave a Reply
You must be logged in to post a comment.