[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ất51
Tìm trong CSS:
Code:
#left #recent_topics .lastRight{width:20%!important}
Sửa lại thành:
Code:
#left #recent_topics .lastRight{width:auto!important;overflow:visible}
  Bài viết hay nhất52
Help : làm sao để xóa 2 cột "Tích cực nhất tuần" vs "Lượt xem nhiều nhất" .để được như hình này vậy anh
  Bài viết hay nhất53
Demo 4rum: http://testing123.coolbb.net/
Sao em làm lasttopic không hiện -_-
Acc test: Yasuo / 147qaz
  Bài viết hay nhất54
À, cái skin của bạn @Yasuo người Share không nói à :v Nó ẩn quảng cáo cho bạn nhưng mà tác dụng phụ là không cài được Last Topic nhé :v Đừng làm cái mặt ngông "-_-" =)) Thân~
  Bài viết hay nhất55
KirigayaKazuto wrote:À, cái skin của bạn @Yasuo người Share không nói à :v Nó ẩn quảng cáo cho bạn nhưng mà tác dụng phụ là không cài được Last Topic nhé :v Đừng làm cái mặt ngông "-_-" =)) Thân~
Thế bác biết fix cái đó k
Em mò mãi cái đó mà k ra
  Bài viết hay nhất56
Ai làm skin liên hệ với người đó ~ Desu!
  Bài viết hay nhất57
Yasuo wrote:Demo 4rum: http://testing123.coolbb.net/
Sao em làm lasttopic không hiện -_-
Acc test: Yasuo / 147qaz
skin bạn lổi quá chừng
  Bài viết hay nhất58
Làm đúng và đủ các bước thì sẽ hiện. 8|
Đôi khi bạn làm đúng mà vẫn không hiện, đó là do bạn tưởng bạn làm đúng thôi. ^_^
Ps: Mình cũng không đến nỗi dễ dãi với ai rip code rồi nhờ check lỗi. (^^^)
  Bài viết hay nhất59
Zzbaivong wrote:Làm đúng và đủ các bước thì sẽ hiện. 8|
Đôi khi bạn làm đúng mà vẫn không hiện, đó là do bạn tưởng bạn làm đúng thôi. ^_^
Ps: Mình cũng không đến nỗi dễ dãi với ai rip code rồi nhờ check lỗi. (^^^)
Cái này là skin bạn mình cho
Nên cũng k biết là skin rip
Nếu bạn muốn thì mình có thể gỡ ngay :)
  Bài viết hay nhất60
Không quan trọng, rip rồi mình cũng chịu, không làm được gì hơn. -_-
  Bài viết hay nhất61
http://ilolvn.123.st/ ~~! bị sao kì dọ :(
  Bài viết hay nhất62
Bạn chèn đúng chưa, để yahoo mình qua giúp cho
  Bài viết hay nhất63
ilolvn wrote:http://ilolvn.123.st/ ~~! bị sao kì dọ :(

Vào overall_header tìm xem có đoạn code sau ko nếu có thì xóa đi:
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>
  Bài viết hay nhất64
Mình chén đúng theo hướng dẫn rồi :(
  Bài viết hay nhất65
ý mình là bạn vào ào overall_header tìm xem có đoạn code sau ko nếu có thì xóa đi:
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>

code đó ở head sẽ gây lỗi khi chèn lastopic
  Bài viết hay nhất66
Mình xoá rồi
  Bài viết hay nhất67
Thế đổi màu chữ các số 1,2,3 ... thì thay chỗ nào trong CSS. Tìm mãi không ra :(
  Bài viết hay nhất68
@^: Tìm đoạn này thay background:
Code:
#left li:nth-child(1):before, #left li:nth-child(1):after
  Bài viết hay nhất69
ilolvn wrote:http://ilolvn.123.st/ ~~! bị sao kì dọ :(
Giúp mình với
  Bài viết hay nhất70
Tình hinh là forum mình bị lỗi ko hiện tooltip khi rê chuột vào, trước đó bẫn hiện bt.
www.diendanboom.com
Ai rành vào xem giúp mình nhé :)
  Bài viết hay nhất71
thấy vẫn lên như bình thường
  Bài viết hay nhất72
Lên nhưng ko có cái khung í méo
  Bài viết hay nhất73
Copy thôi cũng để thiếu CSS :v
  Bài viết hay nhất74
Demo http://xepgach.forum-viet.com

Mình bị lỗi là Cái chỗ tích cực nhất tuần/Tích cực nhất tháng ấy, nó không hiện j hết, phải click vào cái khung xổ xuống chọn tích cực nhất tháng nó mới hiện lên bình thường, refresh lại trang thì lại không hiện như cũ.

Cái này là lỗi hay tại Cái thống kê 5 cột nó vốn là như vậy ?




Lỡ hỏi rồi hỏi luôn 1 vấn đề là Chỗ bài viết mới nhất, giờ mình muốn nó không hiện các chủ đề mới trong 4rum con nào đó (ví dụ f1) thì có thể làm như thế nào ?
  Bài viết hay nhất75
Vào CSS, tìm và xóa:
Code:
#active_starters, #most_active, #pun-visit, #users_month, #users_week {
    display: none;
}
You cannot reply to topics in this forum