First topic message reminder :
Hướng dẫn này giúp bạn tạo một bảng thống kê bài viết gọn gàng ở đầu trang chủ, với 5 cột 7 thông tin.
Hướng dẫn này dành cho phiên bản PunBB, các phiên bản khác sẽ được cập nhật sau.
ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet
Thêm vào cuối:
ACP >> Display >> QLTT
Tìm và xóa đoạn sau:
Tìm:
...và thêm vào trước nó:
ACP >> Display >> Portal
Thay thế toàn bộ các template sau:
ACP >> Modules >> Portal & Widgets >> Forum widgets management
Zzbaivong (devs.forumvi.com)
Hướng dẫn này giúp bạn tạo một bảng thống kê bài viết gọn gàng ở đầu trang chủ, với 5 cột 7 thông tin.
Chức năng
- Hỗ trợ responsive.
- 12 bài viết mới nhất.
- 5 chủ đề được xem nhiều nhất.
- 5 chủ đề thảo luận nhiều nhất.
- 5 thành viên tạo chủ đề nhiều nhất.
- 5 thành viên gửi bài nhiều nhất.
- 5 thành viên gửi bài nhiều nhất tuần.
- 5 thành viên gửi bài nhiều nhất tháng.
Screenshot
- Mobile và Tablet:
Hướng dẫn
Hướng dẫn này dành cho phiên bản PunBB, các phiên bản khác sẽ được cập nhật sau.
Bước 1
ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet
CSS
Thêm vào cuối:
- Code:
/* Latest Topics Board */
#left .lastRight,#left td,#left th{display:none}
#left td,#left th{padding:1em;border:0}
#left td.double{display:table-cell;border-bottom:0 none!important}
#content-container div#left{width:100%;float:none}
.olList{padding-left:2em!important;list-style:none}
.olList li{position:relative;height:2.5em;border-bottom:1px dashed #e7e7e7;line-height:2.5em;counter-increment:zzindex}
.olList li a{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-decoration:none}
.hide{display:none}
.olList li:before{border-radius:3px;text-align:center;content:counter(zzindex);position:absolute;top:.9em;left:-2.5em;width:1.6em;height:1.5em;font-size:.8em;line-height:1.5em;color:#fff}
.olList li:after{content:" ";position:absolute;top:1em;left:-.8em;border-width:4px 0 4px 4px;border-style:solid;border-color:transparent transparent transparent #ebebeb}
.olList li:nth-child(1):before{background:red}
.olList li:nth-child(1):after{border-left-color:red}
.olList li:nth-child(2):before{background:#fd5405}
.olList li:nth-child(2):after{border-left-color:#fd5405}
.olList li:nth-child(3):before{background:#fdb55a}
.olList li:nth-child(3):after{border-left-color:#fdb55a}
.olList li:nth-child(3)~li:before{background:#ebebeb;color:#ec4403;text-shadow:0 0 1px #fff,0 0 1px #fff,0 0 1px #fff,0 0 1px #fff}
@media only screen and (min-width: 480px) {
.olList li{height:2em;line-height:2em}
.olList li:before{top:.45em}
.olList li:after{top:.65em}
.olList li a:first-child{width:80%}
#left .lastRight{display:block;position:absolute;top:0;right:0}
}
@media only screen and (min-width: 768px) {
#left td,#left th{display:table-cell;width:25%;border-style:solid;border-color:#ddd;vertical-align:top}
#left td.double,#left th.double{width:50%;text-align:left}
#left td:last-child,#left th:last-child{border-left-width:1px}
#left th{padding-top:.5em;padding-bottom:.5em;border-bottom-width:1px;vertical-align:middle}
#left .double{border-right-width:1px}
#left .topicLast{border-top-width:1px}
#left .changeLast{height:1.4em;padding:0;border:0;background:0 0;box-shadow:none;color:inherit}
#left .changeLast option{padding:1px 7px}
#left #active_starters,#left #users_month,#left .half li:nth-child(5)~li{display:none}
#left .half{height:10em}
#tooltip{border:1px solid #e7e7e7;border-radius:3px;position:fixed;z-index:888;min-width:170px;max-width:280px;padding:8px 15px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.24)}
#tooltip span{margin-right:.4em}
}
Bước 2
ACP >> Display >> QLTT
overall_header
Tìm và xóa đoạn sau:
- 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>
index_body
Tìm:
- Code:
{CHATBOX_TOP}
...và thêm vào trước nó:
- Code:
<div id="{ID_LEFT}" class="main">
<div class="main-head">
<div class="page-title">
<h2>Latest topics</h2>
</div>
</div>
<div class="main-content">
<table cellspacing="0" class="table">
<tbody class="statused">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- END giefmod_index1 -->
</tbody>
</table>
</div>
</div>
<script>
/* Latest Topics Board */
(function($) {
'use strict';
var current_tooltip;
function show_tooltip(element, content) {
current_tooltip = document.getElementById('tooltip');
if (!current_tooltip) {
current_tooltip = document.createElement('div');
current_tooltip.setAttribute('id', 'tooltip');
document.body.appendChild(current_tooltip);
}
current_tooltip.style.visibility = 'visible';
element.title = '';
element.onmousemove = function(event) {
var xMouse = event.clientX,
yMouse = event.clientY,
wWidth = window.innerWidth,
wHeight = window.innerHeight,
tWidth = current_tooltip.offsetWidth,
tHeight = current_tooltip.offsetHeight,
yOffset = -(20 + tHeight),
xOffset = 0;
if (current_tooltip.innerHTML !== content) current_tooltip.innerHTML = content;
if (current_tooltip.style.visibility !== 'visible') current_tooltip.style.visibility = 'visible';
if (xMouse + tWidth + 50 > wWidth) xOffset = -(tWidth);
if (xMouse + xOffset < 0) xOffset = -xMouse;
current_tooltip.style.left = xMouse + xOffset + 'px';
if (yMouse < tHeight + 20) yOffset = 30;
if (yMouse + yOffset + tHeight > wHeight) yOffset = -yMouse + (wHeight - tHeight - 18);
current_tooltip.style.top = yMouse + yOffset + 'px';
};
element.onmouseout = function() {
current_tooltip.style.visibility = 'hidden';
};
}
$('.sub-title').replaceWith(function() {
return this.textContent.replace(/^(.+)\s-\s(\d+)\s[^-]+$/, '<span class="hide"><span class="tooltip-title">$1</span></span><span class="lastRight">$2</span>');
});
$('.group_post .lastRight, .group_time .lastRight').text(function() {
return this.textContent.match(/\d+/)[0];
});
$('#recent_topics a:first-child, #active_topics a, #viewed_topics a').mouseover(function() {
show_tooltip(this, this.nextElementSibling.innerHTML);
});
$('.changeLast').change(function() {
$('.half.group_' + this.dataset.group).hide();
$('#' + this.value).show();
});
})(jQuery);
</script>
Bước 3
ACP >> Display >> Portal
Thay thế toàn bộ các template sau:
mod_most_active_starters
- Code:
<!--<td>-->
<ol id="active_starters" class="olList half group_post">
<!-- BEGIN POSTER -->
<li>
{POSTER.NAME}
<span class="lastRight">
{POSTER.NB_TOPICS}
</span>
</li>
<!-- END POSTER -->
</ol>
</td>
mod_most_active_topics
- Code:
<tr>
<th class="topicLast centered">
Most active topics
</th>
<th class="topicLast centered">
Most Viewed Topics
</th>
</tr>
<tr>
<td>
<ol id="active_topics" class="olList half">
<!-- BEGIN TOPIC -->
<li>
<a href="{TOPIC.LINK}" title="{TOPIC.TITLE}">{TOPIC.NAME}</a>
<span class="sub-title hide">{TOPIC.TITLE}</span>
</li>
<!-- END TOPIC -->
</ol>
</td>
<!--</tr>-->
mod_most_viewed_topics
- Code:
<!--<tr>-->
<td>
<ol id="viewed_topics" class="olList half">
<!-- BEGIN TOPIC -->
<li>
<a href="{TOPIC.LINK}" title="{TOPIC.TITLE}">{TOPIC.NAME}</a>
<span class="sub-title hide">{TOPIC.TITLE}</span>
</li>
<!-- END TOPIC -->
</ol>
</td>
</tr>
mod_recent_topics
- Code:
<!-- BEGIN classical_row -->
<tr>
<th class="double">
Newest post
<span class="right">Latest reply</span>
</th>
<th class="centered">
<select class="changeLast" data-group="post">
<option value="top_posters">Top posters</option>
<option value="active_starters">Most active topic starters</option>
</select>
</th>
<th class="centered">
<select class="changeLast" data-group="time">
<option value="users_week">Top posting users this week</option>
<option value="users_month">Top posting users this month</option>
</select>
</th>
</tr>
<tr>
<td class="double" rowspan="3">
<ol id="recent_topics" class="olList">
<!-- BEGIN recent_topic_row -->
<li>
<a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>
<div class="tooltip_data hide">
<div>
<span class="tooltip-title">{classical_row.recent_topic_row.L_TITLE}</span>
</div>
<div>
<small class="tooltip-date">{classical_row.recent_topic_row.S_POSTTIME}</small>
</div>
</div>
<!-- BEGIN switch_poster -->
<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="lastRight">{classical_row.recent_topic_row.switch_poster_guest.S_POSTER}</span>
<!-- END switch_poster_guest -->
</li>
<!-- END recent_topic_row -->
</ol>
</td>
<!-- </tr> -->
<!-- END classical_row -->
mod_top_post_users_month
- Code:
<!--<tr>-->
<!--<td>-->
<ol id="users_month" class="olList half group_time">
<!-- BEGIN POSTER -->
<li>
{POSTER.NAME}
<span class="lastRight">
{POSTER.NB_POSTS}
</span>
</li>
<!-- END POSTER -->
</ol>
</td>
</tr>
mod_top_post_users_week
- Code:
<td>
<ol id="users_week" class="olList half group_time">
<!-- BEGIN POSTER -->
<li>
{POSTER.NAME}
<span class="lastRight">
{POSTER.NB_POSTS}
</span>
</li>
<!-- END POSTER -->
</ol>
<!--</td>-->
mod_top_posters
- Code:
<td>
<ol id="top_posters" class="olList half group_post">
<!-- BEGIN POSTER -->
<li>
{POSTER.NAME}
<span class="lastRight">
{POSTER.NB_POSTS}
</span>
</li>
<!-- END POSTER -->
</ol>
<!--</td>-->
Bước 4
ACP >> Modules >> Portal & Widgets >> Forum widgets management
Nguồn
Zzbaivong (devs.forumvi.com)