Nói sơ qua về cái member list này là mình vừa mới lọc ra từ trong skin twitter chưa kịp xin phép chủ skin đã share mong chủ skin có bắt gặp cũng đừng trách nhé! |
Demo onl: [You must be registered and logged in to see this link.]
Cách làm:
Đơn giản 1 bước thui. Thay toàn bộ code dưới zô memberlist_body của 4rum bạn nhé!
Code:
[Bài viết không bị Ẩn]
- Code:
<style>/* memberlist 2 in 1 */
.Sname a{background-color:#FFF;border:1px solid #DDD;margin:2px;padding:1px 5px}
.Sname a:hover,.Sname a:active{background-color:#1786FF;color:#FFF}
.Sname{text-align:right}
.rutgonML img{background-color:#ffffff;border:4px double;border-radius:5px 5px 5px 5px;height:65px;width:72%;margin:10px}
.rutgonML{float:left;width:10%}
.rutgonML p{background-color:#F0F0F0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 2px;padding:3px 5px}
.rutgonML:hover{box-shadow:0 0 6px 4px #158FFF}
.entry-content img{max-width:350px}
.starsTitle {background: url(http://i44.servimg.com/u/f44/16/54/92/12/tabbg110.png);border: 0px solid #DDD;color: #CD04FF;font-family: Comic Sans MS;font-variant: small-caps;font-weight: 700;height: 12px;padding: 5px;}
.top-vi,.viewrep{min-height:100px}#most_active,#active_starters,#users_week,#users_month{display:none}.leftr,.leftrecent,.rightrecent,.viewfmvi,.repfmvi,.lastcate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:absolute}
.leftrecent{width:42%}.leftr{width:75%;margin-left:-3px}.rightnumber{padding:10px}.imgstatus{background-color:#FFF;left:-32px;position:absolute;padding:2px 7px}.rightrecent{right:250px;text-align:right;width:105px}.showpost{font-size:9px;left:-12px;line-height:18px;position:absolute}.viewfmvi{right:205px;text-align:right;width:35px;font-style:italic}
.repfmvi{right:165px;text-align:right;width:50px;font-style:italic}.lastcate{right:0;text-align:right;width:165px;margin-right:-4px}.latest_topics{list-style:decimal-leading-zero outside none;text-align:left;margin:0!important;padding:0 5px 0 27px}.latest_topics li{line-height:17px;position:relative}.toppost_width{float:left;width:200px}.recentWidth{float:left;width:615px}
.recentWidth .main-head{position:relative;height:1.3em;overflow:hidden}.recentWidth h3{marign-left:10px}.loaddinng{background-image:url(http://i43.servimg.com/u/f43/16/03/04/56/black-10.gif);background-position:center center;background-repeat:no-repeat;height:350px;width:440px}#checktip{position:absolute;right:10px;top:3px;z-index:300}#numRecent{display:none;position:absolute;right:12px;top:7px}
.numtopF{margin-right:-10px!important}.fancybox-title{display:none}.pun .main-contentr{border:0;padding:5px!important;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;background-color:#fff}fieldset.frm-set dl dd{margin-left:8em}div.post{width:836px}.paging b{background:#373d48 url(http://i43.servimg.com/u/f43/16/03/04/56/mainti10.png) repeat-x top;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,0.3);border:1pxsolid #232830;border-radius:2px;font-weight:bold;font-size:12px;padding:8px;margin:-3px 0;box-shadow:0 1px 0 rgba(0,0,0,0.05)}a:hover{text-decoration:none!important;color:yellow;text-shadow:0 0 .2em yellow,0 0 .2em yellow,0 0 .2em yellow}a,a:link,a:hover{text-decoration:none!important}.italic{font-style:italic}
.leftStats{float:left;margin-left:-71px;vertical-align:middle;width:60px}
.rightStats{min-height: 85px;border-left:2px solid #7FB2FF;padding-left:10px;width:690px;margin:5px 10px 5px 70px}
#smilies_categ{padding:10px 0}#smiley-box iframe{height:150px}#textarea_content dd{border-radius:3px 3px 3px 3px;color:#FFF!important;margin-left:0!important}input[type='reset'],input[type='submit']{float:none!important}#smilies_categ{padding:10px 0}#smiley-box{border:3px dotted #0c5a89;padding:5px;width:99%!important}#textarea_content{border:1px solid #ddd;padding:5px;width:98.6%!important}
.main-head{background-color:#a52a2a;background-image:url(http://i41.servimg.com/u/f41/16/41/29/13/tcat1027.png)!important;background-repeat:repeat;border:0 none!important;padding:0;}
.baivietdai{overflow:hidden}.thugon span:hover{text-shadow:1px 1px 1px #000;cursor:pointer}.thugon{background-color:#f6ff9d;border-top:1px solid #DDD;clear:both;margin:0 -13px;padding:2px 10px}.viewfull{background:url(//ssl.gstatic.com/ui/v1/zippy/arrow_down.png) no-repeat scroll 3px 7px transparent;padding:0 15px}.viewhide{display:none;background:url(//ssl.gstatic.com/ui/v1/icons/mail/arrow_up.png) no-repeat scroll 3px 7px transparent;padding:0 15px}.fullOff{background:url(http://phandangluu.9forum.net/users/2012/10/88/45/album/power_10.png) no-repeat scroll 0 2px transparent;margin-top:-2px;padding:2px 5px 2px 20px}.fullOn{display:none;background:url(http://phandangluu.9forum.net/users/2012/10/88/45/album/power_11.png) no-repeat scroll 0 2px transparent;margin-top:-2px;padding:2px 5px 2px 20px}
.quick_reply_textarea {
-moz-transition: height .4s ease-in-out;
-o-transition: height .4s ease-in-out;
-webkit-transition: height .4s ease-in-out;
height: 100px!important;
transition: height .4s ease-in-out;
}
element.style {
font-size: 1.2em;
width: 100%;
}
Matched CSS Rules
#quick_reply #text_editor_textarea {
border: 0;
font-size: 1.2em;
max-height: 136px;
max-width: 894px;
width: 100%;
}</style>
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
<ul>
<li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
<li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
</ul>
<p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
<p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->
<div class="pun-crumbs">
<p class="crumbs">
<a href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC} » <strong>{PAGE_TITLE}</strong>
</p>
</div>
<a name="fmvimem"></a>
<div class="main frm">
<!-- BEGIN switch_pagination -->
<div class="paged-head clearfix">
<p class="paging">{PAGINATION}</p>
</div>
<!-- END switch_pagination -->
<div class="main-head Sname">
<h1 style="float: left;" class="page-title">Danh sách thành viên</h1>
<a href="?username=A">A</a>
<a href="?username=B">B</a>
<a href="?username=C">C</a>
<a href="?username=D">D</a>
<a href="?username=E">E</a>
<a href="?username=F">F</a>
<a href="?username=G">G</a>
<a href="?username=H">H</a>
<a href="?username=I">I</a>
<a href="?username=J">J</a>
<a href="?username=K">K</a>
<a href="?username=L">L</a>
<a href="?username=M">M</a>
<a href="?username=N">N</a>
<a href="?username=O">O</a>
<a href="?username=P">P</a>
<a href="?username=Q">Q</a>
<a href="?username=R">R</a>
<a href="?username=S">S</a>
<a href="?username=T">T</a>
<a href="?username=U">U</a>
<a href="?username=V">V</a>
<a href="?username=W">W</a>
<a href="?username=X">X</a>
<a href="?username=Y">Y</a>
<a href="?username=Z">Z</a>
</div>
<div class="main-content">
<fieldset id="chitietML" class="frm-set clearfix" style="margin: 0 0 -1em 0">
<div class="frm-form" style="display: none">
<table class="table" cellspacing="0">
<thead>
<tr>
<th class="tcl memberlist">{L_AVATAR} - {L_USERNAME}</th>
<!-- BEGIN switch_th_group -->
<th class="tc2">{L_GROUPS}</th>
<!-- END switch_th_group -->
<th class="tc3">{L_INTERESTS}</th>
<th class="tc2">{L_JOINED}</th>
<th class="tc2">{L_VISITED}</th>
<th class="tc3">{L_POSTS}</th>
<th class="tc3">{L_PM}</th>
<th class="tc3">{L_WEBSITE}</th>
</tr>
</thead>
<tbody>
<!-- BEGIN memberrow -->
<tr>
<td class="tcl avatar-mini"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG} <span>{memberrow.USERNAME}</span></a></td>
<!-- BEGIN switch_td_group -->
<td class="tc2">{memberrow.GROUPS}</td>
<!-- END switch_td_group -->
<td class="tc3">{memberrow.INTERESTS}</td>
<td class="tc2">{memberrow.JOINED}</td>
<td class="tc2">{memberrow.LASTVISIT}</td>
<td class="tc3">{memberrow.POSTS}</td>
<td class="tc3">{memberrow.PM_IMG}</td>
<td class="tc4">{memberrow.WWW_IMG}</td>
</tr>
<!-- END memberrow -->
<!-- BEGIN switch_no_user -->
<tr>
<td colspan="{switch_no_user.COLSPAN_NUMBER}" class="tcr">{switch_no_user.L_NO_USER}</td>
</tr>
<!-- END switch_no_user -->
</tbody>
</table>
</div>
</fieldset>
<fieldset id="rutgonML" class="frm-set clearfix" style="margin: 0">
<!-- BEGIN memberrow -->
<div class="rutgonML">
<a onclick="$('#chitietML tbody>tr').Bài viết không bị Ẩn();$('#chitietML tbody>tr:eq(' + $(this).attr('alt') + ')').show()" class="gen" href="#fmvimem">{memberrow.AVATAR_IMG}</a>
<p align="center">{memberrow.USERNAME}</p>
</div>
<!-- END memberrow -->
</fieldset>
</div>
<div class="main-head greenBgT">
<h1 class="page-title">Tìm kiếm thành viên
<span style="float:right">
<a style="color:#FFF" href="#fmvimem" id="chimlX">Danh sách chi tiết</a>
<a style="display:none; color:#FFF" href="#fmvimem" id="rutmlX">Danh sách rút gọn</a>
<img src="http://i48.servimg.com/u/f48/16/58/89/73/stock_11.png" />
</span>
</h1>
</div>
<div class="paged-foot clearfix" id="sapxepFMvi">
<form action="{S_MODE_ACTION}" method="get" class="form-frm">
<span>{L_USER_SELECT}</span>
<input type="text" class="inputbox" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />
<span>{L_SELECT_SORT_METHOD}</span>{S_MODE_SELECT}
<span>{L_ORDER}</span>{S_ORDER_SELECT} {S_HIDDEN_SID}
<input type="submit" value="Tìm thành viên" name="submit" style="float: right ! important" />
</form>
</div>
</div>
<script type="text/javascript">
if (my_getcookie("fmvimemlist") == "yes") {
chitietml();
$("#rutmlX, #chimlX").toggle()
} else {
rutgonml()
}
var rutML;
for (rutML = 0; rutML < $('.rutgonML').length; rutML++) {
$('.rutgonML a:eq(' + rutML + ')').attr('alt', rutML)
}
$("#rutmlX").click(function () {
my_setcookie("fmvimemlist", "no", false);
rutgonml();
$("#rutmlX, #chimlX").toggle()
});
$("#chimlX").click(function () {
my_setcookie("fmvimemlist", "yes", false);
chitietml();
$("#rutmlX, #chimlX").toggle()
});
function rutgonml() {
$("#chitietML tbody>tr:not(':first')").Bài viết không bị Ẩn();
$("#chitietML .frm-form, #rutgonML").show();
}
function chitietml() {
$("#chitietML tbody>tr, #chitietML .frm-form").show();
$("#rutgonML").Bài viết không bị Ẩn();
}
</script>
[/Bài viết không bị Ẩn]
:Bài viết không bị Ẩn:
Hay thì like!