This topic has 53 replies, 4 voices, and was last updated 9 years by Radu.

  • Author
  • #55331
     paolabueso
    Participant

    Hi,
    I was wondering if it would be possible to display the members in the way seen on the picture attached to this message. With a black background, a larger avatar in the center and extended profile fields. Thank you in advance for your help.
    Regards,
    Paola

    Attachments:
    You must be logged in to view attached files.
    #55405
     Radu
    Moderator

    Hello,

    Replace this file : kleo/wp-content/themes/kleo/buddypress/members/members-loop.php with this file (see attachment unzip and replace)

    Then add to your kleo child ( kleo/wp-content/themes/kleo-child/functions.php ) this content

    COPY CODE
    
    function Extra_Fields_Members_Directory() {
    
        $location = bp_get_member_profile_data('field=Location');
        $specialization = bp_get_member_profile_data('field=Specialization');
        if ($specialization || $location) {
    
            echo '<div class="mdetcenter">'. 'Location : ' . $location . '</div>';
            echo '<div class="mdetcenter">'. 'Specialization : ' . $specialization . '</div>';
    
        }
    }
    
    add_action(bp_directory_members_item, Extra_Fields_Members_Directory);
    

    You need to create that exact fields ( Location, Specialization ) otherwise the fields will not appear.

    Also in kleo-child directory look for style.css file and paste this snippet

    COPY CODE
    
    div.mdetcenter {text-align:center;}
    #buddypress #members-list li div.item-avatar {
        width: 100px;
        display: block;
        height: 100px;
        text-align: center !important;
        margin: 0 auto !important;
        float: none;
    }
    #members-list .item-meta {text-align: center;}
    #buddypress ul.item-list li div.item-title {margin-left: 0;margin-right: 0;}
    #buddypress #members-list .item-title {margin-left: 0;margin-right: 0;text-align: center;}
    #buddypress #members-list .item-meta {margin-left: 0;margin-right: 0;text-align: center;}
    ul#members-list li.kleo-masonry-item .member-inner-list{
        background-color :#333333 !important;
    }
    #buddypress #friend-list div.item, #buddypress #members-list div.item, #buddypress #member-list div.item {
        color:#FFF;
    }
    #buddypress #members-list .item-title a {
        color : #FFFFFF !important;
        font-weight: bold;
    }
    
    

    Cheers

    Radu

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    Attachments:
    You must be logged in to view attached files.
    #55425
     paolabueso
    Participant

    WOW RADU! THANK YOU!! I just did it and it looks amazing! The only thing that is missing is the ‘User Type’ field that is seen above the location field. How can I add it? Again, THANK YOU SO MUCH!

    Paola

    #55427
     paolabueso
    Participant

    And I just realized that the blue dot moved slightly to the right. I’ve attached an image so you can see it better. Again, thank you.

    Attachments:
    You must be logged in to view attached files.
    #55430
     Radu
    Moderator

    Hello again,

    Check the attachment , it have user type implemented.

    PS : Thank you for the nice review !

    Have a nice night.

    Radu

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    Attachments:
    You must be logged in to view attached files.
    #55433
     paolabueso
    Participant

    Thank you so much! You’ve been excellent! I’ve just replaced the file. When you get the chance please let me know what I should add to the Kleo Child functions.php and style.css. I truly appreciate your help.

    Paola

    #55624
     Radu
    Moderator

    Hello again,

    Login to FTP, go to : wp-content/themes/kleo-child/functions.php open this file and replace with this content :

    COPY CODE
    
    <?php
    /**
     * @package WordPress
     * @subpackage Kleo
     * @author SeventhQueen <themesupport@seventhqueen.com>
     * @since Kleo 1.0
     */
    
    /**
     * Kleo Child Theme Functions
     * Add custom code below
    */
    
    
    function Extra_Fields_Members_Directory() {
    
        $location = bp_get_member_profile_data('field=Location');
        $specialization = bp_get_member_profile_data('field=Specialization');
        if ($specialization || $location) {
    
            echo '<div class="mdetcenter">'. 'Location : ' . $location . '</div>';
            echo '<div class="mdetcenter">'. 'Specialization : ' . $specialization . '</div>';
    
        }
    }
    
    add_action(bp_directory_members_item, Extra_Fields_Members_Directory);
    

    Then you need to load the CSS, go to : wp-content/themes/kleo-child/style.css and paste this snippet into style.css

    That’s all.

    COPY CODE
    
    div.mdetcenter {text-align:center;}
    #buddypress #members-list li div.item-avatar {
        width: 100px;
        display: block;
        height: 100px;
        text-align: center !important;
        margin: 0 auto !important;
        float: none;
    }
    #members-list .item-meta {text-align: center;}
    #buddypress ul.item-list li div.item-title {margin-left: 0;margin-right: 0;}
    #buddypress #members-list .item-title {margin-left: 0;margin-right: 0;text-align: center;}
    #buddypress #members-list .item-meta {margin-left: 0;margin-right: 0;text-align: center;}
    ul#members-list li.kleo-masonry-item .member-inner-list{
        background-color :#333333 !important;
    }
    #buddypress #friend-list div.item, #buddypress #members-list div.item, #buddypress #member-list div.item {
        color:#FFF;
    }
    #buddypress #members-list .item-title a {
        color : #FFFFFF !important;
        font-weight: bold;
    }
    
    

    Let me know if is ok.

    Cheers

    Radu

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

    Hi Radu, I wanted to ask a question on the same topic.

    I have used your CSS code here from previous post and nothing happened, I also played around with this and nothing happened.

    #buddypress ul.item-list li img.avatar {
    width: 220px;
    }

    #buddypress #members-list li div.item-avatar {
    width: 220px;
    height: 220px;

    How can I control avatar sizes and location within the box in CSS?

    At this point I have all fields I want on my members profile boxes, but I want to have a bigger avatar and to move it on top of the name.

    Imho if there is anything that could use work in the template, out of the box, it would be the members page, you have these awesome shortcodes that show large pictures, but how to integrate that with a name and profile fields.

    Attachments:
    You must be logged in to view attached files.
    #58886
     Radu
    Moderator

    Hi,

    Can you provide the live url ?

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

    At this point im going to keep the box as is standard but I want to increase the avatar size, is that possible?

    Also, I would like to get rid of these (add friend) (private message) and (block buttons) from all members page, i think most of your customers want to get rid of them there.

    Attachments:
    You must be logged in to view attached files.
    #58930
     Abracadabra
    Participant
    This reply has been set as private.
    #58932
     Abracadabra
    Participant
    This reply has been set as private.
    #58933
     Abracadabra
    Participant

    sorry, one more thing which others might be interested in as well.

    Groups members lists at the moment have a very simple layout, a picture + name + text saying joined x days ago…

    Is it possible to use our all members layout in group members?

    #58942
     Radu
    Moderator

    Hello,

    Please take look, it should to be ok

    i applied this CSS :

    COPY CODE
    
    #buddypress #friend-list li div.item-avatar, #buddypress #member-list li div.item-avatar, #buddypress #members-list li div.item-avatar {
      border-style: solid;
      border-width: 5px;
      width: 190px;
      height: 190px
    }
    #buddypress #members-list li div.item-avatar img.avatar {width:100%;}
    #buddypress #members-list li div.item-avatar {float:none !important;margin:0 auto;}
    #buddypress #members-list li div.item div.generic-button.block-this-user {text-align:center;margin:10px 0;}
    #members-dir-list ul#members-list .item-avatar .kleo-online-status {
      width: 14px;
      height: 14px;
      bottom: 6px;
      right: 20px;
    }
    

    the only thing that you need to do is to delete that margin-left:35%; (see screenshot)

    Let me know if is ok.

    Cheers

    Radu

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

    Thanks Radu, looks very good, perhaps too big, but I can play around with this css now. IMHO you could offer this as some kind of a shortcode, it looks much better than the regular member page.

    Not sure what you mean by 35, this screenshot did not attach properly.

    #58945
     Abracadabra
    Participant

    Is it possible to use this layout for groups members page as well?

    #58947
     Abracadabra
    Participant

    One more thing if I may, is it possible to get rid of all these buttons? Add friend, Private Message and Block?

    Regarding the margin left 35, I think it concerns this code in my PHP.

    if( is_user_logged_in() && bp_is_members_component() ) { ?> <div class=”bph_xprofile_fields” style=” margin-left: 35%;”> <br />

    So what should it be now?

    if( is_user_logged_in() && bp_is_members_component() ) { ? <br />

    Like this?

    #58949
     Radu
    Moderator

    Try like this

    COPY CODE
    
    
    #member-list > li > div > div.item-avatar.rounded > a > img {width:190px;}  
    
    #member-list > li > div > div.item-avatar.rounded {margin: 0 auto !important;}
    

    It should be ok

    Cheers

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

    Also don’t forget to rate our theme on Themeforest and give it 5 stars 🙂

    http://themeforest.net/downloads/

    Best regards

    Radu

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

    Sorry, I want to get it exact as every time i put the wrong code, I have to restore from back up that is one day old. So, like this you mean?

    if( is_user_logged_in() && bp_is_members_component() ) { ? <br />
    #member-list > li > div > div.item-avatar.rounded > a > img {width:190px;}
    #member-list > li > div > div.item-avatar.rounded {margin: 0 auto !important;}

    #58953
     Radu
    Moderator

    from

    COPY CODE
    
    if( is_user_logged_in() && bp_is_members_component() ) { ?> <div class=”bph_xprofile_fields” style=” margin-left: 35%;”> <br />
    

    needs to be

    COPY CODE
    if( is_user_logged_in() && bp_is_members_component() ) { ?> <div class=”bph_xprofile_fields”>
    

    And the css
    #member-list > li > div > div.item-avatar.rounded > a > img {width:190px;}
    #member-list > li > div > div.item-avatar.rounded {margin: 0 auto !important;}

    You need to put this in Theme Options -> General settings -> Quick CSS area or in Kleo-Child/style.css

    Cheers

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

    The css did not work well for group members, the avatar looks misplaced, there is no extra fields, and I can still see joined x days ago.

    #58965
     Radu
    Moderator

    Replace this :

    COPY CODE
    
    #member-list > li > div > div.item-avatar.rounded {margin: 0 auto !important;}
    
    

    with this

    COPY CODE
    
    #member-list > li > div > div.item-avatar.rounded {margin: 0 auto !important;float:none !important;}
    

    I forgot to declare float:none !important;

    It’s ok now ?

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

    Not really, the avatar is left aligned, still no extra profile fields, and that text joined x time ago still there. screenshot to follow.

    #58973
     Abracadabra
    Participant
    This reply has been set as private.
    #58977
     Abracadabra
    Participant

    There is also a problem with Friends request box/avatar, screenshot to follow. This still looks like this even when I delete the last two lines of CSS code you provided.

    #58978
     Abracadabra
    Participant
    This reply has been set as private.
    #58998
     Abracadabra
    Participant

    Also when I deleted that 32 from php.code, the field’s text is now left aligned on members page

    #59004
     Abracadabra
    Participant
    This reply has been set as private.
    #59412
     Abracadabra
    Participant
    This reply has been set as private.
    #59451
     Radu
    Moderator

    For friend request layout i added this css

    COPY CODE
    
    #buddypress #friend-list .item-title, #buddypress #member-list h5, #buddypress #members-list .item-title {margin:20px auto; text-align:center;}
    #buddypress ul.item-list li img.avatar {width:100% !important;}
    #buddypress #friend-list .rounded {margin:0 15% !important;}
    

    It should to be ok

    For the avatar size try to do this : http://buddydev.com/buddypress/changing-default-avatar-size-croppedused-by-buddypress/

    Or provide me ftp

    Let me know if it works.

    Cheers

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #59454
     Abracadabra
    Participant
    This reply has been set as private.
    #59595
     Radu
    Moderator

    Hi,

    Just i fixed the image size from members directory etc.. wp-content/themes/kleo/buddypress/members/members-loop.php
    I used this,

    COPY CODE
    <a href="<?php bp_member_permalink(); ?>"><?php bp_member_avatar( 'type=full&width=120&height=120' ); ?></a>

    instead of this

    COPY CODE
    <a href="<?php bp_member_permalink(); ?>"><?php bp_member_avatar(); ?></a>

    Cheers

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #59600
     Abracadabra
    Participant
    This reply has been set as private.
    #59601
     Abracadabra
    Participant
    This reply has been set as private.
    #59613
     Radu
    Moderator
    This reply has been set as private.
    #59742
     Abracadabra
    Participant
    This reply has been set as private.
    #59821
     Radu
    Moderator
    This reply has been set as private.
    #59822
     Abracadabra
    Participant
    This reply has been set as private.
    #60226
     Radu
    Moderator
    This reply has been set as private.
Viewing 40 posts - 1 through 40 (of 54 total)

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

Log in with your credentials

Forgot your details?