Stylize the Member list template

Started by Mick, Jan 27, 2019

Jan 27, 2019 Last Edit: Nov 03, 2019 by Mick

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:
// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'];

echo '


Add after:
  <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:
// 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:

// 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:

.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