Simple way to enlarge profile pic and add info lines below profile pic

[greenscotland]

Hi,

I am looking for a simple way to enlarge the profile pics in my kleo / buddypress website and add a few extra lines of info below the profile pics.

Please see here. The logo pic is very small and I would like to be able to add a bit of summary info below it.

Is it possible to do this via the general theme settings or rtmedia? I have been looking but can’t find a way.

Please advise. Many thanks,

Adam

[Radu]

Hi,

The avatar size can be easy increased by adding this css to wp-admin -> theme options -> general settings -> quick css

COPY CODE

.buddypress div#item-header img.avatar {
    width: 100% !important;
}

Cheers
R.

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

What support service includes ? What not ?

[greenscotland]

Hi Radu,
Thanks for your help. However that bit of css only makes the avatar larger or smaller within the same sized circle. I would like to make the circle and the actual size of the avatar larger. Is that possible with a bit of similar css?
Also, I would like to add some text below the avatar to summarise the user.
Thanks,
Adam

[greenscotland]

By the way, I see I added a link incorrectly for you to check, here is the correct link to see the small avatar size, thanks: https://greenscotland.org/members/renewgreenenergy/

[Radu]

Hi,

With the css that i gave you the image will be 100% of the original size and also the circle it’s 100% will be increased as the image size.

For the avatar problem with the size add also this css to quick css area

COPY CODE

.buddypress div#item-header img.avatar {
    width: 100% !important;
}

You can add text there by using this solution https://archived.seventhqueen.com/forums/topic/show-custom-profile-fields/#post-46827

Cheers
R.

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

What support service includes ? What not ?

[greenscotland]

Hi,
I opened this ticket some time ago and have returned to it because I never managed to achieve what I wanted.
I would like to make the user avatar image and circle larger in the profile area. I have added the css that I was given

.buddypress div#item-header img.avatar {
width: 100% !important;
}

…and tried adding larger sized avatars but still it remains the same size.
Could someone please let me know what I am doing wrong.
Many thanks,
Adam

[Radu]

Hi,

The snippet works but the called image on members it’s 150×150 and you should increase the image size called in php

https://codex.buddypress.org/themes/guides/customizing-buddypress-avatars/

COPY CODE

define ( 'BP_AVATAR_THUMB_WIDTH', 250 );
define ( 'BP_AVATAR_THUMB_HEIGHT', 250 );

the code can be added to wp-content/themes/kleo-child/functions.php or in bp-custom.php

Let me know

Cheers
R.

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

What support service includes ? What not ?

[greenscotland]

Thanks a lot Radu!

[Radu]

You’re welcome

Cheers
R.

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

What support service includes ? What not ?

[Author]

Posts