Hướng dẫn Tạo Thống kê 2,4,6,8 cột cho xenforo 2016

966 1 3
kamchatka

kamchatka

MasterCorporal
Tham gia
14/04/2015
Bài viết
248
Được Like
162
Bài hướng dẫn này là hướng dẫn các bạn tùy biến tạo thành nhiều cột phong cách hơi giống của vnxf xíu .
yêu câu : Brivium - Modern Statistics 2.5.0
Sau khi đã có add-on và cài đặt các bạn vào Template -> ad_below_top_breadcrumb . tạo các hook name cho các cột
Mã: 
<xen:hook name="ad_below_top_breadcrumb" />

<xen:hook name="tvbd1" />
<xen:hook name="tvbd2" />
<xen:hook name="tvbd3" />
<xen:hook name="tvbd4" />
<xen:hook name="tvbd5" />
<xen:hook name="tvbd6" />
ở đây mình tạo 6 cột nên có có hook:name , các bạn có thể thêm ....
tiếp tục vào Applicatio -> list statistics - > creat new mordern statistic .
tạo các cột tương ứng.
sau khi đã có các cột thì :
thay toàn bộ : BRMS_ModernStatistic
PHP: 
<xen:if is="{$modernStatistic.tab_data} && {$modernStatistic.active}">
<xen:if hascontent="true">
<div class="thongkethuvien">
    <div<xen:comment>
        </xen:comment> class="BRMSContainer {$modernStatistic.displayStyle} {xen:if {$modernStatistic.control_position},'{$modernStatistic.control_position}','brmsLeftTabs'}"
        data-loadUrl="{xen:link 'full:brms-statistic/statistics.json'}"
        data-previewType="{$modernStatistic.preview_tooltip}"
        data-allowCusItemLimit="{xen:if '{$modernStatistic.itemLimit.enabled} && !{$modernStatistic.enable_cache}',1,0}"
        data-allowCusLayout="{xen:if {$modernStatistic.allow_change_layout},1,0}"
        data-modernStatisticId="{xen:if {$modernStatistic.modern_statistic_id},'{$modernStatistic.modern_statistic_id}',0}"
        data-navPosition="{xen:if {$modernStatistic.control_position},'{$modernStatistic.control_position}','brmsLeftTabs'}"
        data-useLimit="{xen:if '{$cachedStatistic.item_limit} && !{$modernStatistic.enable_cache}','{$cachedStatistic.item_limit}',''}"
        data-updateInterval="{xen:if '{$modernStatistic.auto_update} && !{$modernStatistic.enable_cache}','{$modernStatistic.auto_update}',0}" <xen:comment>
    </xen:comment>>
        <div class="brmsStatisticHeader">
            <div class="brmsConfigList">
                <xen:if is="{$modernStatistic.itemLimit.enabled} && !{$modernStatistic.enable_cache}">
                <div class="brmsConfigBtn brmsDropdownToggle brmsLimitList">
                    <a href="javascript:;" class="brmsIco brmsIcoConfig"></a>
                    <ul class="brmsDropdownMenu">
                        <xen:if is="{$modernStatistic.itemLimit.value}">
                            <xen:foreach loop="$modernStatistic.itemLimit.value" key="$key" value="$numberLimit">
                                <li {xen:if '{$key}==0','class="first"'}><a href="#" class="brmsNumberEntry" data-limit="{$numberLimit}">{$numberLimit} {xen:phrase BRMS_entries}</a></li>
                            </xen:foreach>
                        </xen:if>
                    </ul>
                </div>
                </xen:if>
                <xen:if is="{$modernStatistic.allow_manual_refresh}">
                <div class="brmsConfigBtn brmsRefresh"><a href="javascript:;" class="brmsIco brmsIcoRefresh"></a></div>
                </xen:if>
                <xen:if is="{$modernStatistic.allow_change_layout}">
                <div class="brmsConfigBtn brmsDropdownToggle brmsLayoutList last">
                    <a href="javascript:;" class="brmsIco brmsIcoLayout"></a>
                    <ul class="brmsDropdownMenu">
                        <li class="first"><a href="#" class="brmsLayoutChange" data-layout="brmsTopTabs">{xen:phrase top}</a></li>
                        <li><a href="#" class="brmsLayoutChange" data-layout="brmsLeftTabs">{xen:phrase left}</a></li>
                        <li><a href="#" class="brmsLayoutChange" data-layout="brmsRightTabs">{xen:phrase right}</a></li>
                    </ul>
                </div>
                </xen:if>
            </div>
        </div>
      
        <ul class="brmsTabNav">
                <xen:contentcheck>
                <xen:foreach loop="$modernStatistic.tabData" key="$key" value="$tab">
                    <xen:if is="{$tab.active} && ({$tab.type}!='my_threads'||{$visitor.user_id})">
                        <li class="brmlShow"><a class="brmsTabHandler_{$key}" href="javascript:;" data-content="brmsTabContent_{$key}" data-tabid="{$key}"><span>{xen:if '{$tab.defaultTitle}','{xen:raw $tab.defaultTitle}','{xen:raw $tab.title}'}</span></a></li>
                    </xen:if>
                </xen:foreach>
                </xen:contentcheck>
                <li class="brmsTabNavHiddenMenu last">
                    <div class="brmsTabNavHidden brmsDropdownToggle">
                        <a href="javascript:;" class="brmsIco brmsIcoList"></a>
                        <ul class="brmsDropdownMenu">
                            <xen:foreach loop="$modernStatistic.tabData" key="$key" value="$tab">
                                <xen:if is="{$tab.active} && ({$tab.type}!='my_threads'||{$visitor.user_id})">
                                    <li class="brmlShow"><a class="brmsTabHandler_{$key}" href="javascript:;" data-content="brmsTabContent_{$key}" data-tabid="{$key}"><span>{xen:if '{$tab.defaultTitle}','{xen:raw $tab.defaultTitle}','{xen:raw $tab.title}'}</span></a></li>
                                </xen:if>
                            </xen:foreach>
                        </ul>
                    </div>
                </li>
            </ul>
      
        <xen:foreach loop="$modernStatistic.tabData" key="$key" value="$tab">
            <xen:if is="{$tab.active} && ({$tab.type}!='my_threads'||{$visitor.user_id})">
            <div class="brmsTabContent brmsTabContent_{$key}" data-content="brmsTabContent_{$key}">
                <xen:if is="{$key}==0">
                    <xen:if is="{$firstTabHtml}">{xen:raw $firstTabHtml}<xen:else /><div class="brmsIcoLoader brmsIcoRefresh"></div><div class="clear"></div></xen:if>
                <xen:else />
                    <div class="brmsIcoLoader brmsIcoRefresh"></div><div class="clear"></div>
                </xen:if>
            </div>
            </xen:if>
        </xen:foreach>
        <div class="xenTooltip brmsToolTip"></div>
    </div>
    <xen:include template="preview_tooltip" />
</div>
</xen:if></xen:if>
<xen:edithint template="BRMS_ModernStatistic.css" />
và BRMS_ModernStatistic.css
PHP: 
@charset "UTF-8";

/* --- BRMS_ModernStatistic.css --- */

.BRMSContainer
{
    color: #333;
background-color: rgb(255, 255, 255);
margin: auto auto 13px;
-webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0; -khtml-border-top-left-radius: 0; border-top-left-radius: 0;
-webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0; -khtml-border-top-right-radius: 0; border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 3px; -moz-border-radius-bottomright: 3px; -khtml-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; -khtml-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
font: 13px/18px 'Roboto Condensed', sans-serif;
height: 100%;

}

.BRMSContainer .brmsStatisticHeader
{
    display: block;
margin: auto 10px !important;

}

.BRMSContainer.brmsLeftTabs .brmsStatisticHeader,
.BRMSContainer.brmsRightTabs .brmsStatisticHeader{
    float: left;
    width: 151px;
    position: relative;
    top: 0;
    z-index: 10;
}
.BRMSContainer.brmsRightTabs .brmsStatisticHeader{
    float: right;
}
.BRMSContainer.brmsTopTabs .brmsStatisticHeader{
    height: 30px;
    padding: 5px 0;
    border-bottom: 1px solid rgb(239, 242, 247);
}

.brmlShow{
    display:block;
}
.brmlHide{
    display:none;
}

.BRMSContainer .brmsConfigList{
    text-align: center;

}

.BRMSContainer.brmsLeftTabs .brmsConfigList,
.BRMSContainer.brmsRightTabs .brmsConfigList{
    margin-bottom:10px;
}
.BRMSContainer.brmsTopTabs .brmsConfigList{
    float:right;
    height: 30px;
}

.BRMSContainer .brmsConfigList .brmsConfigBtn
{
    padding: 7px 10px;
margin: 0;
display: inline-block;
cursor: pointer;
font-weight: bold;
line-height: 14px;
height: 14px;

}

.brmsConfigBtn:hover
{
    background: #f6f6f6;
}
.BRMSContainer.brmsRightTabs .brmsConfigList .brmsConfigBtn
{
    margin-right:0px;
    margin-left:5px;
}
.BRMSContainer .brmsConfigList .brmsConfigBtn.last
{
    margin-right:0;
}

.BRMSContainer ul.brmsTabNav
{
 
}

.BRMSContainer.brmsLeftTabs ul.brmsTabNav{
    border: 1px solid #DDD;
    border-right-width: 0;
}
.BRMSContainer.brmsRightTabs ul.brmsTabNav{
    border: 1px solid #DDD;
    border-left-width: 0;
}
.BRMSContainer.brmsTopTabs ul.brmsTabNav{
    height: 30px;
}
.BRMSContainer ul.brmsTabNav > li
{
    font-size: 1.11em;
margin: auto;
border: 0px solid #DDD;
list-style-type: none;
display: block;
 
}

.BRMSContainer ul.brmsTabNav > li:last-child
{
    border-bottom: none;
}

.BRMSContainer.brmsRightTabs ul.brmsTabNav > li{
    border-bottom-width: 1px;
    border-left-width: 1px;
}
.BRMSContainer.brmsLeftTabs ul.brmsTabNav > li{
    border-right-width: 1px;
    border-bottom-width: 1px;
}
.BRMSContainer.brmsTopTabs ul.brmsTabNav > li{
    border-bottom: none;
    float:left;
    position: relative;
}
.BRMSContainer ul.brmsTabNav > li.current
{
    color: black;
background-color: rgb(0, 170, 100);
 
}

.BRMSContainer.brmsLeftTabs ul.brmsTabNav > li.current
{
    z-index: 10;
}
.BRMSContainer.brmsRightTabs ul.brmsTabNav > li.current
{
    z-index: 10;
}
.BRMSContainer.brmsLeftTabs ul.brmsTabNav > li.first{
}
.BRMSContainer.brmsRightTabs ul.brmsTabNav > li.first{
}

.BRMSContainer.brmsLeftTabs ul.brmsTabNav > li.last
{
}
.BRMSContainer.brmsRightTabs ul.brmsTabNav > li.last
{
}
.BRMSContainer.brmsTopTabs ul.brmsTabNav > li.first{
 
}
.BRMSContainer.brmsTopTabs ul.brmsTabNav > li.last
{
}
.BRMSContainer.brmsTopTabs ul.brmsTabNav > li.current
{
    height: 30px;
}
.BRMSContainer.brmsLeftTabs ul.brmsTabNav > li.first.current,
.BRMSContainer.brmsRightTabs ul.brmsTabNav > li.first.current
{
    border-bottom-width: 1px;
}

.BRMSContainer.brmsTopTabs ul.brmsTabNav > li.first.current
{
    border-bottom: none;
}

.BRMSContainer ul.brmsTabNav > li a
{
    font-size: 14px;
font-family: 'Roboto',sans-serif;
color: #f0f7fc;
text-decoration: none;
margin: 0px;
outline: none;
display: block;
text-align: left;

}

.BRMSContainer ul.brmsTabNav > li.current a
{
}

.BRMSContainer ul.brmsTabNav > li a span{
    display:block;
}
.BRMSContainer ul.brmsTabNav > li a span.description
{
    float:left;
    display:block;
    font-weight:normal;
}
.BRMSContainer.brmsLeftTabs ul.brmsTabNav > li a,
.BRMSContainer.brmsRightTabs ul.brmsTabNav > li a
{
    padding: 15px 10px;
}

.BRMSContainer.brmsTopTabs ul.brmsTabNav > li a
{
    line-height: 30px;
    padding: 0 15px;
}
.BRMSContainer.brmsTopTabs ul.brmsTabNav > li a span.description{
    display:none;
}



.BRMSContainer .brmsTabContent
{
  padding: 10px;
}
.BRMSContainer.brmsLeftTabs .brmsTabContent,
.BRMSContainer.brmsRightTabs .brmsTabContent{
    margin-left: 165px;
    position: relative;
    z-index: 9;
    min-height:247px;
}
.BRMSContainer.brmsRightTabs .brmsTabContent{
    margin-right: 165px;
    margin-left: 0;
}
.BRMSContainer .brmsTabContent ol.brmsContentList{
    counter-reset: numList;

}
.BRMSContainer .brmsTabContent ol.brmsContentList li{
    padding: 0;
border-top: 1px solid rgb(239, 242, 247);
float: left;
width: 100%;

}

.BRMSContainer .brmsTabContent ol.brmsContentList li.first{
    border-top: 1px none black;

}
.BRMSContainer .itemContent{
    padding: 7px 0px;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
display: table;
table-layout: fixed;
word-wrap: normal;
width: 100%;

}
.BRMSContainer .itemContent:hover{
    background-color: #eff2f7;
padding-right: 6px;
padding-left: 6px;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;

}
.BRMSContainer .itemContent .listBlock {
    display: table-cell;
    vertical-align: middle;
}

.brmsIcoRefresh{
    background-image: url('http://vxf.vn/styles/vxf/BRMS_refresh.png');
}

.brmsIcoConfig,
.brmsIcoList,
.brmsIcoLayout
{
    background: url('http://vxf.vn/styles/vxf/vxf_images/vxf-images.png') no-repeat;
}

.BRMSContainer .itemContent .counter{
    display: none;

}

.BRMSContainer .itemContent .itemTitle{
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 65%;
}

.BRMSContainer .itemContent .itemTitle a
{
    color: rgb(56, 68, 95);
}

.BRMSContainer .itemContent .itemTitle a:hover
{
    color: rgb(56, 68, 91);
}

.BRMSContainer .itemUser .itemContent .itemTitle{
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 35%;
}
.BRMSContainer .itemContent .itemDetail {
        width: 150px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.BRMSContainer .itemContent .itemDetail.itemDate {
        width: 200px;
    max-width: 200px;
}

.BRMSContainer .itemContent .itemDetail,
.BRMSContainer .itemContent .itemDetail a{
    color: rgb(56, 68, 95);
    font-size: 14px;
    text-align: right;
}
.BRMSContainer .itemUser .itemContent .itemDetail,
.BRMSContainer .itemUser .itemContent .itemDetail a{
    font-size: 14px;
}
.BRMSContainer .itemContent .itemDetailDate a.paint {
    color: rgb(146, 165, 180);
}
.BRMSContainer .itemContent .itemDetailDate > span {
    font-size: 0.8em;
    color: rgb(200,200,200);
}

.BRMSContainer .itemUser .itemContent .itemDetailMain{
    text-align:right;
}
.BRMSContainer .itemUser .itemContent .itemDetailMain strong{
    font-weight: bold;
}
.BRMSContainer .itemContent .itemDetailName{
    text-align:right;
}
.BRMSContainer .itemContent .itemDetailName a.username span {
    font-weight: bold;
    font-size: 14px;
}

.BRMSContainer .newItemCounter {
    font-weight: bold;
font-size: 10px;
color: white;
background-color: #e03030;
padding: 0 3px;
-webkit-border-radius: 2px; -moz-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px;
position: absolute;
line-height: 16px;
min-width: 12px;
text-align: center;
white-space: nowrap;
word-wrap: normal;
right: 2px;
top: -10px;
z-index: 100;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0, 0.25); -moz-box-shadow: 2px 2px 5px rgba(0,0,0, 0.25); -khtml-box-shadow: 2px 2px 5px rgba(0,0,0, 0.25); box-shadow: 2px 2px 5px rgba(0,0,0, 0.25);
height: 16px;

}

.BRMSContainer .newItemCounter .totalNumber {

}

.BRMSContainer .newItemCounter .arrow {
    border: 5px solid transparent;
border-top-color: #e03030;
border-bottom: 1px none black;
position: absolute;
right: 3px;
line-height: 0px;
_display: none;
bottom: -4px;
z-index: 100;
width: 0px;
height: 0px;

}

.BRMSContainer .brmsNewItem .itemContent{
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;

}

.BRMSContainer .brmsNewItem .itemContent:hover {
    background: #FFEAE7 !important;
}

.BRMSContainer .brmsSticky .itemContent{
    color: rgb(238, 62, 87);
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;

}

.BRMSContainer .brmsSticky .itemContent:hover {
    background: #fff1ba !important;
}

.clear{
    clear:both;
}
.BRMSContainer .xenTooltip{
    position: absolute;
    margin: -50px 0px 0px 60px;
    z-index:999;
}


.BRMSContainer .brmsRefresh{
 
}

.brmsIco{
    height:14px;
    width:14px;
    display:block;
}
.brmsDropdownToggle{
    position:relative;
}
.brmsDropdownMenu{
    font-size: 14px;
background-color: #FFF;
margin: 0px 0 0;
display: none;
position: absolute;
z-index: 999;
text-align: left;
top: 100%;
left: -1px;
float: left;
min-width: 160px;
background-clip: padding-box;

}
.brmsDropdownMenu li{
    color: rgb(79, 92, 119);
background-color: #FAFAFA;
border: 1px solid #E4E4E4;
border-top: 1px none black;

}
.brmsDropdownMenu li.current,
.brmsDropdownMenu li:hover{
    background-color: #f6f6f6;

}

.brmsDropdownMenu.left{
    left: 99%;
    top: -1px;
}
.brmsDropdownMenu.right{
    right: 99%;
    top: -1px;
    left: -160px;
}
.brmsDropdownMenu.edge{
    right: -1px;
    left: -160px;
}

.brmsDropdownMenu li.first
{
    border: 1px solid #E4E4E4;
}
.brmsDropdownMenu a {
    font-size: 12px;
color: #6A6A6A;
padding: 8px 10px;
display: block;
clear: both;
font-weight: normal;
white-space: nowrap;

}
.BRMSContainer.brmsLeftTabs .brmsTabNavHidden .brmsDropdownMenu{
    top: -1px;
    left: 99%;
}
.BRMSContainer.brmsRightTabs .brmsTabNavHidden .brmsDropdownMenu{
    right: 99%;
    top: -1px;
    left: -160px;
}
.BRMSContainer ul.brmsTabNav > li.brmsTabNavHiddenMenu {
    display:none;
}

.brmsTabNavHidden li{
    display:none;
}
.brmsTabNavHidden > a {
    text-align:center;
}
.BRMSContainer.brmsTopTabs .brmsTabNavHidden {
    height:30px;
    text-align:center;
}
.BRMSContainer.brmsTopTabs .brmsTabNavHidden > a {
    height: 100%;
    text-align:center;
}


.brmsDropdownToggle:hover .brmsDropdownMenu{
    display:block;
}

.brmsIcoRefresh{
    width: 14px;
    height: 16px;
}

.brmsConfigBtn:hover .brmsIcoRefresh
{
    background:url('http://vxf.vn/styles/vxf/BRMS_refresh.gif') center center no-repeat;
}
.brmsIcoConfig{
    background-position:center -219px;
}
.brmsIcoList{
    background-position: center -302px;
}
.brmsIcoLayout{
    background-position: center -341px;
}
.brmsIcoLoader{
    background:url('styles/brivium/ModernStatistic/loader7.gif') no-repeat center center;
    width:220px;
    height:19px;
    display:block;
    margin: auto;
}

.BRMSContainer .itemContent .itemDetail.itemDetailDate
{
    display: none !important;
}

.thongkethuvien {
  width: 50%;
  float: left;
  max-height: 652px;
  min-height: 352px;
  overflow: hidden;

}

.thongkethuvien:last-child {
clear: both;
}

@media (max-width:800px)
{
 
}

@media (max-width:610px)
{
.Responsive .thongkethuvien {
  width: 100%;
  float: none;
  max-height: 352px;
  min-height: 352px;
  overflow: hidden;
                 }
}

@media (max-width:480px)
{
 
}
P/s : trong đó
.thongkethuvien {
width: 50%; <== tùy chỉnh độ ngang của thống kê
float: left;
max-height: 652px; <== độ dài để hiện thị các hàng 352px thì hiển thị 8 hàng
min-height: 352px;
overflow: hidden;

}
và đây là video của tuts
chúc các bạn thành công tút này mình rinh bên mamcongnghe , lâu rồi có sửa lại 1 xíu hehe
 
Bài viết liên quan
Làm thế nào đẻ tối ưu mấy cái này xanh hết trên Xenforo? bởi gameboiz1806,
Làm thế nào để gửi email cho users về các thread mới 1 tuần một lần? bởi gameboiz1806,
AE biết CDN nào mà ae xenforo hay sử dụng không? bởi gameboiz1806,
Làm thế nào để tinh giảm code CSS và Javascript trên xenforo? bởi gameboiz1806,
Làm như thế nào để chèn code vào thẻ <head> trên xenforo vậy ạ? bởi gameboiz1806,
cho mình hỏi về account của xenforo bởi PIIIII,
Bài viết mới
Làm thế nào đẻ tối ưu mấy cái này xanh hết trên Xenforo? bởi gameboiz1806,
Ở footer của mình bị hiển thị như này. Không biết làm ntn để ẩn được? bởi gameboiz1806,
File Attachment nằm ở đâu trên fpt hosting vậy cả nhà nhỉ bởi bloghocpiano,
Mình đã cài Litespeed nhưng LS không nhận bởi gameboiz1806,
Làm thế nào để gửi email cho users về các thread mới 1 tuần một lần? bởi gameboiz1806,
gặp sự cố khi upgrade bởi sanhpv,
PVS

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,829
Được Like
12,687
thanks bạn :D
 
Bạn phải đăng nhập hoặc đăng ký để bình luận.
Người đăng Chủ đề tương tự Diễn đàn Trả lời Ngày đăng
H Help Hướng dẫn tạo thông báo giống vnxf Tips and Guides 0
secpol Tutorial 2x Tạo thống kê bài viết không cần addon Tips and Guides 8
H Help Hỏi cách tạo thông báo như trong hình Tips and Guides 1
R Help Tạo popup thông báo lỗi status thành viên giống VNXF Tips and Guides 5
CNTT01 Hướng dẫn Tạo thông báo trên đầu mỗi bài viết Xenforo Tips and Guides 3

Chủ đề tương tự


Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mobile/Zalo: 0906081284

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Xử lý sự cố (Troubleshooting)

Texlink

Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom