Back To Top
Login
Register
Visit Us At TwitterVisit Us At YouTubeVisit Us At Facebook
KandiChat is in Beta Release. Try It Out
HomeHome  
  • UpdatesUpdates  
  • SearchSearch  
  • RegisterRegister  
  • Log inLog in  
  • November 2017
    MonTueWedThuFriSatSun
      12345
    6789101112
    13141516171819
    20212223242526
    27282930   

    Calendar Calendar

    Search
     
     

    Display results as :
     


    Rechercher Advanced Search

    Shopmotion


    Who is online?
    In total there is 1 user online :: 0 Registered, 0 Hidden and 1 Guest

    None

    Most users ever online was 22 on June 26th 2013, 6:10 am
    RSS feeds


    Poll
    Top posting users this week


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

    avatar

    New Memberlist

    Mr.EasyBB
    03/17/2013
    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.

    Share this post on: Excite BookmarksDiggRedditDel.icio.usGoogleLiveSlashdotNetscapeTechnoratiStumbleUponNewsvineFurlYahooSmarking

    avatar
    Nice!

    Thanks for sharing! It looks really nice! Wink

    Post on March 25th 2013, 6:39 am by koolkat96

    avatar
    Thanks KoolKat we are glad that you like it.

    Post on March 25th 2013, 1:32 pm by Mr.EasyBB

    avatar
    good

    Post on March 25th 2013, 6:49 pm by pesgold

    avatar
    thank you very much

    Post on May 15th 2013, 5:13 am by Argyris13

    avatar
    Liked
    No problem Argyris13 if you have any difficulties please let us know as we are here to help you always. 

    Post on May 15th 2013, 2:17 pm by Mr.EasyBB

    avatar
    How do you force all avatars to be one size so there aren't huge spaces without any user profiles in the member list if a particular user or users have a huge avatar?

    Post on May 18th 2013, 10:19 pm by Rukiafan

    avatar
    Well you do this-

    Code:
    .element{
    max-width:50px;
    max-height:50px;
    }

    Post on May 18th 2013, 10:38 pm by Mr.EasyBB

    avatar
    Thanks I'll try the code!

    Post on May 18th 2013, 10:56 pm by Rukiafan

    avatar
    I added it to my CSS and it didn't work. Neutral

    Post on May 18th 2013, 10:58 pm by Rukiafan

    avatar
    Well .element isn't the selector. Did you want it for this avatar? Find this - 

    {memberrow.AVATAR_IMG} 

    Then wrap it like so

    Code:
    <span class="ava_mem">{memberrow.AVATAR_IMG} </span>


    the give it a style

    Code:
    .ava_mem img{
    max-width:50px;
    max-height:50px;
    }

    Post on May 18th 2013, 11:42 pm by Mr.EasyBB

    avatar
    Uuhm..Thanks for the tutorial..

    Anyway,i'm Phpbb2.

    So,when i tried to replace the code of memberlist_body ,there are some information.The information saids:

    Error
    The tag has been closed before being opened or the tag hasn't been opened.

    Can you help me what is that means?

    Post on June 19th 2013, 11:25 am by Miiko

    Post  by Sponsored content

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