You can edit the HTML structure and CSS of the BuddyPress members directory page
Hi there –
really pleased you like the way we layed out the members directory on Stuconnect.
We’ve experimented with a few different directory setups – the row of ’tiles’ being one of our favourites. We’ve used a similar approach on http://www.enterprisenation.com/members , and on our latest BuddyPress based site: http://www.worshipministry.com/members
The standard layout in bp-default is not very space efficient. The ’tile’ approach allows us to show more members in the same screen real estate, as well (in our opinion) as looking cleaner and more aesthetically pleasing.
It’s a combination of work on two template files in the theme: /members/index.php and /members/members-loop.php . In our sites, we tend to rework all of the theme from scratch, but do stick with a similar folder-file structure as bp-default – as well as re-using some of the basic PHP loop structures.
The clever work on the http://stuconnect.co.uk/members/ page is in creating the filter by University on the directory – we grab the name of the University from the query vars, and then do a little pre-filtering of the user IDs before passing them into the member loop (some restrictions on the BuddyPress loop filtering prevent us doing this in one step).
Best regards, Roger. http://21inspired.com
Thank you Roger.
I cannot make something like your University Filter. but I really love it. we have a social network of medical students in my country, and it could be very nice to have something like your University filter. unfortunately, I’m not able to do it.
could you please upload /members/index.php and /members/members-loop.php + related CSS codes in a zip file? or you could email them to me?
@rogercoathup
I really like the tile layout as well.
@aminima – we undertake that sort of complex development work on a commercial basis, almost invariably as part of full site builds. We contribute on the forums to give general advice and guidance, and sometimes to give short outline code snippets and pointers, but not to provide fully coded components.
If you need a developer to help build custom features for your site, we’d be happy to provide a quote, or you should be able to find other good BuddyPress developers who are available to take on freelance contracts.
@enderandrew – yes – there are quite a few sites now going with the tiled approach, e.g. the ‘new’ look Facebook friends page tiles 3 per row, and linkedIn has some tiled directories (with the profile tiles having a business card type feel). You’ll also find lots of smaller community / event site examples.
As HTML5 / CSS3 transitions become more prevalent, I expect to see more and more nice hover effects on the tiles – e.g. opening up in place to reveal more details about the member along with the ‘friend’ and ‘send message’ buttons. Andy Clarke’s “Hardboiled Web Design” book has some interesting examples of the type of effects that can be achieved, and the zurb playground is worth a look.
unfortunately we don’t have access to international payment methods in Iran, such as paypal etc, indead if I had a paypal account I would definitely pay for something like this.
May be you can do something with this plugin?
https://wordpress.org/extend/plugins/author-avatars/
It works for us with WP 3.4 and BP 1.6.
