[Resolved] Round avatar

[Oleg]

Hello!
By default GeneratePress, all avatars including the BuddyPress&bbPress, are square. How to do all avatars round?
Thanks you.

[bdbrown]

Hi Oleg. This example may give you a starting point: Wrapping Text Around A Circular Image With CSS Shapes.

[Oleg]

Thanks, but this code is not working for me. I’m not sure how to change it.

[Tom]

I’m using this CSS to make avatars round in bbPress:

#bbpress-forums div.bbp-forum-author img.avatar, 
#bbpress-forums div.bbp-topic-author img.avatar, 
#bbpress-forums div.bbp-reply-author img.avatar {
    border-radius: 50%;
}

border-radius: 50% will only work if the image is the same width and height (100×100 for example).

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Oleg]

Thank you!
What CSS is needed to BuddyPress?

[Tom]

Can you link me to a BuddyPress page with avatars?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Oleg]

It’s standard page, example:
Activity – http://test2.rus.network/activity/
Members – http://test2.rus.network/members/, http://test2.rus.network/members/olegus/profile/
Groups – http://test2.rus.network/groups/, http://test2.rus.network/groups/the-godfather/

[Tom]

Give this CSS a try:

.avatar {
    border-radius: 50%;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Oleg]

Yes, cool!

[Michael]

@Tom that was the best CSS code around. Thanks for that. Small and simple.

[Tom]

Happy to help! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts