Until the good people from RT adds masonry columns styles to blogs, groups and members pages (see *** THE PLEASE SIR MAY WE HAVE SOME MORE *** want list), I am happy to share with anybody my temporary 3 column solution for group directory page. I added a group “counter” that changes color based on how many people are in the group.
Best is to create a new php page in your inspirebook-childtheme//buddypress/groups/ directory called groups-loop.php and then paste this code from the attached file or just upload to that folder… You will then also in your inspirenook>>Settings>>Custom Codes>>Custom codes have to add the css attached below.
Anyway - hope it helps someone
groups-loop.zip (1.0 KB)
/******************* TEST NEW GROUPS ***************/
.column, .columns{float:left;min-height:1px;padding:0 0px;position:relative; overflow: hidden;}
.column.centered, .columns.centered{float:none;margin:0 auto;}
[class*="column"] + [class*="column"]:last-child{float:left;}
[class*="column"] + [class*="column"].end{float:left;}
.threex, .row .three{width:25%;}
.fourx, .row .three{width:32%;}
.five, .row .five{width:41.66667%;}
.six, .row .six{width:50%;}
.seven, .row .seven{width:58.33333%;}
.eight, .row .eight{width:66.66667%;}
.nine, .row .nine{width:75%;}
.ten, .row .ten{width:83.33333%;}
.eleven, .row .eleven{width:91.66667%;}
.twelve, .row .twelve{width:100%;}
.row .offset-by-one{margin-left:8.33333%;}
.row .offset-by-two{margin-left:16.66667%;}
.row .offset-by-three{margin-left:25%;}
.row .offset-by-four{margin-left:33.33333%;}
.row .offset-by-five{margin-left:41.66667%;}
.row .offset-by-six{margin-left:50%;}
.row .offset-by-seven{margin-left:58.33333%;}
.row .offset-by-eight{margin-left:66.66667%;}
.row .offset-by-nine{margin-left:75%;}
.row .offset-by-ten{margin-left:83.33333%;}
.push-two{left:16.66667%;}
.pull-two{right:16.66667%;}
.push-three{left:25%;}
.pull-three{right:25%;}
.push-four{left:33.33333%;}
.pull-four{right:33.33333%;}
.push-five{left:41.66667%;}
.pull-five{right:41.66667%;}
.push-six{left:50%;}
.pull-six{right:50%;}
.push-seven{left:58.33333%;}
.pull-seven{right:58.33333%;}
.push-eight{left:66.66667%;}
.pull-eight{right:66.66667%;}
.push-nine{left:75%;}
.pull-nine{right:75%;}
.push-ten{left:83.33333%;}
.pull-ten{right:83.33333%;}
#groups{}
#groups .meta{}
#groups .frame{}
#groups .meta-count{}
#groups .avatar{border-radius:50%;}
#groups .item-header-avatar{position:relative;max-width:180px;margin:0 auto;}
#groups .group-item{text-align:left;margin-bottom:30px;}
#groups .circular-item{position:absolute;left:-10px;top:-20px;width:66px;height:66px;display:inline-block;background:#fff;padding:3px;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;z-index:10;}
#groups .circular-item .icon{position:absolute;top:21px;left:11px;font-size:10px;}
#groups .circular-item input{position:absolute;top:12px;right:18px;}
.circular-item{position:relative;float:left;margin-top:10px;width:80px;height:80px;display:inline-block;padding:5px;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;z-index:10;}
.search-list{display:inline-block;width:100%;}
#groups-list .search-item p{margin-bottom:10px;}
.search-item {
border: 1px solid #e5e5e5;
list-style: none;
text-align: center;
margin-top: 70px;
height: 275px;
background-color: #f5f5f5;
border-radius: 7px;
margin-right: 5px;
margin-left: 5px;
}
.avatar-dir{width:94px;height:94px;overflow:hidden;position:relative;z-index:1;margin:-45px auto 25px;border:4px solid #fff;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-box-shadow:0 0 8px rgba(0, 0, 0, .8);-moz-box-shadow:0 0 8px rgba(0, 0, 0, .8);background-color: #fff;}
.search-item .avatar{width:94px;height:94px;overflow:hidden;position:relative;z-index:1;margin:-4px -4px;border:4px solid #fff;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-box-shadow:0 0 0 1px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 0 0 1px rgba(0, 0, 0, 0.2);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.2);}
.groupcount {
color: #fff;
list-style-type: none;
background-color: #8baa29;
border: 5px solid #fff;
/* -webkit-border-radius: 50em; */
-moz-border-radius: 50%;
border-radius: 50%;
display: inline;
text-align: center;
z-index: 45;
font-size: 12px;
font-weight: bold;
line-height: 27px;
width: 36px;
height: 24px;
padding: -5px;
text-align: center;
height: 36px;
position: absolute;
right: 125px;
top: 27px;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}