[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)
The author of this message was banned from the forum - See the message
  Bài viết hay nhất102
sao em add đúng mà nó k hiện ra ta ?

Link : http://s2touchvn.forumvi.com/

add không thiếu bước nào hết ??
  Bài viết hay nhất103

AnChina wrote:sao em add đúng mà nó k hiện ra ta ?

Link : http://s2touchvn.forumvi.com/

add không thiếu bước nào hết ??

Ẩn nó mất tiêu rồi, thì làm sao mà hiện. Vào css tìm đoạn code này.

Code:
#dulieupostter,#dulieutip,#left,#sapxepdulieu,#textarea_content dt,#tooltip .header,.tipchuthich{display:none}

Xóa đi #left là được.

Còn nếu không tìm được thì thêm đoạn này vào css.

Code:
#left{display:block!important}
  Bài viết hay nhất104
Các bác giúp mình với, mình muốn recent topic hiện 15 bài viết thì làm cách nào:
  Bài viết hay nhất105

Tùy chỉnh recent topics


Thay số 12 = 15
  Bài viết hay nhất106
Còn phải chỉnh trong CSS nữa

Tìm
Code:
#left ul{height:114px}

Sửa 114 thành độ cao cho phù hợp, hiện 15 bài thì sửa thành 150 là được
  Bài viết hay nhất107
last này áp dụng cho phpbb3 thì làm sao ạ ?
  Bài viết hay nhất108

AnChina wrote:last này áp dụng cho phpbb3 thì làm sao ạ ?

Làm như bình thường thôi. All ver mà.
  Bài viết hay nhất109
Em làm bb3 nó có hiện đâu anh ?
  Bài viết hay nhất110

AnChina wrote:Em làm bb3 nó có hiện đâu anh 

Đưa anh cái link demo xem cái. Trước a dùng bb3 Xài dc mà.
  Bài viết hay nhất111
demo đây anh : http://gamelau.umbb.net/
  Bài viết hay nhất112

AnChina wrote:demo đây anh : http://gamelau.umbb.net/

Em làm bước 4 và xếp widget đúng chưa.
  Bài viết hay nhất113
em làm hết các bước rồi anh à
  Bài viết hay nhất114

AnChina wrote:em làm hết các bước rồi anh à

Vậy à, tại anh xem thấy có vẻ em chưa kích hoạt widget cho nên nó ko hiển thị là đúng rồi. Nếu ko dc thì inbox anh cái nick anh vào xem cho.
  Bài viết hay nhất115
ngon quá ^^
  Bài viết hay nhất116
Sau khi em mod theo ad thì ngon lành nhưng vào đổi skin theo hitskin của Forumvi thì nó lại ra thế này
Ad cho em hỏi có cách nào khắc phục không?
  Bài viết hay nhất117
Không, vô phương cứu chữa :v
  Bài viết hay nhất118
ơ không có cách nào thật ạ =.=
  Bài viết hay nhất119

khongcoten wrote:ơ không có cách nào thật ạ =.=

Ngay cả cái link forum bạn cũng không đưa lên. Thì người ta làm sao bik forum bị lỗi gì mà sửa. Chắc phải kêu huynh vong thêm cái nội quy này nữa quá. Về sau ai giống vậy thì khỏi giúp làm gì cho mất công.
  Bài viết hay nhất120
link đây http://testtest.forumvi.com/, hôm đó vội quá quên mất, mọi ng thông cảm phát. =.=
  Bài viết hay nhất121
Anh ơi bước 3 có nghĩa là mình vào các temp như anh nói ,xóa hết code trong đó đi rồi copy mấy code này vào phải không ạ ?
  Bài viết hay nhất122

ChauLe3 wrote:Anh ơi bước 3 có nghĩa là mình vào các temp như anh nói ,xóa hết code trong đó đi rồi copy mấy code này vào phải không ạ ?

uh, thay thế hết mấy temp đó bằng mấy code tương ứng
  Bài viết hay nhất123
Anh ơi ở ảnh cuối bên em không hiện dòng scrolling progression . cái khung em làm cũng ko hiện đầy đủ nữa. Anh xem giúp xem em bị lỗi nào
Demo: http://studyphysics.forumvi.com/
  Bài viết hay nhất124
em nhắc chụy ròi mà hẻm nghe ^^, nếu chị muốn thì phải làm temp mặc định thôi, cái theme này có thể nói là không thêm bới gì được :3
  Bài viết hay nhất125
@ChauLe3 k cần cái dòng đó cũng k sao, mà demo thì k có cái last nào 5 cột

@Kel k phải là k thêm bớt chi được mà vì bạn k biết sửa như thế nào cho đúng thôi :)
You cannot reply to topics in this forum