[TUTs] Thống kê tình hình diễn đàn cho punBB

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 CSS
ACP - 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_body
ACP - Display - Templates - Ganeral - Index_body
Tìm đoạn sau:

Code:

<!-- BEGIN disable_viewonline -->
...
<!-- END disable_viewonline -->

Và thay thế nó bằng:

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 -->

Nguồn

Zzbaivong (devs.forumvi.com)

Của devs mà :v hèn gì skin của devs có :3