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

  Bài viết hay nhất1
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ất2
chuẩn luôn :)
  Bài viết hay nhất3
sao nó cứ bị lệch sang phải nhỉ demo : http://tnhketnoi.probb.org
  Bài viết hay nhất4
thử xoá cái css của last củ ir xem sao coi chừng còn dư 1 css nào đoá
  Bài viết hay nhất5
Code:
.pun table.table td {
background: none !important;
border: none;
border-top: 1px solid #CCC;
padding: 10px 5px 5px 45px;
}
tình hình là trong 1 thẻ style nào đó của bạn có đoạn này
cách 1, xóa dòng padding: 10px 5px 5px 45px; đi
cách 2, đưa cái dòng ở cách 1 về 0px hết
(mình view và thấy, nó bảo trong index:42 gì đó chứ k có trong css)
nếu k tìm ra thì bỏ cái này vào css thử xem
Code:

.pun table.table td {
background: none !important;
border: none;
border-top: 1px solid #CCC;
padding: 0px 0px 0px 0px;
}
  Bài viết hay nhất6

anhoang_qn wrote:
Code:
.pun table.table td {
background: none !important;
border: none;
border-top: 1px solid #CCC;
padding: 10px 5px 5px 45px;
}
tình hình là trong 1 thẻ style nào đó của bạn có đoạn này
cách 1, xóa dòng padding: 10px 5px 5px 45px; đi
cách 2, đưa cái dòng ở cách 1 về 0px hết
(mình view và thấy, nó bảo trong index:42 gì đó chứ k có trong css)
nếu k tìm ra thì bỏ cái này vào css thử xem
Code:

.pun table.table td {
background: none !important;
border: none;
border-top: 1px solid #CCC;
padding: 0px 0px 0px 0px;
}
ko có tác dụng
  Bài viết hay nhất7
k tìm ra .pun table.table td luôn à
mình view ra thấy, xóa cái dòng đó, và đây là kết quả nhé
http://i56.servimg.com/u/f56/18/62/39/57/untitl10.jpg
  Bài viết hay nhất8
Có hàng ngon :3
  Bài viết hay nhất9

anhoang_qn wrote:k tìm ra .pun table.table td luôn à
mình view ra thấy, xóa cái dòng đó, và đây là kết quả nhé
http://i56.servimg.com/u/f56/18/62/39/57/untitl10.jpg
tìm mãi thấy đâu
The author of this message was banned from the forum - See the message
  Bài viết hay nhất11

mousety wrote:vào index_box mà tìm !
uhm người biết có khác bảo tìm css kiếm đến 10 ngàn nắm
f nửa củng ko thấy cám ơn nha
  Bài viết hay nhất12
nó dưa dấu này < ở đâu nhỉ
The author of this message was banned from the forum - See the message
  Bài viết hay nhất14

ReuPhong wrote:
mousety wrote:vào index_box mà tìm !
uhm người biết có khác bảo tìm css kiếm đến 10 ngàn nắm
f nửa củng ko thấy cám ơn nha
mình có bảo nó nằm trong css đâu nhĩ, bạn k hiểu nằm trong css và mã css khác nhau chổ nào à, mình bảo là nó k nằm trong css, mà nằm ở index 42 gì đó, đọc kĩ hộ mình, nhưng rốt cuộc thì bạn vẫn chỉnh sửa mã css đấy thôi :D
  Bài viết hay nhất15
Méo sẽ dùng cái này cho skin dự trữ :3 Skin đang xài của méo lỡ dùng last 3 cột méo edit rồi
  Bài viết hay nhất16
mọi người xem giúp mình, sao last bị lệch vào bên trong vậy
demo: http://maikhongquen.ace.st/
  Bài viết hay nhất17
minhphong_9x wrote:mọi người xem giúp mình, sao last bị lệch vào bên trong vậy
demo: http://maikhongquen.ace.st/
do đoạn CSS này :
Code:
.pun table.table td {
background: none !important;
border: none;
border-top: 1px solid #CCC;
padding: 10px 5px 5px 45px;
}
  Bài viết hay nhất18
ligerv wrote:
minhphong_9x wrote:mọi người xem giúp mình, sao last bị lệch vào bên trong vậy
demo: http://maikhongquen.ace.st/
do đoạn CSS này :
Code:
.pun table.table td {
background: none !important;
border: none;
border-top: 1px solid #CCC;
padding: 10px 5px 5px 45px;
}
Cảm ơn. Mình đã sửa css đó rồi.
  Bài viết hay nhất19
sao mình không làm được hích hỏng hết rồi
  Bài viết hay nhất20
ngocchien12 wrote:sao mình không làm được hích hỏng hết rồi
lần tới hỏng gì thì cho xem demo onl nha bạn, chứ như vầy chịu á
  Bài viết hay nhất21
em là không được đẹp như vậy mà nó ra thế nì nì ái giúp em với
nói thật là em tập thôi đừng ai chửi em ngu nha
  Bài viết hay nhất22
ngocchien12 wrote:em là không được đẹp như vậy mà nó ra thế nì nì ái giúp em với
nói thật là em tập thôi đừng ai chửi em ngu nha
đưa cái link forum bạn ấy
vs lại hình như cái này lộn xộn giống trang portal, sắp xếm wideget chưa vậy
  Bài viết hay nhất23
demon online dj
  Bài viết hay nhất24
http://newgaigoi.forumvi.com/ đây anh ơi
  Bài viết hay nhất25
sắp xếm wideget là gì vậy anh :D
You cannot reply to topics in this forum