Displaying users as 2 columns in members list

Notice

The forum is in read only mode.

Support Forum

Welcome! Support Forums have been reactivated

Welcome the Technical Support section. Help us in assisting you by providing us with a concise and descriptive elaboration of your issues. Be specific and if possible, provide us with a step-by-step instruction in replicating your problem.

Displaying users as 2 columns in members list

10 years 2 months ago

#71422

Topic Author
Andrea
Offline
Fresh Boarder
Posts: 18
Thank you received: 0

Licenses:

JomSocial Active

Hi,

I was wondering whether it would be possible to have the list of members in 2 columns on the members page of my site.

Thanks,
Andrea

10 years 2 months ago

#71423

Albertus
Offline
User is blocked
Posts: 3296
Thank you received: 2582

Licenses:

Hi Andrea,

For make 2 columns, pls follow this step:
1. edit your css file: /templates/rt_paradigm/css/rt_paradigm-custom.css
2. put this css code at the bottom of page:

#community-wrap .cIndexList > li {
  width: 48%;
}

I hope this can work. if not you can provide me the FTP access detail (by editing this Post).

Cheers,
Albert

10 years 2 months ago

#71425

Michał
Offline
Moderator
Posts: 13447
Thank you received: 3689

Licenses:

Hi, Andrea.

You can achieve it in two ways:

1. Try CSS3 feature

#community-wrap .forFriendsList {
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;}

2. Or you'll modify loop in ROOT/components/com_community/template/default/people.browse.php in line 173. You'll need to use php iteration and conditions to close desired number of results in div with float. So you'll be able to create to separated columns.

Using this method remember to prepare safe copy first and then use Joomla! template override feature.

- Instead of saying: 'it's not working', explain the problem in detail.
- Screenshots with the URL visible in them and the problem marked are more than welcome.
- Tell us how to replicate the problem, we can't fix it if we can't find it.
- Make sure that your site/server meets JomSocial System Requirements
- Make sure to setup JomSocial Cron Job
- Always provide us with access details to the backend and ftp. We need it to debug problems.
- If you have a similar problem, but a solution you found isn't working, open a new thread instead of 'merging' with an existing one.

- Use the "Thank You" feature on any post that helped you

10 years 2 months ago

#71429

Topic Author
Andrea
Offline
Fresh Boarder
Posts: 18
Thank you received: 0

Licenses:

JomSocial Active

Hi,

I have tried both of your styling methods but when the window is resized, all of the text looks squashed. It would be great if I could get this fixed.

Many thanks,
Andrea

10 years 2 months ago

#71430

Michał
Offline
Moderator
Posts: 13447
Thank you received: 3689

Licenses:

Hi, Andrea.

Then you'll need to use method no. 2 - modify php loop.
It's not easy to do so I recommend to ask developer for help: www.jomsocial.com/jomsocial-developers

10 years 2 months ago

#71500

Albertus
Offline
User is blocked
Posts: 3296
Thank you received: 2582

Licenses:

Hi Andrea,

I just changed the css:

@media (min-width: 800px) {

    #community-wrap .forFriendsList {
        -moz-column-count: 2;
        -moz-column-gap: 10px;
        -webkit-column-count: 2;
        -webkit-column-gap: 10px;
        column-count: 2;
        column-gap: 10px;
    }

}

@media is for make condition at responsive template. for reference: developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

you can changing the width value. in what size will be 2 columns. in this case i made if screen/window size >= 800 pixel

Cheers,
Albert

The following user(s) said Thank You: Andrea

Moderators: Piotr Garasiński

Notice

Support Forum

Displaying users as 2 columns in members list

Licenses:

Licenses:

Licenses:

Licenses:

Licenses:

Licenses:

Join 180,000 websites creating Amazing communities

About Us

Our product

Support

Contact Us

Site Policies

Elsewhere