Buddypress Avatar borders not rounded and images too small

[glassinebooks]

Hi, I’m having some issues with the buddypress avatars on my site http://www.glassinebooks.com.

In the activity stream, the borders don’t appear rounded. Instead, they have a flat edge at the top and at the left. The borders are also generally too big, and the avatar images a bit too small. In the sitewide activity, the avatar at the top of the page is also way too small, just noticed this.

I attached some screenshots of the avatars below.

Not sure what I did for it to end up this way, I’ve been trying to figure out how to fix it for days now. Any help resolving this issue would be appreciated. Thanks!

Attachments:

You must be logged in to view attached files.

[Catalin]

Hello,

For this modification to work, you need to add a custom class to the row element from visual composer where the members activity is listed and start adding css code for each element you want to style.

Thank you,
Catalin

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[glassinebooks]

Hi Catalin,

Thanks for that, but what code should I add? I tried this code to make the images larger, but it didn’t do anything… I’m still quite new when it comes to html and css.

.activitystream.kleo-activity-avatar{
height: 80px;
width: 80px;
}

I also tried this to make the border smaller, but with no results:

.activitystream.activity-avatar.rounded {
height: 50px;
width: 50px;
}

[Catalin]

Hello,

Hello,

For showing bigger avatar images take a look at this link:

https://archived.seventhqueen.com/forums/topic/how-to-change-the-default-buddypress-avatar-sizes

If you go for larger avatar images you can go for transparent border color. Take a look in the (Theme options > Styling options).

Thank you,
Catalin

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[glassinebooks]

Hi Catalin,

Changing the main background colour to transparent fixed my issue with the borders, but now the text in all my buttons on the site have become transparent too… How can I stop that from happening?

[glassinebooks]

I managed to figure it out! Playing around with the styling options, I realized that the color of the large border around the avatars was matching the color of the text for that section. So I added this code to the section to make the color match the background of my page and it worked!

COPY CODE

.activity-avatar
{
color:#f0f0f0;
}

.rounded
{
color:#f0f0f0;
}

[Author]

Posts