Free Forever. Our themes will always be free. Forever. Period.

Stylize the Member list template

Mick in Tutorials on Jan 27, 2019

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

Tagged with: smf memberlist hack responsive style 


Mick

Mick G

idesignsmf.com

    

Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time and has a weakness for Tacos and Pizza.


0 Comments




Latest Discussions

Join the conversation