Skip to:
Content
Pages
Categories
Search
Top
Bottom

Member Directory CSS for 3 Columns


  • abray
    Participant

    @abray

    13 years, 5 months ago

    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)

  • pcwriter
    Participant

    @pcwriter

    13 years, 5 months ago

    @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! :-)


    abray
    Participant

    @abray

    13 years, 5 months ago

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


    abray
    Participant

    @abray

    13 years, 5 months ago

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


    pcwriter
    Participant

    @pcwriter

    13 years, 5 months ago

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


    abray
    Participant

    @abray

    12 years, 5 months ago

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


    Prince Abiola Ogundipe
    Participant

    @naijaping

    12 years, 5 months ago

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

    Regards


    abray
    Participant

    @abray

    12 years, 5 months ago

    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?


    struth
    Participant

    @struth

    10 years ago

    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.

Topic Info

Topic Tags

Skip to toolbar