[TUTs] Thống kê bài viết 5 cột

  Bài viết hay nhất1
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.

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



Hiển thị trên Desktop

Mobile và Tablet:

Hiển thị trên Mobile


Hiển thị trên 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


Kích hoạt cột widget trái


Xắp xếp các widget theo thứ tự


Tùy chỉnh Recent topics


Tùy chỉnh Top posters

Nguồn


Zzbaivong (devs.forumvi.com)
  Bài viết hay nhất176
http://devs.forumvi.com/t28-tips-luu-y-khi-sua-templates?showpost=p106
  Bài viết hay nhất177
Xin hỏi là dùng cho punbb hay phpbb vậy các bác. Ở bước 1 là thêm vào css có sẵn hay xóa toàn bộ rồi thêm vào vì mình không xóa mà thêm vào thì báo lỗi css quá dài
  Bài viết hay nhất178
Thành quả của mình đây. không biết lỗi chỗ nào. http://thongtintructuyen.forumvi.com
  Bài viết hay nhất179

Aspira wrote:Xin hỏi là dùng cho punbb hay phpbb vậy các bác. Ở bước 1 là thêm vào css có sẵn hay xóa toàn bộ rồi thêm vào vì mình không xóa mà thêm vào thì báo lỗi css quá dài

dành cho punbb nha bạn. nếu css dài quá thì có thể optimize code, đương nhiên chú ý lưu code cũ lại cho dễ edit
  Bài viết hay nhất180
Cảm ơn bác, mình làm được rồi
You cannot reply to topics in this forum