Доработка модуля Top Members для JomSocial 4 - отображение пользователей колонками

Ниже приведено простое решение по корректировке модуля JS Top Members для JomSocial 4, который отображает лучших пользователей (их аватары, имена и карму/рейтинг на выбор).

По-умолчанию перечень пользователей выводятся списком, т.е. в одну колонку. Предлагается отобразить пользователей в несколько (три) колонок, а на мобильной версии (при малой ширине экрана) - в одну или две.



Достаточно отредактировать необходимый CSS-файл, добавив в него примерно следующее:

Код:

.js-top-users-custom{
padding: 6px;
width: 30%;
float: left;
list-style: none;
min-height: 78px;}

@media (max-width: 640px) {
.js-top-users-custom{
width: 40%;}
}

@media (max-width: 480px) {
.js-top-users-custom{
width: 98%;}
}

Например, можно откорректировать файл components/com_community/templates/jomsocial/scss/style.scss , после чего в настройках JomSocial > Theme Designer > Colors нажать кнопку Save и обновить кеш браузера.

Такой модуль можно добавить, например, на странице JomSocial "All Members" (Все пользователи / онлайн пользователи), чтобы выделить наиболее активных. Вот пример http://crimson-land.ru/dating