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

Attachments:

You must be logged in to view attached files.

[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

What support service includes ? What not ?

Attachments:

You must be logged in to view attached files.

[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.

Attachments:

You must be logged in to view attached files.

[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

What support service includes ? What not ?

Attachments:

You must be logged in to view attached files.

[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

What support service includes ? What not ?

[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.

Attachments:

You must be logged in to view attached files.

[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

What support service includes ? What not ?

[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.

Attachments:

You must be logged in to view attached files.

[Abracadabra]

This reply has been set as private.

[Abracadabra]

This reply has been set as private.

[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

What support service includes ? What not ?

[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

What support service includes ? What not ?

[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

What support service includes ? What not ?

[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

What support service includes ? What not ?

[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

What support service includes ? What not ?

[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 reply has been set as private.

[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]

This reply has been set as private.

[Abracadabra]

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

[Abracadabra]

This reply has been set as private.

[Abracadabra]

This reply has been set as private.

[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

What support service includes ? What not ?

[Abracadabra]

This reply has been set as private.

[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

What support service includes ? What not ?

[Abracadabra]

This reply has been set as private.

[Abracadabra]

This reply has been set as private.

[Radu]

This reply has been set as private.

[Abracadabra]

This reply has been set as private.

[Radu]

This reply has been set as private.

[Abracadabra]

This reply has been set as private.

[Radu]

This reply has been set as private.

[Author]

Posts