MyBB Community Forums

Full Version: Memberlist card responsive css
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
previous topic: https://community.mybb.com/thread-200477.html

1- Memberlist Templates {$header} Find {$multipage} change

{$multipage}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead" colspan="{$colspan}">
	<div class="float_right">
		<a href="memberlist.php?username_match=begins&amp;username={$lang->a}" style="padding: 5px;">{$lang->a}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->b}" style="padding: 5px;">{$lang->b}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->c}" style="padding: 5px;">{$lang->c}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->d}" style="padding: 5px;">{$lang->d}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->e}" style="padding: 5px;">{$lang->e}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->f}" style="padding: 5px;">{$lang->f}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->g}" style="padding: 5px;">{$lang->g}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->h}" style="padding: 5px;">{$lang->h}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->i}" style="padding: 5px;">{$lang->i}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->j}" style="padding: 5px;">{$lang->j}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->k}" style="padding: 5px;">{$lang->k}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->l}" style="padding: 5px;">{$lang->l}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->m}" style="padding: 5px;">{$lang->m}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->n}" style="padding: 5px;">{$lang->n}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->o}" style="padding: 5px;">{$lang->o}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->p}" style="padding: 5px;">{$lang->p}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->q}" style="padding: 5px;">{$lang->q}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->r}" style="padding: 5px;">{$lang->r}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->s}" style="padding: 5px;">{$lang->s}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->t}" style="padding: 5px;">{$lang->t}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->u}" style="padding: 5px;">{$lang->u}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->v}" style="padding: 5px;">{$lang->v}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->w}" style="padding: 5px;">{$lang->w}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->x}" style="padding: 5px;">{$lang->x}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->y}" style="padding: 5px;">{$lang->y}</a>
		<a href="memberlist.php?username_match=begins&amp;username={$lang->z}" style="padding: 5px;">{$lang->z}</a>
	</div>
	<div><strong class="">{$lang->member_list}</strong></div></td>
</tr>
<tr>
</tr>
</table>
{$users}


2 - memberlist_user Templates Change


<div class="user-card-container">
<div class="user-card">
<center>{$user['avatar']}</center>
<div class="info">{$user['profilelink']}<br>{$user['usertitle']}<br>{$user['userstars']}</div>
<div class="info-line"></div>
<div class="info-title"> <i class="fas fa-calendar"></i><strong> {$lang->joined}:</strong> {$user['regdate']}<br /></div>
<div class="info-title"> <i class="fas fa-globe"></i><strong> {$lang->lastvisit}:</strong> {$user['lastvisit']}<br /></div>
<div class="info-title"> <i class="fas fa-comment"></i><strong> {$lang->posts}:</strong> {$user['postnum']}<br /></div>
<div class="info-title"> <i class="fas fa-bell"></i><strong> {$lang->threads}:</strong> {$user['threadnum']}<br /></div>
<div class="info-title"> <i class="fas fa-user"></i><strong> {$referral_header}:</strong> {$referral_bit}<br /></div>	
</div>
</div>	


3 - Add to Membercard.css

.info-title {
    font-size: 13px;
    color: #a8a9a9;
    background: #f1fafa;
    padding: 8px 8px;
    border-bottom: 1px solid #f2f3f5;
}

.user-card-container {
    display: inline-block;
    justify-content: left;
    padding: 10px 0px 10px 0px;
}

.user-card {
    height: 300px;
    width: 250px;
    background: #a2c6f2;
    margin: 0px 0px;
    border-radius: 10px;
}

.user-card .info-line {
    border-radius: 50px;
    margin: -95px 30px 0px 30px;
}
.user-card .info {
    height: 150px;
    width: 250px;
    text-align: center;
    margin: 9px 0px 13px 0px;
    background: #d1dbe6;
}
@media only screen and (max-width: 768px) {
.user-card-container, .user-card, .user-card .info {	width: 100% !important;}}

referral system is disabled

01 - memberlist_user Templates Change

<div class="user-card-container">
<div class="user-card">
<center>{$user['avatar']}</center>
<div class="info">{$user['profilelink']}<br>{$user['usertitle']}<br>{$user['userstars']}</div>
<div class="info-line"></div>
<div class="info-title"> <i class="fas fa-calendar"></i><strong> {$lang->joined}:</strong> {$user['regdate']}<br /></div>
<div class="info-title"> <i class="fas fa-globe"></i><strong> {$lang->lastvisit}:</strong> {$user['lastvisit']}<br /></div>
<div class="info-title"> <i class="fas fa-comment"></i><strong> {$lang->posts}:</strong> {$user['postnum']}<br /></div>
<div class="info-title"> <i class="fas fa-bell"></i><strong> {$lang->threads}:</strong> {$user['threadnum']}<br /></div>
</div>
</div>	



02 - memberlist_referrals and memberlist_referrals_bit find clear template save



[attachment=43739]
What if the referral system is disabled?
Hi, thank you for your contribution Smile

Consider the suggestion above.
(2021-02-07, 03:05 PM)effone Wrote: [ -> ]What if the referral system is disabled?

Remove

<div class="info-title"> <i class="fas fa-user"></i><strong> {$referral_header}:</strong> {$referral_bit}<br /></div>
No.
There is a dedicated templates for that (memberlist_referrals & memberlist_referrals_bit). The entire line should be moved in that template and the respective variable should be placed in this template.

{$referral_bit} carries chunk of table code. That also has to be modified to suit your div structure. Your current code is rendering something like:
<div class="info-title">
<i class="fas fa-user"></i>
<strong> Referrals:</strong> 
<td class="trow1" align="center">7</td>
<br />
</div>


Hope you understand what I mean. The <td> is pointless inside <div>.
(2021-02-11, 06:31 AM)effone Wrote: [ -> ]No.
There is a dedicated templates for that (memberlist_referrals & memberlist_referrals_bit). The entire line should be moved in that template and the respective variable should be placed in this template.

{$referral_bit} carries chunk of table code. That also has to be modified to suit your div structure.  Your current code is rendering something like:
<div class="info-title">
<i class="fas fa-user"></i>
<strong> Referrals:</strong> 
<td class="trow1" align="center">7</td>
<br />
</div>


Hope you understand what I mean. The <td> is pointless inside <div>.

topic updated