Skip to:
Content
Pages
Categories
Search
Top
Bottom

Does anybody know how they made this?

Viewing 8 replies - 1 through 8 (of 8 total)

  • modemlooper
    Moderator

    @modemlooper

    You can edit the HTML structure and CSS of the BuddyPress members directory page


    Roger Coathup
    Participant

    @rogercoathup

    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


    Amin
    Participant

    @aminima

    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


    enderandrew
    Member

    @enderandrew

    I really like the tile layout as well.


    Roger Coathup
    Participant

    @rogercoathup

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


    Roger Coathup
    Participant

    @rogercoathup

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


    Amin
    Participant

    @aminima

    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.


    chaoti
    Participant

    @chaoti

    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.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Does anybody know how they made this?’ is closed to new replies.
Skip to toolbar