2016-09-10, 11:21 AM
1 - Create memberlst.css (Admin CP > Templates & Style > Themes > Add Stylesheet) and add:
2 - Open Memberlist template and replace all content with:
2 - Open Memberlist_user template and replace all content with:
headerinclude {$ stil} Add below
edit 14.10.2020
.memberlistprofile {
display: inline-table;
box-sizing: border-box;
width: 15rem;
border: 1px solid #e4eced;
text-align: center;
color: #444;
border-radius: .5rem;
height: 6rem;
background: #e4eced;
margin-bottom: 35px;
margin-left: 35px
}
.memberlistname {
font-size: 25px;
text-align: center;
margin-top: -10px;
cursor: pointer;
text-shadow: 0px 1px 0px #bd9bff;
}
.memberlistbio {
margin-bottom: 1rem;
font-size: 14px;
font-family: Georgia,serif;
background:#43444f;
margin-top: -15px;
color: #f5f5f5;
}
.memberlistbio i {
margin-top: -2px
}
.memberlist_avatar {
height: 100px;
width: 100px;
padding: 4px;
margin-top: -15px;
border-radius: 12px 0px 12px 0px;
-moz-border-radius: 9px 0px 9px 0px;
-webkit-border-radius: 20px 0px 20px 0px;
}
.memberlist_avatar img {
width: 100px;
height: 100px;
margin-top: -6px;
margin-left: -2px;
border: 3px solid #43444f;
border-radius: 12px 0px 12px 0px;
-moz-border-radius: 9px 0px 9px 0px;
-webkit-border-radius: 20px 0px 20px 0px;
}
.memberlist_avatar img:hover {
-moz-transition: all 1.0s ease-in-out;
-webkit-transition: all 1.0s ease-in-out;
-o-transition: all 1.0s ease-in-out;
-ms-transition: all 1.0s ease-in-out;
transition: all 1.0s ease-in-out;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg)
}
h4 {
font-family: source-sans-pro,sans-serif;
color: #6EE6E8;
font-weight: 100;
font: 2rem/4.5rem "Kite One";
padding: 0 1.5rem;
opacity: .5
}
.infothead {
border-top: 2px solid #43444f;
;padding: 4px;
background: #43444f;
color: #c7c7c7;
border-radius: .4rem;
border-top-right-radius: .0rem;
border-top-left-radius: .0rem;
height: 25px
}
.float-left {
display: inline-block;
float: left
}
.float-right {
display: inline-block;
float: right
}
@media only screen and (max-width: 728px) {
.memberlistprofile {
float:left;
width: 100%;
text-align: center;
margin-top: 10px
}2 - Open Memberlist template and replace all content with:
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->member_list}</title>
{$headerinclude}
</head>
<body>
{$header}
{$multipage}
<br />{$users}
<br class="clear" />
<br />
<form method="post" action="memberlist.php">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead" colspan="3">
<div class="float_right">
<strong><a href="memberlist.php?action=search">{$lang->advanced_search}</a></strong>
</div>
<div><strong>{$lang->search_members}</strong></div>
</td>
</tr>
<tr>
<td class="tcat"><strong><label for="username">{$lang->username}</label></strong></td>
<td class="tcat"><strong><label for="website">{$lang->website}</label></strong></td>
<td class="tcat"><strong><label for="sort">{$lang->sort_by}</label></strong></td>
</tr>
<tr>
<td class="trow1" width="33%" style="vertical-align: top;">
{$lang->contains}<br />
<input type="text" class="textbox" name="username" id="username" style="width: 99%; margin-top: 4px;" value="{$search_username}" />
</td>
<td class="trow1" width="33%" style="vertical-align: top;">
{$lang->contains}<br />
<input type="text" class="textbox" name="website" id="website" style="width: 99%; margin-top: 4px;" value="{$search_website}" />
</td>
<td class="trow1" width="33%">
<div class="smalltext" style="margin-bottom: 3px;">
<input type="radio" class="radio" name="order" id="order_asc" value="ascending"{$order_check['ascending']} /> <label for="order_asc">{$lang->order_asc}</label>
<input type="radio" class="radio" name="order" id="order_desc" value="descending"{$order_check['descending']} /> <label for="order_desc">{$lang->order_desc}</label>
</div>
<select name="sort" id="sort" style="width: 99%;">
<option value="username"{$sort_selected['username']}>{$lang->sort_by_username}</option>
<option value="regdate"{$sort_selected['regdate']}>{$lang->sort_by_regdate}</option>
<option value="lastvisit"{$sort_selected['lastvisit']}>{$lang->sort_by_lastvisit}</option>
<option value="postnum"{$sort_selected['postnum']}>{$lang->sort_by_posts}</option>
<option value="threadnum"{$sort_selected['threadnum']}>{$lang->sort_by_threads}</option>
<option value="referrals"{$sort_selected['referrals']}>{$lang->sort_by_referrals}</option>
</select>
</td>
</tr>
</table>
<div align="center"><br /><input type="submit" class="button" name="submit" value="{$lang->search}" /></div>
</form>
{$footer}
<link rel="stylesheet" href="{$mybb->asset_url}/jscripts/select2/select2.css?ver=1807">
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/select2/select2.min.js?ver=1806"></script>
<script type="text/javascript">
<!--
if(use_xmlhttprequest == "1")
{
MyBB.select2();
$("#username").select2({
placeholder: "{$lang->search_user}",
minimumInputLength: 2,
multiple: false,
allowClear: true,
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
url: "xmlhttp.php?action=get_users",
dataType: 'json',
data: function (term, page) {
return {
query: term, // search term
};
},
results: function (data, page) { // parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to alter remote JSON data
return {results: data};
}
},
initSelection: function(element, callback) {
var value = $(element).val();
if (value !== "") {
callback({
id: value,
text: value
});
}
},
// Allow the user entered text to be selected as well
createSearchChoice:function(term, data) {
if ( $(data).filter( function() {
return this.text.localeCompare(term)===0;
}).length===0) {
return {id:term, text:term};
}
},
});
$('[for=username]').on('click', function(){
$("#username").select2('open');
return false;
});
}
// -->
</script>
</body>
</html>2 - Open Memberlist_user template and replace all content with:
<tr>
<div class="memberlistprofile"><center><div class="memberlist_avatar">{$user['avatar']}</div>
{$user['userstars']}<h4 class="memberlistname">{$user['profilelink']}</h4>
<div class="memberlistbio"><i class="infothead fas fa-calendar-alt" title="Joined"></i>
{$user['regdate']}</div><div class="infothead"><center><i class="fas fa-user-edit"></i> Threads:{$user['threadnum']} <li class="fas fa-comment"></li> Comments: {$user['postnum']}
</center></div>
</div>
</tr>headerinclude {$ stil} Add below
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
edit 14.10.2020