You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

Administrator

1Tutorial New PhpBB 3 Memberlist on Fri Apr 06, 2012 8:58 pm

Nick 

avatar
Administrator
New PhpBB 3 Memberlist
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.
Provided by Forumotion Vietnam

View user profile http://www.supportcraze.com

View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum