Forum Versions: PhpBB 3 Only

Description: It will be a new PhpBB 3 memberlist. Click here to see how it looks.

Set up:

First of all, visit your CSS for the styling and add this:

Code:

.membox {
  float: left;
  padding: 5px;
  border: 1px solid #105289;
  background: #e1ebf2;
  margin: 10px;
  height: 115px;
  width: 165px;
  border-radius: 3px;
  box-shadow: 2px 2px 2px #105289;
}
.membox:hover {  border: 1px solid #c05; }
.membox .showinfo>a img {
  display: block;
  height: 90px;
  width: 90px;
}
.membox .showinfo td {  float: right; }
.membox .showinfo a {  font-weight: bold;  font-size: 11px;}
#memberlist { padding: 15px 5px; margin-bottom: 30px; }
#memberlist .row1, #memberlist .row2, #memberlist tbody, #memberlist thead {display:none}
.memopt {  display: block; }
.memopthead {  text-decoration: underline;  display: block; }
.meminner {
  position: absolute;
  z-index: 999;
  border: 1px solid #c05;
  background: #e1ebf2;
  box-shadow: 2px 2px 2px #666;
  border-radius: 3px;
  padding: 5px;
  width: 120px;
  margin-left: 15px;
}

This is the exact same styling used on the memberlist in the demo. Edit it how you please, however a few things in there could completely mess up your display, so your better just to mess with the colors really.

Next go to any Javascript which you have in All Pages. (if you don't have any, create a new one)
And then add this to it:

Code:

function sortMemlist() {
  var x=document.getElementById('memberlist'),
        y=x.getElementsByTagName('tr'),
        headers=y[0].getElementsByTagName('th'); 
  for(i=1;i<y.length;i++) {="" var="" outer="document.createElement('div');" outer.classname="membox" ;="" td="y[i].getElementsByTagName('td');" outer.innerhtml+="<div onmouseover=\" $('#meminfo"+i+"').show();\"="" onmouseout="\"$('#meminfo"+i+"').hide();\"" class="\"showinfo\"">"+ td[1].innerHTML+ "

"; var inner=document.createElement('div'); inner.className="meminner"; inner.id="meminfo"+i; inner.style.display="none"; for(j=3;j"; } inner.innerHTML+=""+td[j].innerHTML+" "; } outer.appendChild(inner); x.appendChild(outer); $($('.showinfo')[i-1]).append(td[td.length-2]).append(td[td.length-1]); } } That is the function which will loop through all the rows in the memberlist, each time creating the nice little box.

Now to call that function at the right time. Visit your Javascript and take a look at them.
If you have a Javascript that it set for 'All Pages' and you can see this line in there: $(function(){

Then what you need to do is add this underneath it:

Code:

if(document.getElementById('memberlist')){sortMemlist();}

If you can't find that line, then add to your Javascript file this:

Code:

$(function(){if(document.getElementById('memberlist')){sortMemlist();}});

And you should be done.