1 - Create extra.css (Admin CP > Templates & Style > Themes > Add Stylesheet) and add:
2 - Open Memberlist template and replace all content with:
3 - Open Memberlist_user template and replace all content with:
Preview Picture
![[Image: aXG9NO.png]]()
feel happy while using it
Code:
/*MEMBERLİST PROFİLE STYLE*/
.memberlistprofile {
display: inline-table;
box-sizing: border-box;
width: 15rem;
margin: 0.3rem;
border: 1px solid #D5EDF0;
text-align: center;
color: #444;
border-radius: .5rem;
height: 6rem;
background: #E9F1F1;
}
.memberlistname {
font-family: 'Pacifico', cursive;
font-size: 14px;
letter-spacing: 0.1rem;
text-transform: uppercase;
text-align:center;
margin-top: -10px;
cursor:pointer;
}
.memberlistbio {
margin-bottom: 1rem;
font-size: 1rem;
font-family: Georgia, serif;
background: #f5f5f5;
margin-top:-15px;
}
.userstar {
float:right;
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
margin-right:-50px;
background: #E9F1F1;
border-radius: 11px 11px 0px 0px;
-moz-border-radius: 11px 11px 0px 0px;
-webkit-border-radius: 11px 11px 0px 0px;
border-top: 2px solid #F3D3D7;
margin-top:-65px;
}
.memberlist_avatar {
height: 120px;
width: 120px;
overflow: hidden;
padding: 4px;
border: 8px solid #D5EDF0;
margin-top:-15px;
}
.memberlist_avatar img {
box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1), 0 2px 10px 0 rgba(0,0,0,0.1);
width: 130px;
height: 130px;
border-radius: 50% 0;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
margin-top:-6px;
margin-left:-2px;
}
.memberlist 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: 1px solid #fff;
padding: 6px;
background:#7ebeba;
color: #f1f1f1;
}
@media only screen and (max-width:728px) {
.memberlistprofile {float: left;width: 100%; text-align: center;}2 - Open Memberlist template and replace all content with:
Code:
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->member_list}</title>
{$headerinclude}
</head>
<body>
{$header}
{$multipage}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead" colspan="7">
<div class="float_left">
<a href="memberlist.php?username_match=begins&username={$lang->a}" style="padding: 5px;">{$lang->a}</a>
<a href="memberlist.php?username_match=begins&username={$lang->b}" style="padding: 5px;">{$lang->b}</a>
<a href="memberlist.php?username_match=begins&username={$lang->c}" style="padding: 5px;">{$lang->c}</a>
<a href="memberlist.php?username_match=begins&username={$lang->d}" style="padding: 5px;">{$lang->d}</a>
<a href="memberlist.php?username_match=begins&username={$lang->e}" style="padding: 5px;">{$lang->e}</a>
<a href="memberlist.php?username_match=begins&username={$lang->f}" style="padding: 5px;">{$lang->f}</a>
<a href="memberlist.php?username_match=begins&username={$lang->g}" style="padding: 5px;">{$lang->g}</a>
<a href="memberlist.php?username_match=begins&username={$lang->h}" style="padding: 5px;">{$lang->h}</a>
<a href="memberlist.php?username_match=begins&username={$lang->i}" style="padding: 5px;">{$lang->i}</a>
<a href="memberlist.php?username_match=begins&username={$lang->j}" style="padding: 5px;">{$lang->j}</a>
<a href="memberlist.php?username_match=begins&username={$lang->k}" style="padding: 5px;">{$lang->k}</a>
<a href="memberlist.php?username_match=begins&username={$lang->l}" style="padding: 5px;">{$lang->l}</a>
<a href="memberlist.php?username_match=begins&username={$lang->m}" style="padding: 5px;">{$lang->m}</a>
<a href="memberlist.php?username_match=begins&username={$lang->n}" style="padding: 5px;">{$lang->n}</a>
<a href="memberlist.php?username_match=begins&username={$lang->o}" style="padding: 5px;">{$lang->o}</a>
<a href="memberlist.php?username_match=begins&username={$lang->p}" style="padding: 5px;">{$lang->p}</a>
<a href="memberlist.php?username_match=begins&username={$lang->q}" style="padding: 5px;">{$lang->q}</a>
<a href="memberlist.php?username_match=begins&username={$lang->r}" style="padding: 5px;">{$lang->r}</a>
<a href="memberlist.php?username_match=begins&username={$lang->s}" style="padding: 5px;">{$lang->s}</a>
<a href="memberlist.php?username_match=begins&username={$lang->t}" style="padding: 5px;">{$lang->t}</a>
<a href="memberlist.php?username_match=begins&username={$lang->u}" style="padding: 5px;">{$lang->u}</a>
<a href="memberlist.php?username_match=begins&username={$lang->v}" style="padding: 5px;">{$lang->v}</a>
<a href="memberlist.php?username_match=begins&username={$lang->w}" style="padding: 5px;">{$lang->w}</a>
<a href="memberlist.php?username_match=begins&username={$lang->x}" style="padding: 5px;">{$lang->x}</a>
<a href="memberlist.php?username_match=begins&username={$lang->y}" style="padding: 5px;">{$lang->y}</a>
<a href="memberlist.php?username_match=begins&username={$lang->z}" style="padding: 5px;">{$lang->z}</a>
</div><div class="float_right" style="padding-top: 4px;">
<a href="showteam.php"><strong>{$lang->forumteam}</strong></a>
</div>
</tr>
</table>
{$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=1806">
<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: 3,
maximumSelectionSize: 3,
multiple: false,
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]').click(function(){
$("#username").select2('open');
return false;
});
}
// -->
</script>
</body>
</html>3 - Open Memberlist_user template and replace all content with:
Code:
<tr> <div class="memberlistprofile"><center><div class="memberlist">{$user['avatar']}</div><p class="userstar">{$user['userstars']}</p>
<h4 class="memberlistname">{$user['profilelink']}</h4>
<p class="memberlistbio"><i class="infothead fa fa-pencil-square " title="Joined"></i>
{$user['regdate']}</p><div class="infothead"><center><li class="fa fa-comments"></li> Comments: {$user['postnum']} <li class="fa fa-comments-o"></li> Threads:{$user['threadnum']} </center></div>
</div>
</tr></ br>Preview Picture
feel happy while using it