Skip to:
Content
Pages
Categories
Search
Top
Bottom

Member Directory CSS for 3 Columns

  • Avatar of abray
    abray
    Participant

    @abray

    I would like to showcase the members possible in 3 columns instead of one. Has anyone tried this? Can someone help me with CSS for 3 column Member Directory? Thanks in advance.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Avatar of pcwriter
    pcwriter
    Participant

    @pcwriter

    @abray

    You can create a grid effect for lists by applying a display property to each list item and adjusting width and margins to suit the available space. For a 3-column members directory, try this:

    ul#members-list li {
    display:inline-block;
    width:30%;
    margin:6px;
    }

    After that, it’s a matter of playing with the CSS for the various elements contained within each list item to get it to look just right. Have fun! :-)

    Avatar of abray
    abray
    Participant

    @abray

    thank, gonna try it now and i’ll let you know.

    Avatar of abray
    abray
    Participant

    @abray

    it worked… yes, I do need to tweek it! You are a genius! thank you!

    Avatar of pcwriter
    pcwriter
    Participant

    @pcwriter

    You’re welcome!
    Genius… no. Experimenter… yes. :-)

    Avatar of abray
    abray
    Participant

    @abray

    After almost a year, I am finally getting an actual social network built. But when using the code provided to make a three column member page – it’s also changing the CSS to the Member & Group widgets which I do not want. Their layout is just fine.

    How can I apply this CSS so that it is only on say the Member or the Group page only and doesn’t effect the Member or Group Widget? Thank you in advance for you help. :)

    MEMBER CODE

    ul#members-list li {
    display:inline-block;
    width:30%;
    margin:6px;
    }

    GROUP CODE

    ul#groups-list li {
    display:inline-block;
    width:30%;
    margin:6px;
    }

    @abray, you have to include div#content in the css, that way, it will not affect widget

    Regards

    Avatar of abray
    abray
    Participant

    @abray

    Thank you. I am a novice at this @naijaping. Would you happen to know how I would do this or is it theme specific or do I change it in the Buddypress system itself?

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

You must be logged in to reply to this topic.