Skip to:
Content
Pages
Categories
Search
Top
Bottom

Member Directory CSS for 3 Columns

  • Profile photo 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 8 replies - 1 through 8 (of 8 total)
  • Profile photo 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! :-)

    Profile photo of abray
    abray
    Participant

    @abray

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

    Profile photo of abray
    abray
    Participant

    @abray

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

    Profile photo of pcwriter
    pcwriter
    Participant

    @pcwriter

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

    Profile photo 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;
    }

    Profile photo of Prince Abiola Ogundipe
    Prince Abiola Ogundipe
    Participant

    @naijaping

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

    Regards

    Profile photo 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?

    Profile photo of John Hart
    John Hart
    Participant

    @struth

    Hi abray,

    including div#content in the css class did not work in my theme however…
    Try the below code, it works for me without upsetting widgets

    #members-dir-list.members.dir-list li {
        display:inline-block;
        width:28%;
        margin:6px;
    }

    – JH

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Member Directory CSS for 3 Columns’ is closed to new replies.
Skip to toolbar