Contribute to the development of SMF. Follow the coding discussions taking place on >> Github.

Stylize the Member list template

Mick in Tutorials
Jan 27, 2019
"Stylize the Member list template"

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.
https://custom.simplemachines.org/mods/index.php?mod=4040 (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...
https://custom.simplemachines.org/mods/index.php?mod=2665

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

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.

Website: https://www.idesignsmf.com/

    


0 Comments



Connect with us:


Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.

  Receive our monthly newsletter right in your inbox.


Advertisement  




 Tutorials
In this section you will find in-depth how-to's involving common SMF development and design techniques.



go up