Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialRob Stinson
1,406 PointsHow did you achieve the circle styling of your avatar?
I'm following along with the tutorial using my own HTML and CSS template. All ok so far. I want to achieve a round avatar, which is simple enough by applying a css class to an <img> tag, yet I can't seem to find away to access the output <img> of the get_avatar function to apply the custom css class. I tried wrapping it in a <span>, as you have done and applying the class there, but no luck. I was wondering how you achieved it?
1 Answer
Muhammad Mohsen
Courses Plus Student 10,843 PointsHi Rob,
get_avatar() simply outputs an image element (http://codex.wordpress.org/Function_Reference/get_avatar)
<img alt="" src="http://0.gravatar.com/avatar/0d6a758a8b9cb117c5cfcc7bab655a1d?s=96&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D96&r=G" class="avatar avatar-96 photo" height="96" width="96">
with 3 default css classes
class="avatar avatar-96 photo"
So you can now hook into one of these classes and do whatever you need :)
.avatar {
border-radius: 50%;
}
OR
.avatar-96 { // this will change according to img size you specified with get_avatar('mail@example.com', 96) second parameter.
border-radius: 50%;
}
OR
.photo {
border-radius: 50%;
}
Rob Stinson
1,406 PointsRob Stinson
1,406 PointsMuhammad Mohsen
Legend! I knew it was going to be something simple.
Cheers