Member Customization

[paolabueso]

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

[Radu]

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

[paolabueso]

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

[paolabueso]

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.

[Radu]

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

[paolabueso]

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

[Radu]

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

[Abracadabra]

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.

[Radu]

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

[Abracadabra]

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.

[Abracadabra]

http://arystokrata.com/
Username: Laura
Password: kleo1234

[Abracadabra]

also where can I leave a review for you guys, I would like to do that.

[Abracadabra]

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?

[Radu]

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

[Abracadabra]

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.

[Abracadabra]

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

[Abracadabra]

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?

[Radu]

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

[Radu]

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

[Abracadabra]

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;}

[Radu]

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

[Abracadabra]

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.

[Radu]

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

[Abracadabra]

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

[Abracadabra]

this is what it looks like now

[Abracadabra]

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.

[Abracadabra]

Friends request avatar/box

[Abracadabra]

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

[Abracadabra]

Allow me to try and sum up all of these posts above.

All members and group members look amazing now, however there is a problem with cropping pictures, they look blurry in those pages, the only one that looks good is a facebook login (John Arango) and that one got cropped automatically. I tried different photos, all are blurry, and they look fine on main profile avatar which is only slightly smaller, so there is something wrong with uploading pictures and showing them properly on these bigger avatars.

And friends/requests avatars are misaligned.

[Abracadabra]

I have changed around layout of members list a bit, but same issue remains, for main avatar on profile pictures upload fine, but on all members page and friends they are blurry.

Also, on friends request screen the picture is misaligned and small.

I sent 2 requests to Laura Kleo login, you can see it there.

It also seems that users that log in through facebook show fine on members and friends pages, but ones registered normally do not.

http://arystokrata.com/
Username: Laura
Password: kleo1234

[Radu]

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

[Abracadabra]

Hi Radu, yes I see that requests now have a large picture but still blurry.
Every time I do something with code I crash the site, cou you please have a look? My FTP is

Hostname: arystokrata.com
Port: 22
SFTP Username: arys2401299732
Password: yAVE-0P0}Ks

also would you happen to know how to correct this on the attachment? add friend overlaps the avatars for people you may know and group suggestions, i dont konw why that happens, the regular members widget does not have any spacing problem.

[Radu]

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

[Abracadabra]

Thanks Radu,I see all members looks good now, but Friends/Requests is still blurry.

[Abracadabra]

screenshot

[Radu]

Done,it’s ok now.

Can i mark this topic as resolved ?

Cheers

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

[Abracadabra]

Hi Radu,

One more thing I discovered, the group members avatars are still blurry and names are not centered in boxes.
Could you have a look at that please?

[Radu]

Solved,

It’s ok now

Cheers

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

[Abracadabra]

Hi Radu I see you have been able to get group members photos to show up correctly, thank you! is it possible to get the names centered as well?

Also, I wanted to ask, I know that you guys are coming out with new KLEO very soon and it will have login redirects, but I have a specific issue, which I am not sure if it will cover. Is the login fix related to the fact that once someone is logged in and they close the browser window and re-open it while still being logged in by the site, when they go to login again, it tells them they are already logged in and to refresh the page, and when they do that they stay on the same page? in result they dont know what to do to proceed to their profil home.

[Radu]

I see that the names are centered.( see screenshot )

Regarding the login, wait Kleo 3.0 and test after, it should to be fixed this “issue”.

Can i close the topic ?

Cheers

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

[Author]

Posts