We're going to stylize the member list outdated template with a modern style using CSS styles to rid the old table as well as making it mobile friendly. I removed some functionality that I always thought it was unnessessary. For example, the old AOL and ICQ icons are gone, who still uses them? I only left the email and website functions with new icons from FontAwesome. The top pagination tabs also gone but leaving the bottom intact so its less intrusive.

Let's have a look on how cool the memberlist template can be...





1. Let's install the Responsive Curve mod to add responsiveness to your forum. If you already have, skip this part.
Responsive Curve (if you use a responsive theme, you don't need to upload this mod)

2. To show members with no avatars, we need to assign a default avatar found here...
Default Avatar

3. Open your theme's index.template php and find:

Code Select Expand

// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'];

echo '
Add after:

Code Select Expand

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous" />
4. Open your theme's Memberlist.template.php and find:

Code Select Expand

// Displays a sortable listing of all members registered on the forum.
function template_main()
{
global $context, $settings, $options, $scripturl, $txt;

// Build the memberlist button array.
$memberlist_buttons = array(
'view_all_members' => array('text' => 'view_all_members', 'image' => 'mlist.gif', 'lang' => true, 'url' => $scripturl . '?action=mlist' . ';sa=all', 'active'=> true),
'mlist_search' => array('text' => 'mlist_search', 'image' => 'mlist.gif', 'lang' => true, 'url' => $scripturl . '?action=mlist' . ';sa=search'),
);

echo '
<div class="main_section" id="memberlist">
<div class="cat_bar">
<h4 class="catbg">
<span class="floatleft">', $txt['members_list'], '</span>';
if (!isset($context['old_search']))
echo '
<span class="floatright">', $context['letter_links'], '</span>';
echo '
</h4>
</div>
<div class="pagesection">
', template_button_strip($memberlist_buttons, 'right'), '
<div class="pagelinks floatleft">', $txt['pages'], ': ', $context['page_index'], '</div>
</div>';

echo '
<div id="mlist" class="tborder topic_table">
<table class="table_grid" cellspacing="0" width="100%">
<thead>
<tr class="catbg">';

// Display each of the column headers of the table.
foreach ($context['columns'] as $column)
{
// We're not able (through the template) to sort the search results right now...
if (isset($context['old_search']))
echo '
<th scope="col" class="', isset($column['class']) ? ' ' . $column['class'] : '', '"', isset($column['width']) ? ' width="' . $column['width'] . '"' : '', isset($column['colspan']) ? ' colspan="' . $column['colspan'] . '"' : '', '>
', $column['label'], '</th>';
// This is a selected column, so underline it or some such.
elseif ($column['selected'])
echo '
<th scope="col" class="', isset($column['class']) ? ' ' . $column['class'] : '', '" style="width: auto;"' . (isset($column['colspan']) ? ' colspan="' . $column['colspan'] . '"' : '') . ' nowrap="nowrap">
<a href="' . $column['href'] . '" rel="nofollow">' . $column['label'] . ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" /></a></th>';
// This is just some column... show the link and be done with it.
else
echo '
<th scope="col" class="', isset($column['class']) ? ' ' . $column['class'] : '', '"', isset($column['width']) ? ' width="' . $column['width'] . '"' : '', isset($column['colspan']) ? ' colspan="' . $column['colspan'] . '"' : '', '>
', $column['link'], '</th>';
}
echo '
</tr>
</thead>
<tbody>';

// Assuming there are members loop through each one displaying their data.
if (!empty($context['members']))
{
foreach ($context['members'] as $member)
{
echo '
<tr ', empty($member['sort_letter']) ? '' : ' id="letter' . $member['sort_letter'] . '"', '>
<td class="windowbg2">
', $context['can_send_pm'] ? '<a href="' . $member['online']['href'] . '" title="' . $member['online']['text'] . '">' : '', $settings['use_image_buttons'] ? '<img src="' . $member['online']['image_href'] . '" alt="' . $member['online']['text'] . '" align="middle" />' : $member['online']['label'], $context['can_send_pm'] ? '</a>' : '', '
</td>
<td class="windowbg lefttext">', $member['link'], '</td>
<td class="windowbg2">', $member['show_email'] == 'no' ? '' : '<a href="' . $scripturl . '?action=emailuser;sa=email;uid=' . $member['id'] . '" rel="nofollow"><img src="' . $settings['images_url'] . '/email_sm.gif" alt="' . $txt['email'] . '" title="' . $txt['email'] . ' ' . $member['name'] . '" /></a>', '</td>';

if (!isset($context['disabled_fields']['website']))
echo '
<td class="windowbg">', $member['website']['url'] != '' ? '<a href="' . $member['website']['url'] . '" target="_blank" class="new_win"><img src="' . $settings['images_url'] . '/www.gif" alt="' . $member['website']['title'] . '" title="' . $member['website']['title'] . '" /></a>' : '', '</td>';

// ICQ?
if (!isset($context['disabled_fields']['icq']))
echo '
<td class="windowbg2">', $member['icq']['link'], '</td>';

// AIM?
if (!isset($context['disabled_fields']['aim']))
echo '
<td class="windowbg2">', $member['aim']['link'], '</td>';

// YIM?
if (!isset($context['disabled_fields']['yim']))
echo '
<td class="windowbg2">', $member['yim']['link'], '</td>';

// MSN?
if (!isset($context['disabled_fields']['msn']))
echo '
<td class="windowbg2">', $member['msn']['link'], '</td>';

// Group and date.
echo '
<td class="windowbg lefttext">', empty($member['group']) ? $member['post_group'] : $member['group'], '</td>
<td class="windowbg lefttext">', $member['registered_date'], '</td>';

if (!isset($context['disabled_fields']['posts']))
{
echo '
<td class="windowbg2" style="white-space: nowrap" width="15">', $member['posts'], '</td>
<td class="windowbg statsbar" width="120">';

if (!empty($member['post_percent']))
echo '
<div class="bar" style="width: ', $member['post_percent'] + 4, 'px;">
<div style="width: ', $member['post_percent'], 'px;"></div>
</div>';

echo '
</td>';
}

echo '
</tr>';
}
}
// No members?
else
echo '
<tr>
<td colspan="', $context['colspan'], '" class="windowbg">', $txt['search_no_results'], '</td>
</tr>';

// Show the page numbers again. (makes 'em easier to find!)
echo '
</tbody>
</table>
</div>';

echo '
<div class="pagesection">
<div class="pagelinks floatleft">', $txt['pages'], ': ', $context['page_index'], '</div>';

// If it is displaying the result of a search show a "search again" link to edit their criteria.
if (isset($context['old_search']))
echo '
<div class="floatright">
<a href="', $scripturl, '?action=mlist;sa=search;search=', $context['old_search_value'], '">', $txt['mlist_search_again'], '</a>
</div>';
echo '
</div>
</div>';

}
Replace with:

Code Select Expand

// Displays a sortable listing of all members registered on the forum.
function template_main()
{
    global $context, $settings, $options, $scripturl, $txt;

    // Build the memberlist button array.
    $memberlist_buttons = array(
            'view_all_members' => array('text' => 'view_all_members', 'image' => 'mlist.gif', 'lang' => true, 'url' => $scripturl . '?action=mlist' . ';sa=all', 'active'=> true),
            'mlist_search' => array('text' => 'mlist_search', 'image' => 'mlist.gif', 'lang' => true, 'url' => $scripturl . '?action=mlist' . ';sa=search'),
        );

    echo '
    <div class="main_section" id="memberlist">
        <div class="cat_bar">
            <h4 class="catbg">
                <span class="floatleft">', $txt['members_list'], '</span>';
        if (!isset($context['old_search']))
                echo '
                <span class="floatright">', $context['letter_links'], '</span>';
        echo '
            </h4>
        </div>';



    // Assuming there are members loop through each one displaying their data.
    if (!empty($context['members']))
    {
        foreach ($context['members'] as $member)
        {
            echo '
                <div class="memberlist-card">
                        <div class="memberlist-profile">
                          <div class="profile-image">', $member['avatar']['image'], '</div>
                            <div class="profile-caption">
                      <h3>', $member['link'], '</h3>
                      <h5>', empty($member['group']) ? $member['post_group'] : $member['group'], '</h5>
                      <h6>',$txt['date_registered'],': ', $member['registered_date'], '</h6>
                      <h6>',$txt['posts'],': ', $member['posts'], '</h6>
                            <br/>
                     <div class="profile-icons">
              ', $member['show_email'] == 'no' ? '' : '<a href="' . $scripturl . '?action=emailuser;sa=email;uid=' . $member['id'] . '" rel="nofollow"><i class="fas fa-envelope" alt="' . $txt['email'] . '" title="' . $txt['email'] . ' ' . $member['name'] . '" /></i>', '</a>
              ', $member['website']['url'] != '' ? '<a href="' . $member['website']['url'] . '" target="_blank" class="new_win"><i class="fas fa-globe" alt="' . $member['website']['title'] . '" title="' . $member['website']['title'] . '" /></i>' : '', '</a>
                     </div>
                    </div>
                </div>
        </div>';
        }
    }

    echo '
        <div class="pagesection">
            <div class="pagelinks floatleft">', $txt['pages'], ': ', $context['page_index'], '</div>';

    // If it is displaying the result of a search show a "search again" link to edit their criteria.
    if (isset($context['old_search']))
        echo '
            <div class="floatright">
                <a href="', $scripturl, '?action=mlist;sa=search;search=', $context['old_search_value'], '">', $txt['mlist_search_again'], '</a>
            </div>';
    echo '
        </div>
    </div>';

}

5. Open your theme's index.css file and at the very end add:

Code Select Expand

.memberlist-card {
  display: inline-block;
  width: 225px;
}

.memberlist-profile {
  margin: 10px;
  text-align: center;
  background: transparent;
  text-decoration: none;
  color: #414a51;
  padding: 1em;
  border: 1px solid #eaeaea;
}

.memberlist-profile .profile-image {
  padding: 5% 5% 0;
}

.memberlist-profile .profile-image img {
  position: relative;
  border-radius: 50%;
  width: 70px;
}

.memberlist-profile profile-caption {
  padding: 5% 10% 15%;
}

.memberlist-profile h3 {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  margin: 3px 0;
}

.memberlist-profile h5 {
  font-weight: 400;
  margin: 0;
  text-transform: uppercase;
  color: #888;
  letter-spacing: 1px;
}

.memberlist-profile h6 {
  font-weight: 200;
  font-size: 10px;
  margin: 0;
  text-transform: uppercase;
  color: #888;
  letter-spacing: 1px;
}

.memberlist-profile .profile-icons i {
  color: #999;
  display: inline-block;
  margin-right: 5px;
  font-size: 1.5em; 
}

.memberlist-profile .profile-icons i:hover {
  color: #555;
}

.memberlist-profile .profile-icons i a {
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  /* start of medium tablet styles */
.memberlist-card {
display: block;
                width: 100%;
}
}

6. Set the memberlist count to 12 ,18 or 24 for better results in:
Admin--> Features and Options--> Layout--> Members per page in member list

Note that if you use mods that altered the memberlist template, there is a chance you might have to add them edits manually

[1.]

We're going to stylize the member list outdated template with a modern style using CSS styles to rid the old table as well as making it mobile friendly. I removed some functionality that I always thought it was unnessessary. For example, the old AOL and ICQ icons are gone, who still uses them? I only left the email and website functions with new icons from FontAwesome. The top pagination tabs also gone but leaving the bottom intact so its less intrusive.

Let's have a look on how cool the memberlist template can be...





1. Let's install the Responsive Curve mod to add responsiveness to your forum. If you already have, skip this part.
Responsive Curve (if you use a responsive theme, you don't need to upload this mod)

2. To show members with no avatars, we need to assign a default avatar found here...
Default Avatar

3. Open your theme's index.template php and find:

Code Select Expand

// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'];

echo '
Add after:

Code Select Expand

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous" />
4. Open your theme's Memberlist.template.php and find:

Code Select Expand

// Displays a sortable listing of all members registered on the forum.
function template_main()
{
global $context, $settings, $options, $scripturl, $txt;

// Build the memberlist button array.
$memberlist_buttons = array(
'view_all_members' => array('text' => 'view_all_members', 'image' => 'mlist.gif', 'lang' => true, 'url' => $scripturl . '?action=mlist' . ';sa=all', 'active'=> true),
'mlist_search' => array('text' => 'mlist_search', 'image' => 'mlist.gif', 'lang' => true, 'url' => $scripturl . '?action=mlist' . ';sa=search'),
);

echo '
<div class="main_section" id="memberlist">
<div class="cat_bar">
<h4 class="catbg">
<span class="floatleft">', $txt['members_list'], '</span>';
if (!isset($context['old_search']))
echo '
<span class="floatright">', $context['letter_links'], '</span>';
echo '
</h4>
</div>
<div class="pagesection">
', template_button_strip($memberlist_buttons, 'right'), '
<div class="pagelinks floatleft">', $txt['pages'], ': ', $context['page_index'], '</div>
</div>';

echo '
<div id="mlist" class="tborder topic_table">
<table class="table_grid" cellspacing="0" width="100%">
<thead>
<tr class="catbg">';

// Display each of the column headers of the table.
foreach ($context['columns'] as $column)
{
// We're not able (through the template) to sort the search results right now...
if (isset($context['old_search']))
echo '
<th scope="col" class="', isset($column['class']) ? ' ' . $column['class'] : '', '"', isset($column['width']) ? ' width="' . $column['width'] . '"' : '', isset($column['colspan']) ? ' colspan="' . $column['colspan'] . '"' : '', '>
', $column['label'], '</th>';
// This is a selected column, so underline it or some such.
elseif ($column['selected'])
echo '
<th scope="col" class="', isset($column['class']) ? ' ' . $column['class'] : '', '" style="width: auto;"' . (isset($column['colspan']) ? ' colspan="' . $column['colspan'] . '"' : '') . ' nowrap="nowrap">
<a href="' . $column['href'] . '" rel="nofollow">' . $column['label'] . ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" /></a></th>';
// This is just some column... show the link and be done with it.
else
echo '
<th scope="col" class="', isset($column['class']) ? ' ' . $column['class'] : '', '"', isset($column['width']) ? ' width="' . $column['width'] . '"' : '', isset($column['colspan']) ? ' colspan="' . $column['colspan'] . '"' : '', '>
', $column['link'], '</th>';
}
echo '
</tr>
</thead>
<tbody>';

// Assuming there are members loop through each one displaying their data.
if (!empty($context['members']))
{
foreach ($context['members'] as $member)
{
echo '
<tr ', empty($member['sort_letter']) ? '' : ' id="letter' . $member['sort_letter'] . '"', '>
<td class="windowbg2">
', $context['can_send_pm'] ? '<a href="' . $member['online']['href'] . '" title="' . $member['online']['text'] . '">' : '', $settings['use_image_buttons'] ? '<img src="' . $member['online']['image_href'] . '" alt="' . $member['online']['text'] . '" align="middle" />' : $member['online']['label'], $context['can_send_pm'] ? '</a>' : '', '
</td>
<td class="windowbg lefttext">', $member['link'], '</td>
<td class="windowbg2">', $member['show_email'] == 'no' ? '' : '<a href="' . $scripturl . '?action=emailuser;sa=email;uid=' . $member['id'] . '" rel="nofollow"><img src="' . $settings['images_url'] . '/email_sm.gif" alt="' . $txt['email'] . '" title="' . $txt['email'] . ' ' . $member['name'] . '" /></a>', '</td>';

if (!isset($context['disabled_fields']['website']))
echo '
<td class="windowbg">', $member['website']['url'] != '' ? '<a href="' . $member['website']['url'] . '" target="_blank" class="new_win"><img src="' . $settings['images_url'] . '/www.gif" alt="' . $member['website']['title'] . '" title="' . $member['website']['title'] . '" /></a>' : '', '</td>';

// ICQ?
if (!isset($context['disabled_fields']['icq']))
echo '
<td class="windowbg2">', $member['icq']['link'], '</td>';

// AIM?
if (!isset($context['disabled_fields']['aim']))
echo '
<td class="windowbg2">', $member['aim']['link'], '</td>';

// YIM?
if (!isset($context['disabled_fields']['yim']))
echo '
<td class="windowbg2">', $member['yim']['link'], '</td>';

// MSN?
if (!isset($context['disabled_fields']['msn']))
echo '
<td class="windowbg2">', $member['msn']['link'], '</td>';

// Group and date.
echo '
<td class="windowbg lefttext">', empty($member['group']) ? $member['post_group'] : $member['group'], '</td>
<td class="windowbg lefttext">', $member['registered_date'], '</td>';

if (!isset($context['disabled_fields']['posts']))
{
echo '
<td class="windowbg2" style="white-space: nowrap" width="15">', $member['posts'], '</td>
<td class="windowbg statsbar" width="120">';

if (!empty($member['post_percent']))
echo '
<div class="bar" style="width: ', $member['post_percent'] + 4, 'px;">
<div style="width: ', $member['post_percent'], 'px;"></div>
</div>';

echo '
</td>';
}

echo '
</tr>';
}
}
// No members?
else
echo '
<tr>
<td colspan="', $context['colspan'], '" class="windowbg">', $txt['search_no_results'], '</td>
</tr>';

// Show the page numbers again. (makes 'em easier to find!)
echo '
</tbody>
</table>
</div>';

echo '
<div class="pagesection">
<div class="pagelinks floatleft">', $txt['pages'], ': ', $context['page_index'], '</div>';

// If it is displaying the result of a search show a "search again" link to edit their criteria.
if (isset($context['old_search']))
echo '
<div class="floatright">
<a href="', $scripturl, '?action=mlist;sa=search;search=', $context['old_search_value'], '">', $txt['mlist_search_again'], '</a>
</div>';
echo '
</div>
</div>';

}
Replace with:

Code Select Expand

// Displays a sortable listing of all members registered on the forum.
function template_main()
{
    global $context, $settings, $options, $scripturl, $txt;

    // Build the memberlist button array.
    $memberlist_buttons = array(
            'view_all_members' => array('text' => 'view_all_members', 'image' => 'mlist.gif', 'lang' => true, 'url' => $scripturl . '?action=mlist' . ';sa=all', 'active'=> true),
            'mlist_search' => array('text' => 'mlist_search', 'image' => 'mlist.gif', 'lang' => true, 'url' => $scripturl . '?action=mlist' . ';sa=search'),
        );

    echo '
    <div class="main_section" id="memberlist">
        <div class="cat_bar">
            <h4 class="catbg">
                <span class="floatleft">', $txt['members_list'], '</span>';
        if (!isset($context['old_search']))
                echo '
                <span class="floatright">', $context['letter_links'], '</span>';
        echo '
            </h4>
        </div>';



    // Assuming there are members loop through each one displaying their data.
    if (!empty($context['members']))
    {
        foreach ($context['members'] as $member)
        {
            echo '
                <div class="memberlist-card">
                        <div class="memberlist-profile">
                          <div class="profile-image">', $member['avatar']['image'], '</div>
                            <div class="profile-caption">
                      <h3>', $member['link'], '</h3>
                      <h5>', empty($member['group']) ? $member['post_group'] : $member['group'], '</h5>
                      <h6>',$txt['date_registered'],': ', $member['registered_date'], '</h6>
                      <h6>',$txt['posts'],': ', $member['posts'], '</h6>
                            <br/>
                     <div class="profile-icons">
              ', $member['show_email'] == 'no' ? '' : '<a href="' . $scripturl . '?action=emailuser;sa=email;uid=' . $member['id'] . '" rel="nofollow"><i class="fas fa-envelope" alt="' . $txt['email'] . '" title="' . $txt['email'] . ' ' . $member['name'] . '" /></i>', '</a>
              ', $member['website']['url'] != '' ? '<a href="' . $member['website']['url'] . '" target="_blank" class="new_win"><i class="fas fa-globe" alt="' . $member['website']['title'] . '" title="' . $member['website']['title'] . '" /></i>' : '', '</a>
                     </div>
                    </div>
                </div>
        </div>';
        }
    }

    echo '
        <div class="pagesection">
            <div class="pagelinks floatleft">', $txt['pages'], ': ', $context['page_index'], '</div>';

    // If it is displaying the result of a search show a "search again" link to edit their criteria.
    if (isset($context['old_search']))
        echo '
            <div class="floatright">
                <a href="', $scripturl, '?action=mlist;sa=search;search=', $context['old_search_value'], '">', $txt['mlist_search_again'], '</a>
            </div>';
    echo '
        </div>
    </div>';

}

5. Open your theme's index.css file and at the very end add:

Code Select Expand

.memberlist-card {
  display: inline-block;
  width: 225px;
}

.memberlist-profile {
  margin: 10px;
  text-align: center;
  background: transparent;
  text-decoration: none;
  color: #414a51;
  padding: 1em;
  border: 1px solid #eaeaea;
}

.memberlist-profile .profile-image {
  padding: 5% 5% 0;
}

.memberlist-profile .profile-image img {
  position: relative;
  border-radius: 50%;
  width: 70px;
}

.memberlist-profile profile-caption {
  padding: 5% 10% 15%;
}

.memberlist-profile h3 {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  margin: 3px 0;
}

.memberlist-profile h5 {
  font-weight: 400;
  margin: 0;
  text-transform: uppercase;
  color: #888;
  letter-spacing: 1px;
}

.memberlist-profile h6 {
  font-weight: 200;
  font-size: 10px;
  margin: 0;
  text-transform: uppercase;
  color: #888;
  letter-spacing: 1px;
}

.memberlist-profile .profile-icons i {
  color: #999;
  display: inline-block;
  margin-right: 5px;
  font-size: 1.5em; 
}

.memberlist-profile .profile-icons i:hover {
  color: #555;
}

.memberlist-profile .profile-icons i a {
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  /* start of medium tablet styles */
.memberlist-card {
display: block;
                width: 100%;
}
}

6. Set the memberlist count to 12 ,18 or 24 for better results in:
Admin--> Features and Options--> Layout--> Members per page in member list

Note that if you use mods that altered the memberlist template, there is a chance you might have to add them edits manually

Latest member and forum stats combination

[TUT] Add a neat membership page with description

Stylize the topic Tags for SMF