Demo:

[You must be registered and logged in to see this image.]

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

Hướng dẫn:


Bước 1: Thêm vào CSS
ACP - Display - Pictures and Colors - Colors - CSS Stylesheet:

Code:

/* [FMvi.Org] Thống kê tình hình diễn đàn*/
.leftStats{float:left;margin-left:-71px;vertical-align:middle;width:60px}
.rightStats{min-height: 50px;border-left:2px solid #CFC9C9;padding-left:10px;width:858px;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;text-shadow:1px 1px 1px #000;padding:5px}

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:

<!-- 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">
        <p 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 -->
        </p>
        <div class="rightStats">
            <div class="leftStats">
              <img src="http://i48.servimg.com/u/f48/16/58/89/73/user_s10.png" />
            </div>
            <p>{TOTAL_USERS_ONLINE}
              <br />{LOGGED_IN_USER_LIST} {L_ONLINE_USERS} {L_CONNECTED_MEMBERS}</p>
        </div>
      </div>
      <div class="starsItem">
        <p class="starsTitle">Sự kiện</p>
        <div class="rightStats">
            <div class="leftStats">
              <img src="http://i48.servimg.com/u/f48/16/58/89/73/openso10.png" />
            </div>
            <p>{NEWEST_USER}</p>
            <p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
        </div>
      </div>
      <div class="starsItem">
        <p class="starsTitle">Thống kê</p>
        <div class="rightStats">
            <div class="leftStats">
              <img src="http://i48.servimg.com/u/f48/16/58/89/73/icon_s10.gif" />
            </div>
            <p>{RECORD_USERS}
              <br />{TOTAL_POSTS}
              <br />{TOTAL_USERS}</p>
        </div>
      </div>
      <!-- BEGIN switch_chatbox_activate -->
      <div class="starsItem">
        <!-- BEGIN switch_chatbox_popup -->
        <p id="chatbox_popup" class="starsTitle"></p>
        <script type="text/javascript">
            insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', 'Chatbox');
        </script>
        <!-- END switch_chatbox_popup -->
        <div class="rightStats">
            <div class="leftStats">
              <img src="http://i48.servimg.com/u/f48/16/58/89/73/it_and10.png" />
            </div>
            <p>{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}</p>
        </div>
      </div>
      <!-- END switch_chatbox_activate -->
  </div>
</div>
<div class="main-box clearfix">
  <p align="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">
        <p class="starsTitle">[Tiêu đề]</p>
        <div class="rightStats">
            <div class="leftStats">
              <img src="[Liên kết ảnh]" />
            </div>
            <p>[Nội dung]</p>
        </div>
      </div>

... và đặt nó bên dưới:

Code:

<!-- END switch_chatbox_activate -->