This topic has 8 replies, 2 voices, and was last updated 7 years by Radu.

  • Author
  • #130145
     greenscotland
    Participant

    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

    #130159
     Radu
    Moderator

    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
    #130371
     greenscotland
    Participant

    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

    #130372
     greenscotland
    Participant

    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/

    #130408
     Radu
    Moderator

    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
    #140857
     greenscotland
    Participant

    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

    #140971
     Radu
    Moderator

    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
    #141014
     greenscotland
    Participant

    Thanks a lot Radu!

    #141138
     Radu
    Moderator

    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
Viewing 9 posts - 1 through 9 (of 9 total)

The forum ‘General questions’ is closed to new topics and replies.

Log in with your credentials

Forgot your details?