Change layout for the members page

[aatefsoliman]

Hi there,

 

I have a question regarding the layout of the members displayed under the members page, I thought it will be already documented here but can’t find it at all in the forum.

Currently the view of the members page is the default one like in the first attached image, however I would like to change it a little and found other layouts in the below link

http://seventhqueen.com/themes/kleo/buddypress-members/

I would like to use the default view however with displaying the avatar image with a bigger size same as the second attached image and underneath it the username, last activity, …

I suppose this would need a tweak in the buddypress.css in the child theme folder however I am not sure how to achieve that.

Can you please advise?

Best regards,

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

Just create a new page and using visual composer click on BuddyPress tab and play with the elements from that section :

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 ?

[Radu]

Hi,

Just create a new page and using visual composer click on BuddyPress tab and play with the elements from that section :

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 ?

[aatefsoliman]

I didn’t know that!

Thanks a lot

[aatefsoliman]

Hi,

I played around with the available options, they look really great however I am still missing something. members grid is matching the layout I would like to have however underneath each image of the members I want to display the user name and another field from the user profile.
Since in the page code it’s only the short code added I can’t do a lot, Can you please advise how to achieve that?

For the default members page with Buddypress I am able to play around in the members-loop page which is helping me to display specific fields and hide others, I am looking for the same with the ´members grid.

Thanks in advance

[Radu]

Hi,

In this directory, you will find the shortcodes from visual composer for BuddyPress : /wp-content/plugins/k-elements/shortcodes/templates/buddypress

If you will modify one of them, I recommend you to put it in child theme in this location

wp-content/themes/kleo-child/k_elements/

You should have child theme installed and activated

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 ?

[aatefsoliman]

Hi Radu,

Thanks for the update, I did some modifications which went quite well for the shortcodes using the suggested way and having the child theme active.

Unfortunately I came a cross another issue, when I am using search for members function it will always display the results in the members default page not the one I have created/customized. so I still have to do changes to be reflected in the default page.

I have only one thing now which I want to achieve, the attached image contains the members layout in the default page. I just want to display the avatar in a bigger size than this thumb one and I want this change to affect only the members page not the size of the avatar on the whole site. I saw that there is already buddypress.css in the Kleo theme folder so I did many changes trying to achieve that “not experienced in css” but always it’s displayed in the small size.

I tried as well some suggestions which I found for the avatar size like using the below in the members-loop page but it’s not changing the size at all.

bp_member_avatar(‘type=full&width=180&height=180’) instead of bp_member_avatar()

Looked as well on different topics raised here and some other links like https://codex.buddypress.org/themes/guides/customizing-buddypress-avatars/ but it’s not directed to change the size on the members page only.

Can you please guide me on how to do that?

Best regards,

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

The responsible file for member search and member directory it’s : /wp-content/themes/kleo/BuddyPress/members/index.php you should copy this file in child theme to can be updated proof in this path /wp-content/themes/kleo-child/buddypress/members/ and if you read the php file you will see what the loop stars it loads this template : which it’s located here : /wp-content/themes/kleo/buddypress/members/members-loop.php i recommend you the same to copy this file in child theme keeping same folder structure.

Inside members-loop.php you will see “> try to change the avatar function with yours tweaked…

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 ?

[aatefsoliman]

Hi,

I applied that and tried different options as the below

bp_member_avatar(‘type=full&width=30&height=30’)
bp_member_avatar(‘type=full&width=100&height=100’)
bp_member_avatar(‘type=full&width=300&height=300’)

The results are in the attached screenshot, it’s clear that the avatar is limited to be displayed in the circle even after choosing higher values for the width and the height for the avatar, so the question now is how to enlarge this circle “container” for the avatar?

BR,

Attachments:

You must be logged in to view attached files.

[Radu]

The avatar div container can be tweaked with this selector

COPY CODE

#buddypress #friend-list li div.item-avatar, #buddypress #member-list li div.item-avatar, #buddypress #members-list li div.item-avatar { width:120px !important; height:120px !important; }

Cheers
R.

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

What support service includes ? What not ?

[aatefsoliman]

Perfect, it’s looking much better now 🙂

Attachments:

You must be logged in to view attached files.

[Radu]

Great

Have a nice week

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 ?

[AzKai]

Is there no way to change the layout of the “Member” (not Members) page without coding in the .php file? (AKA Using the visual editor)

[Radu]

Hi,

That it’s not possible

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