Demo online
[You must be registered and logged in to see this link.]
đề mố ảnh :
Người viết : Baivong ^^
Cách làm
1 . vào css thêm cái này vào :
- Code:
/* Latest topics by zzbaivong */
#left{margin:30px 0}
#left td{width:25%;vertical-align:top;border:0 none;padding:10px 0!important}
#left .double{padding-left:0;border-left:0;width:50%}
#left li{position:relative;width:100%;list-style-type:none;height:23px;line-height:24px;border-bottom:1px dashed #CCC;counter-increment:Zzindex}
#left li:before{content:counter(Zzindex);display:block;height:18px;background:#98D0FF;position:absolute;left:-23px;font-size:11px;top:3px;border-radius:2px;text-align:center;width:18px;color:#FFF;line-height:18px}
#left li:after{content:" ";background:#98D0FF;display:block;width:6px;height:6px;position:absolute;top:9px;left:-8px;transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg)}
#left li:nth-child(1):before,#left li:nth-child(1):after{background:red}
#left li:nth-child(2):before,#left li:nth-child(2):after{background:#d47a2a}
#left li:nth-child(3):before,#left li:nth-child(3):after{background:#b9ba45}
#left li:nth-child(4):before,#left li:nth-child(4):after{background:#aad655}
#left li:nth-child(5):before,#left li:nth-child(5):after{background:#55e7aa}
.lastRight
{
float:right;}
.top-vi,.viewrep{padding:10px!important}#active_starters,#most_active,#pun-visit,#users_month,#users_week{display:none}.lastcate,.leftrecent,.repfmvi,.rightrecent,
.viewfmvi{overflow:hidden;position:absolute;text-overflow:ellipsis;white-space:nowrap}
.leftrecent{width:34%}.left{margin-left:-3px;width:81%}
.imgstatus{background-color:#FFF;left:-32px;padding:2px 7px;position:absolute}.rightrecent{right:250px;text-align:right;width:115px}.showpost{font-size:9px;left:-12px;line-height:18px;position:absolute}
.viewfmvi{right:185px;text-align:right;width:50px}.repfmvi{right: 129px;text-align:right;width:50px}.lastcate{margin-right:-11px;right:0;text-align:right;width:157px}#content-container div#left,#content-container div#right{border:0 none;float:none;margin:0;width:100%}*+ html #content-container div#main{margin-left:0;margin-right:0}* html #content-container #main-content{margin-left:0;margin-right:0;overflow:visible}* html #content-container div#main{float:none;margin-left:-99%;margin-right:-99%;width:100%}.latest_topics{list-style:decimal-leading-zero outside none;margin:0!important;padding:0 5px 0 27px;text-align:left}.latest_topics li{line-height:16.1px;position:relative}.toppost_width{float:left;width:200px}
.recentWidth{float:left;width:850px}
.recentWidth .main-head{height:1.3em;overflow:hidden;position:relative}.recentWidth h3{marign-left:10px}
#checktip{position:absolute;right:10px;top:3px;z-index:300}#numRecent{display:none;position:absolute;right:12px;top:7px}
.latest_topics li {
line-height: 16.1px;
}
.rlink{float:right;display:inline-block;text-align:right}
/* Thống kĂª */
.leftStats{float:left;margin-left:-71px;position:absolute;vertical-align:middle;width:60px}
.rightStats{border-left:2px solid #CFC9C9;min-height:50px;padding-left:10px;margin:5px 10px 5px 70px}
.starsTitle {
background-color: #BFBFBF;
border: 1px solid #989898;
color: #F8FF04;
font-family: Comic Sans MS;
font-variant: small-caps;
font-weight: 700;
height: 1.4em;
padding: 5px;
text-shadow: 1px 1px 1px #000;
}
.loaddingLike {
background: url(http://i48.servimg.com/u/f48/16/58/89/73/loadin11.gif) no-repeat scroll center center transparent;
display: none;
height: 1.4em;
margin: -1.4em 0 -3px 200px;
width: 126px;
}
#checktip{position:absolute;right:10px;top:3px;z-index:300}
#numRecent{display:none;position:absolute;right:12px;top:7px}.chatbox_row_1:hover, .chatbox_row_2:hover {
-webkit-box-shadow: gainsboro 0px 0px 4px;
border: 1px solid #C9C9C9;
border-image: initial;
border-radius: 5px;
box-shadow: gainsboro 0px 0px 3px;
margin: 5px;
background-color: white;
}
#tooltip img {
height: 70px!important;
padding-right: 10px;
}
/* tooltip */
#tooltip .header,a.mainmenu[href='/']{display:none}
#tooltip .tiplFMvi{border-bottom:1px dashed;padding-bottom:5px;margin-bottom:5px}
#tooltip{max-width:550px;position:absolute;background-image:url(http://i48.servimg.com/u/f48/13/58/60/43/opacit10.png);border:0;padding:15px;border-radius:3px;color:#FFF;z-index:99;}
2.Vào Index_box tìm : <div class="main">
và thêm cái code này bên trên nó :
- Code:
<div id="left">
<div id="pun-info" class="boxFMvi main">
<div class="main-head">
<div class="page-title">
<h2>Tình hình diễn đàn</h2>
</div>
</div>
<div class="main-content" style="height:31em; border-radius:0">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- END giefmod_index1 -->
</div>
</div>
</div>
<script type="text/javascript">
function searchtopic(nguonF, soF, dichF) {
$("#proLastLoad").show();
$.ajax({
url: nguonF,
success: function (data) {
$("#proLastLoad").Bài viết không bị Ẩn();
$("#recentnew .latest_topics").empty();
$(data).find(".topic-title:not('.topic-title:contains(\'»\')'):lt(" + soF + ")").find(".topictitle, .tooltipFMvi").appendTo(dichF);
$(dichF + ' .topictitle').wrap("<li></li>");
var ti;
for (ti = 0; ti < soF; ti++) {
var it = $(dichF + ' a.topictitle:eq(' + ti + ')');
var lastUx = it.parent().next().find('p:eq(6)>strong').html();
var popupUx = it.parent().next().find(".lastlink-FMvi a").attr("href");
var trangthai = it.parent().next().find('p:eq(3)>font').text();
if (langEV()) {
var dabikhoa = "This topic is locked";
var dacomoi = "New posts"
} else {
var dabikhoa = "Chủ đề này đã bị khóa";
var dacomoi = "Bài viết mới"
}
if (trangthai.search(dabikhoa) != -1) {
var imgUx = 'http://i48.servimg.com/u/f48/16/58/89/73/locked10.png';
} else if (trangthai.search(dacomoi) != -1) {
var imgUx = 'http://i48.servimg.com/u/f48/16/58/89/73/post_n10.gif';
} else {
var imgUx = 'http://i48.servimg.com/u/f48/16/58/89/73/post_o10.png';
};
it.replaceWith('<span onmouseover="show_tooltip(this, $(this).parent().next().html(), \'FMvi.Org\')" class="leftrecent"><a href="' + it.attr("href") + '" class="topictitle">' + it.text() + '</a></span><span class="imgstatus"><img width="10px" src="' + imgUx + '" /><a class="firstTopic" href="' + popupUx + '"><span style="line-height: 18px; font-size: 9px;"> ▼</span></a></span><span onmouseover="show_tooltip(this, \'Click để xem thông tin thành viên này\', \'FMvi.Org\')" class="rightrecent">' + lastUx + '</span>');
}
},
error: function (jqXHR, textStatus, errorThrown) {
$(dichF).html('<p><font face="Courier New"><font color="red">Có lỗi xảy ra trong quá trình tải dữ liệu.</font></font></p>');
}
});
}
function searchuser(nguonU, soU, dichU) {
$("#loaUser").show();
$.ajax({
url: nguonU,
success: function (data) {
$("#loaUser").Bài viết không bị Ẩn();
$("#top_posters .latest_topics").empty();
$(data).find(".dataUserFmvi:lt(" + soU + ")").appendTo(dichU);
$(dichU + ' .dataUserFmvi').wrap("<li></li>");
var g;
for (g = 0; g < 20; g++) {
var ggg = $(dichU + " .dataUserFmvi:eq(" + g + ")>span:first");
ggg.replaceWith("<span onmouseover=\"show_tooltip(this, $(this).next().html(), 'FMvi.Org')\" style=\"position: absolute; left: 0pt;\">" + ggg.html() + "</span>")
}
},
error: function (jqXHR, textStatus, errorThrown) {
$(dichU).html('<p><font face="Courier New"><font color="red">Có lỗi xảy ra trong quá trình tải dữ liệu.</font></font></p>');
}
});
}
searchuser('/memberlist?mode=overall_posters', '20', '#top_posters ul');
searchtopic('/search?search_keywords=&search_author=*_*', '20', '#recentnew ul');
$("#left").fadeIn(1000);
$(function(){
$("#changeFMvi").html($("#jumboxFMvi select").html());
});
var versionMinor = parseFloat(navigator.appVersion);
var versionMajor = parseInt(versionMinor);
var IE = document.all && !window.opera && versionMajor < 7;
var IE7 = document.all && !window.opera && versionMajor >= 7;
var OP = window.opera;
var FF = document.getElementById;
var NS = document.layers;
function move_tooltip(e) {
var curX = (!IE) ? e.pageX : event.clientX + real_body.scrollLeft;
var curY = (!IE) ? e.pageY : event.clientY + real_body.scrollTop;
var rightedge = IE && !window.opera ? real_body.clientWidth - event.clientX - offsetxpoint : window.innerWidth - e.clientX - offsetxpoint - 20;
var bottomedge = IE && !window.opera ? real_body.clientHeight - event.clientY - offsetypoint : window.innerHeight - e.clientY - offsetypoint - 20;
var leftedge = (offsetxpoint < 0) ? offsetxpoint * (-1) : -1000;
current_tooltip = get_item('tooltip');
if (rightedge < current_tooltip.offsetWidth) current_tooltip.style.left = IE ? real_body.scrollLeft + event.clientX - current_tooltip.offsetWidth + "px" : window.pageXOffset + e.clientX - current_tooltip.offsetWidth + "px";
else if (curX < leftedge) current_tooltip.style.left = "5px";
else current_tooltip.style.left = curX + offsetxpoint + "px";
if (bottomedge < current_tooltip.offsetHeight) current_tooltip.style.top = IE ? real_body.scrollTop + event.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : window.pageYOffset + e.clientY - current_tooltip.offsetHeight - offsetypoint + "px";
else current_tooltip.style.top = curY + offsetypoint + "px"
}
function get_item(name, opener) {
if (IE) {
return (opener) ? window.opener.document.all[name] : document.all[name]
} else if (FF) {
return (opener) ? window.opener.document.getElementById(name) : document.getElementById(name)
} else if (NS) {
return (opener) ? window.opener.document.layers[name] : document.layers[name]
}
}
function change_display(name, value, opener) {
if (IE) {
element = (opener == true) ? window.opener.document.all[name].style : document.all[name].style
} else if (FF) {
element = (opener == true) ? window.opener.document.getElementById(name).style : document.getElementById(name).style
} else if (NS) {
element = (opener == true) ? window.opener.document.layers[name] : document.layers[name]
}
element.display = value
}
function reverse_display(name, opener) {
element = get_item(name);
if (!element) {
return false
}
var display = (element.style.display != 'block') ? 'block' : 'none';
change_display(name, display, opener)
}
var current_tooltip;
function show_tooltip(caller, content, content_title) {
var current_tooltip = get_item('tooltip');
if (!current_tooltip) {
var current_tooltip = document.createElement('div');
current_tooltip.setAttribute('id', 'tooltip');
document.body.appendChild(current_tooltip)
}
current_tooltip.style.zIndex = 100;
current_tooltip.style.position = 'absolute';
if (content_title) {
content = '<p class="header">' + content_title + '</p><p>' + content + '</p>'
} else {
content = '<p>' + content + '</p>'
}
current_tooltip.innerHTML = content;
current_tooltip.style.visibility = 'visible';
caller.onmousemove = move_tooltip;
caller.onmouseout = function () {
current_tooltip.style.visibility = "hidden"
};
caller.title = ''
}
var offsetxpoint = -60;
var offsetypoint = 20;
var real_body = (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;
real_body = (document.documentElement) ? document.documentElement : document.body;
</script>
3. Vào Header tìm cái này
- Code:
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
<link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
và bạn thay nó = code sau
- Code:
<!--[if lte IE 6]>
<style type="text/css">
.post-entry .entry-content img{display: block !important}
body{background-color: #FFFFFF!important}
#mudimPanel,.minwidth_IE, #login_popup, #hitskin_preview{display:none!important}
</style>
<![endif]-->
<noscript>
<style type="text/css">
a.mainmenu[href='/groups'],a.mainmenu[href='/privmsg?folder=inbox']{display:block !important}
.post-entry .entry-content img{display: block !important}
#left{display:block !important}
.module .main-content{height: 12.3em !important}
.toppost_width{width: 290px;}
.recentWidth{width: 658px;}
.latest_topics{overflow: hidden !important; height: 12.3em !important}
.chatbox, .fmviToggle, #checktip .open{display:none}
</style>
</noscript>
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
<link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
<script type="text/javascript">
function langEV() {
if ($("html").attr("xml:lang") == "en") {
return true;
} else if ($("html").attr("xml:lang") == "vi") {
return false;
}
}
</script>
Tìm tiếp trong Header
- Code:
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
4. Portal >> mod_recent_topics : Thay toàn bộ code trong đó bằng code sau
- Code:
<div class="module main recentWidth" style="border: 0 none; border-radius: 0">
<div class="starsTitle">
<h3>Thống kê bài viết mới</h3>
<div id="proLastLoad" class="loaddingLike"></div>
<fieldset style="float: right; margin-top: -18px;">
Người gửi cuối
</fieldset>
</div>
<!-- BEGIN classical_row -->
<tr>
</tr>
<tr>
<td class="double" rowspan="3">
<ul id="recent_topics">
<!-- BEGIN recent_topic_row -->
<li>
<a onmouseover="show_tooltip(this, $(this).next().html(), 'FMvi.vn')" href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>
<!-- BEGIN switch_poster -->
<div class="tooltip_data" style="display:none">
<p>
<span style="color:rgb(183, 219, 216);"><b>Tiêu đề</b></span> : {classical_row.recent_topic_row.L_TITLE}
</p>
<p>
<span style="color:rgb(173, 157, 38);"><b>Gửi lúc</b></span> : {classical_row.recent_topic_row.S_POSTTIME}
</p>
<p>
<span style="color:rgb(173, 157, 38);"><b>Tác giả</b></span> : {classical_row.recent_topic_row.switch_poster.S_POSTER}
</p>
</div>
<a class="lastRight" href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
<!-- END switch_poster -->
<!-- BEGIN switch_poster_guest -->
<span class="rlink">
{classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
</span>
<!-- END switch_poster_guest -->
</li>
<!-- END recent_topic_row -->
</ul>
</td>
<!-- </tr> -->
<!-- END classical_row -->
<div id="dulieupostter"></div>
</div>
5. mod_top_posters : Thay toàn bộ code trong đó bằng code sau
- Code:
<div class="module main toppost_width" style="border: 0 none; border-radius: 0">
<span style="
float: right;
"><img id="loaUser" style="margin-top: 7px; display: none; margin-left: -20px;" src="http://i43.servimg.com/u/f43/16/03/04/56/13x13p10.gif"></span>
<div class="starsTitle">
<fieldset style="margin-top: -0.1em">
<select style="width: 167px" onchange="searchuser(this.options[this.selectedIndex].value, '20', '#top_posters ul')">
<option value="/memberlist?mode=overall_posters">Thành viên tích cực</option>
<option value="/memberlist?mode=today_posters">Gửi bài hôm nay</option>
<option value="/memberlist?mode=joined&order=DESC">Thành viên mới</option>
<option value="/memberlist?mode=lastvisit&order=DESC">Truy cập gần đây</option>
</select>
</fieldset>
</div>
<div id="top_posters" class="main-content" style="border: 0pt none ! important; border-radius: 0pt 0pt 0pt 0pt ! important; background-color: rgb(251, 251, 251) ! important;">
<ul class="latest_topics" style="border:0 none">
<div class="loaddinng"></div>
</ul>
</div>
</div>
6. memberlist_body : Thay toàn bộ code trong đó bằng code sau
- Code:
<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">
<h1 class="page-title">{L_ORDER_OR_SELECT}</h1>
</div>
<div class="main-content">
<form action="{S_MODE_ACTION}" method="get" class="form-frm">
<fieldset class="frm-set multi">
<dl>
<dt>{L_USER_SELECT}</dt>
<dd><input type="text" class="inputbox" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" /></dd>
</dl>
<dl>
<dt>{L_SELECT_SORT_METHOD}</dt>
<dd>{S_MODE_SELECT}</dd>
</dl>
<dl>
<dt>{L_ORDER}</dt>
<dd>{S_ORDER_SELECT}</dd>
</dl>
<div class="frm-buttons">
{S_HIDDEN_SID}
<input type="submit" name="submit" value="{L_SUBMIT}" />
</div>
</fieldset>
</form>
<fieldset class="frm-set clearfix">
<div class="frm-form">
<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} </a>
<span class="dataUserFmvi">
<span>
<a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>
</span>
<div style="display:none"><div style="padding:10px">
<table border="0">
<tbody>
<tr>
<td class="avatarthum" align="left">{memberrow.AVATAR_IMG}</td>
<td align="left">{memberrow.USERNAME}
<hr />
<span class="thamtop">Tham gia</span>:
<font color="violet">{memberrow.JOINED}</font>
<br />
<span class="truytop">Truy cập cuối</span>:
<font color="orange">{memberrow.LASTVISIT}</font>
<br />
<span class="baiBtop">Bài viết</span>:
<font color="cyan">{memberrow.POSTS}</font>
</td>
</tr>
</tbody>
</table>
</div></div>
<span class="left20" style="position: absolute; right: 0pt; display: none!important;">
<span class="sobaiTop">{memberrow.POSTS} </span>
<span class="baiBtop">Bài viết</span>
</span>
</span>
</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>
</div>
<div class="main-foot">
</div>
<!-- BEGIN switch_pagination -->
<div class="paged-foot clearfix">
<p class="paging">{PAGINATION}</p>
</div>
<!-- END switch_pagination -->
</div>
7. Kích hoạt Widgets :
MODULES >> Portal & Widgets >> Forum widgets management
Đặt như hình sau
Sau đó kick vào Recent topics
Number of recent topics : 14
Activate the topics scrolling : Không
Chú ý
Trong css có đoạn sau
- Code:
.recentWidth {
float: left;
width: 850px;
}
Ok Xong
Last đã hoạt động bình thường