Hey guys so today I am going to show you how to change the stock table of members list to a different look and feel. This is completely custom and remember you can do whatever you'd like to this. This is just going to be a start and get you going, from here use your imagination and skills to make this the best you'd like it to be. 

This difficulty level is 3 of 5 stars.

Before:
[You must be registered and logged in to see this image.]

After:
[You must be registered and logged in to see this image.]

Ok so now let us get started on what we have to do. First we will go a head and start you off with your CSS that you will need. Copy it and paste it into your stylesheet.

  

Code:

.tableHold {overflow: auto; }

.tableHold div {
white-space:none;
float: left;
width: 180px;
height:350px;
border:1px solid #FFF;
}


Next we will need to do some editing in the templates. Go to DISPLAY>TEMPLATES>GENERAL>MEMBERLIST_BODY
Once you have that open we will need to locate some items. First search for this



Right before the php placeholder memberrow you will see something that looks like this:

[hc = PunBB]

Code:

<table class="table" cellspacing="0">
               <thead>
                  <tr>
                     <th class="tcl memberlist">{L_AVATAR} - {L_USERNAME}</th>
                     <!-- BEGIN switch_th_group -->
                     <th class="tc2">{L_GROUPS}</th>
                     <!-- END switch_th_group -->
                     <th class="tc3">{L_INTERESTS}</th>
                     <th class="tc2">{L_JOINED}</th>
                     <th class="tc2">{L_VISITED}</th>
                     <th class="tc3">{L_POSTS}</th>
                     <th class="tc3">{L_PM}</th>
                     <th class="tc3">{L_WEBSITE}</th>
                  </tr>
               </thead>

[/hc]
[hc = phpbb2]

Code:

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <th class="thCornerL" nowrap="nowrap" height="25">#</th>
      <th class="thTop" nowrap="nowrap">{L_AVATAR}</th>
      <th class="thTop" nowrap="nowrap">{L_USERNAME}</th>
      <!-- BEGIN switch_th_group -->
      <th class="thTop" nowrap="nowrap">{L_GROUPS}</th>
      <!-- END switch_th_group -->
      <th class="thTop" nowrap="nowrap">{L_INTERESTS}</th>
      <th class="thTop" nowrap="nowrap">{L_JOINED}</th>
      <th class="thTop" nowrap="nowrap">{L_VISITED}</th>
      <th class="thTop" nowrap="nowrap">{L_POSTS}</th>
      <th class="thTop" nowrap="nowrap">{L_PM}</th>
      <th class="thCornerR" nowrap="nowrap">{L_WEBSITE}</th>
  </tr>
  <!-- BEGIN memberrow -->

[/hc]

Replace with your corresponding forum versions:

[hc = punbb Replacement]

Code:

<table class="table" cellspacing="0">
     <thead>
       <tr>
     <th class="tcl memberlist" style="text-align:center;">EasyBB Members List</th>
        </tr>
     </thead>

[/hc]

[hc = phpbb2 Replacement]

Code:

<table width="100%" border="0" cellspacing="10" cellpadding="0">   
  <tr>
      <th align="center" height="25">Zombie Nerds MemberList</th>
  </tr>

[/hc]

Ok great! Now go look after the php placeholder memberrow and start editing that.

[hc = punbb Edit]
 

Code:

<tr>
      <td class="tcl avatar-mini">
         <a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}
          <span>{memberrow.USERNAME}</span>
          </a>
       </td>
                     <!-- BEGIN switch_td_group -->
                     <td class="tc2">{memberrow.GROUPS}</td>
                     <!-- END switch_td_group -->
                     <td class="tc3">{memberrow.INTERESTS}</td>
                     <td class="tc2">{memberrow.JOINED}</td>
                     <td class="tc2">{memberrow.LASTVISIT}</td>
                     <td class="tc3">{memberrow.POSTS}</td>
                     <td class="tc3">{memberrow.PM_IMG}</td>
                     <td class="tc4">{memberrow.WWW_IMG}</td>
                  </tr>
                  <!-- END memberrow -->

[/hc]
[hc = phpbb2 Edit]

Code:

<tr>
  <td class="{memberrow.ROW_CLASS}" align="center">
     <span class="gen"> {memberrow.ROW_NUMBER} </span>
   </td>
      <td class="{memberrow.ROW_CLASS}" align="center">
        <div class="avatar mini">
          <a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a>
        </div>
      </td>
      <td class="{memberrow.ROW_CLASS}" align="center">
        <span class="gen">
        <a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>
       </span>
     </td>
      <!-- BEGIN switch_td_group -->
      <td class="{memberrow.ROW_CLASS}" align="center">
        <span class="gen">{memberrow.GROUPS}</span>
       </td>
      <!-- END switch_td_group -->
      <td class="{memberrow.ROW_CLASS}" align="center" valign="middle">
        <span class="gen">{memberrow.INTERESTS}</span>
       </td>
      <td class="{memberrow.ROW_CLASS}" align="center" valign="middle">
        <span class="gensmall">{memberrow.JOINED}</span>
      </td>
      <td class="{memberrow.ROW_CLASS}" align="center" valign="middle">
        <span class="gensmall">{memberrow.LASTVISIT}</span>
      </td>
      <td class="{memberrow.ROW_CLASS}" align="center" valign="middle">
        <span class="gen">{memberrow.POSTS}</span>
      </td>
      <td class="{memberrow.ROW_CLASS}" align="center"> {memberrow.PM_IMG} </td>
      <td class="{memberrow.ROW_CLASS}" align="center"> {memberrow.WWW_IMG} </td>
  </tr>
  <!-- END memberrow -->

[/hc]

Replace with the corresponding forum version replacement:

[hc = punbb Replacement]

Code:

<!-- BEGIN memberrow -->
<td class="memberslist" style="float:left;margin-left:10px;margin-bottom:20px;padding:0;">   
<div class="tableHold">
<div>               
<a class="gen" href="{memberrow.U_VIEWPROFILE}">
<span>{memberrow.USERNAME}</span></a><br />
<span class="profileIMG">{memberrow.AVATAR_IMG}</span><br />
                     <!-- BEGIN switch_td_group -->
                     {memberrow.GROUPS}<br />
                     <!-- END switch_td_group -->
                     {memberrow.INTERESTS}<br />
                     {memberrow.JOINED}<br />
                     {memberrow.LASTVISIT}<br />
                     {memberrow.POSTS}<br />
                     {memberrow.PM_IMG}<br />
                     {memberrow.WWW_IMG}<br />
                  
<!-- END memberrow -->
</div>
</div>
</td>

[/hc]

[hc = phpBB2 Replacement]

Code:

<!-- BEGIN memberrow -->
 
    <td style="float:left;margin-left:10px;margin-bottom:20px;background:#000;">
  <div class="tableHold">
    <div> 
      <center><span class="gen"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></span></center>
      <br />
      <center><div class="avatar mini"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div></center>
      <br />
    <center><font face="verdana" decoration="yes" size="2" color="white">Information</font></center>
    <br />
      <center><font face="verdana" size="1" color="green">Interest</font> </center><br />
      <center><span class="gen">{memberrow.INTERESTS}</span>  </center>
    <br /><font face="verdana" size="1" color="green">Join Date:</font>    <br />
<span class="gensmall">{memberrow.JOINED}</span>
    <br /><font face="verdana" size="1" color="green">Last Visited:</font>     <br />
<span class="gensmall">{memberrow.LASTVISIT}</span>
    <br /><font face="verdana" size="1" color="green">Post Count:</font>    <br />
<span class="gen">{memberrow.POSTS}</span>
      <span class="gen"> {memberrow.L_Statut}</span>
  <center> <br /><font face="verdana" size="2" color="green">Contact</font><br /></center>
 {memberrow.PM_IMG} 
 {memberrow.WWW_IMG}&nbsp;
 
  </div>
          </div>
    </td>
  <!-- END memberrow -->

[/hc]


  And that should be it and you are finished. Go ahead and save that template, then add it to the modified templates. Once it is added check out your memberslist. This has been tested and will work if you did exactly as I told you to do. Once it looks the way you want you are set and can start modifying it some more. Our member list here actually gets rid of the tables completely and we use only divs.