Thống kê tình hình diễn đàn cho punBB
Chức năng
- Thay đổi giao diện mặc định bảng thông báo tình hình diễn đàn của punBB.
- Sắp xếp hợp lý các khối thống kê diễn đàn.
- Thành viên trực tuyến: Thông báo số lượng thành viên đang truy cập và danh sách chi tiết.
- Sự kiện: Danh sách thành viên đăng ký mới, và thành viên có sinh nhật hôm nay và sau 7 ngày tới.
- Thống kê: Thống kê tổng số bài viết và thành viên, lượt truy cập cao nhất.
- Chatbox: Khối này chỉ hiển thị khi bật chức năng chatbox, thống kê về số thành viên sử dụng chatbox.
- Danh sách hội nhóm
Demo
Hướng dẫn
Bước 1
Thêm vào CSSACP - Display - Pictures and Colors - Colors - CSS Stylesheet:
- Code:
/* zzStars by baivong - devs.forumvi.com */
#pun-info *{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
#pun-info > .main-content{border:1px solid #CCC;border-width:0 1px 1px 1px}
#pun-info .starsItem{position:relative}
#pun-info .starsTitle{height:26px;line-height:24px;border:1px solid #CCC;background:#DDD;border-width:1px 0;padding:0 10px}
#pun-info .leftStats img{width:48px;height:48px}
#pun-info .leftStats{position:absolute;left:11px;top:32px;width:60px}
#pun-info .rightStats{min-height:50px;border-left:1px solid #DDD;padding-left:10px;word-break:break-word;max-height:200px;overflow:auto;margin:10px 10px 10px 70px}
Bước 2
Thay đổi cấu trúc index_bodyACP - Display - Templates - Ganeral - Index_body
Tìm đoạn sau:
- Code:
<!-- BEGIN disable_viewonline -->
...
<!-- END disable_viewonline -->
- Code:
<!-- zzStars by baivong - devs.forumvi.com -->
<!-- BEGIN disable_viewonline -->
<div id="pun-info" class="main">
<div class="main-head">
<div class="page-title">
<h2>Tình hình diễn đàn</h2>
</div>
</div>
<div class="main-content">
<div class="starsItem">
<h3 class="starsTitle">
<!-- BEGIN switch_viewonline_link -->
<a href="{U_VIEWONLINE}" rel="nofollow">Ai đang trực tuyến?</a>
<!-- END switch_viewonline_link -->
<!-- BEGIN switch_viewonline_nolink -->Ai đang trực tuyến?
<!-- END switch_viewonline_nolink -->
</h3>
<div class="leftStats">
<img src="http://i48.servimg.com/u/f48/16/58/89/73/user_s10.png" />
</div>
<div class="rightStats">
<p>{TOTAL_USERS_ONLINE}
<br />{LOGGED_IN_USER_LIST} {L_ONLINE_USERS} {L_CONNECTED_MEMBERS}</p>
</div>
</div>
<div class="starsItem">
<h3 class="starsTitle">Sự kiện</h3>
<div class="leftStats">
<img src="http://i48.servimg.com/u/f48/16/58/89/73/openso10.png" />
</div>
<div class="rightStats">
<p>{NEWEST_USER}</p>
<p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
</div>
</div>
<div class="starsItem">
<h3 class="starsTitle">Thống kê</h3>
<div class="leftStats">
<img src="http://i48.servimg.com/u/f48/16/58/89/73/icon_s10.gif" />
</div>
<div class="rightStats">
<p>{RECORD_USERS}
<br />{TOTAL_POSTS}
<br />{TOTAL_USERS}</p>
</div>
</div>
<!-- BEGIN switch_chatbox_activate -->
<div class="starsItem">
<!-- BEGIN switch_chatbox_popup -->
<h3 id="chatbox_popup" class="starsTitle"></h3>
<script type="text/javascript">
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', 'Chatbox');
</script>
<!-- END switch_chatbox_popup -->
<div class="leftStats">
<img src="http://i48.servimg.com/u/f48/16/58/89/73/it_and10.png" />
</div>
<div class="rightStats">
<p>{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}</p>
</div>
</div>
<!-- END switch_chatbox_activate -->
</div>
</div>
<div class="main-box clearfix">
<p class="center">{GROUP_LEGEND}</p>
</div>
<!-- END disable_viewonline -->
Chú ý: Để thêm một khối thống kê vào mẫu trên bạn sử dụng cấu trúc sau:
- Code:
<div class="starsItem">
<h3 class="starsTitle">[Tiêu đề]</h3>
<div class="leftStats">
<img src="[Liên kết ảnh]" />
</div>
<div class="rightStats">
<p>[Nội dung]</p>
</div>
</div>
... và đặt nó bên dưới:
- Code:
<!-- END switch_chatbox_activate -->