Change memberlist apperance [phpBB3]

After this tutorial you will be able to change default preview of memberlist for your forum.

Default:


After change:


Steps to follow:

1. Admin Panel > Display > Templates > General > memberlist_body

Locate this:

Code:

   <table class="table1" cellspacing="1" id="memberlist">
   <thead>
   <tr>
      <th class="number">#</th>
      <th class="name">{L_AVATAR} - {L_USERNAME}</th>
      <!-- BEGIN switch_th_group -->
         <th class="group">{L_GROUPS}</th>
      <!-- END switch_th_group -->
      <!-- BEGIN switch_th_point -->
         <th class="point">{L_POINT}</th>
      <!-- END switch_th_point -->
      <th class="interests">{L_INTERESTS}</th>
      <th class="joined">{L_JOINED}</th>
      <th class="active">{L_VISITED}</th>
      <th class="posts">{L_POSTS}</th>
      <!-- BEGIN switch_th_pm -->
      <th class="pm">{L_PM}</th>
      <!-- END switch_th_pm -->
      <th class="website">{L_WEBSITE}</th>
   </tr>
   </thead>
   <tbody>
   <!-- BEGIN memberrow -->
   <tr class="{memberrow.ROW_CLASS}">
      <td>&nbsp;{memberrow.ROW_NUMBER}&nbsp;</td>
      <td class="avatar-mini"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}&nbsp;{memberrow.USERNAME}</a></td>
      <!-- BEGIN switch_td_group -->
         <td>{memberrow.GROUPS}</td>
      <!-- END switch_td_group -->
      <!-- BEGIN switch_td_point -->
         <td>{memberrow.POINTS}</td>
      <!-- END switch_td_point -->
      <td>{memberrow.INTERESTS}</td>
      <td>{memberrow.JOINED}</td>
      <td>{memberrow.LASTVISIT}</td>
      <td>{memberrow.POSTS}</td>
      <!-- BEGIN switch_td_pm -->
      <td>&nbsp;{memberrow.PM_IMG}&nbsp;</td>
      <!-- END switch_td_pm -->
      <td>&nbsp;{memberrow.WWW_IMG}&nbsp;</td>
   </tr>
   <!-- END memberrow -->
   <!-- BEGIN switch_no_user -->
   <tr class="row1">
      <td colspan="{switch_no_user.COLSPAN_NUMBER}">{switch_no_user.L_NO_USER}</td>
   </tr>
   <!-- END switch_no_user -->
   </tbody>
   </table>

And replace it with:

Code:

        <div class="member-list">
  <!-- BEGIN memberrow -->
  <div class="member-card">
    <div class="card-header">
      <a href="{memberrow.U_VIEWPROFILE}" class="avatarImg">{memberrow.AVATAR_IMG}</a>   
    </div>
    <div class="card-body">
      <h3 class="username"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></h3>
      <p class="joined">Joined: {memberrow.JOINED}</p>
      <p class="last-visit">Last Visit: {memberrow.LASTVISIT}</p>
      <p class="posts">Posts: {memberrow.POSTS}</p>
    </div>
    <div class="card-footer">
      <a href="{memberrow.PM_LINK}" class="pm-link">{memberrow.PM_IMG}</a>
      <a href="{memberrow.WWW_LINK}" class="website-link">{memberrow.WWW_IMG}</a>
    </div>
  </div>
  <!-- END memberrow -->
</div>

Save settings and publish template.

2. Admin Panel > Display > CSS

Paste at the end of your styles this code and click save:

Code:

.member-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.member-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  background: #f9f9f9 url(https://i.servimg.com/u/f62/14/65/46/14/statu10.png);   
  border-radius: 10px;
  padding: 15px;
  width: 300px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.member-card:hover {
  transform: translateY(-5px);
}

.card-header {
  display: flex;
  justify-content: center;
}

.card-header a img {
width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid #fff;
    outline: 1px solid #ccc;
    object-fit: cover;
}


.card-body {
  text-align: center;
  margin-top: 10px;
}

.card-body p {
    background: #fff;
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #cccccc;
}

.username {
    border-bottom: 1px solid #a0947e;
    margin-bottom: 10px;
}

.username a {
  font-size: 1.2em;
  color: #333;
  text-decoration: none;
}

.username a:hover {
  color: #007bff;
}

.card-footer {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

.card-footer a {
    margin-right: 2px;
}

.pm-link, .website-link {
  text-decoration: none;
  color: #007bff;
}

.pm-link:hover, .website-link:hover {
  text-decoration: underline;
}

For the moment this is only for phpBB3.

Please do not post links to your forum even previews.  Posting links to your forum is considered advertising.

Mmm it looks very modern... :O

Good job

I like the design, it's great. Well done.