Hướng dẫn - Chia 4 cột Modern Statistics giống [LINK FORBIDDEN].Com

datdaik000 · 24/5/15

Chào các bạn, cái này cũng không phải mới mẻ gì, đã có nhiều người hỏi rồi. Tuy nhiên thì hầu như các bài trả lời đều không rõ ràng, qua loa, không được chi tiết cho lắm. Vậy nên hôm nay mình mạn phép được hướng dẫn lại các bạn cho chi tiết hơn!

Yêu cầu
- Add-on Brivium - Modern Statistics 2.2.x trở lên

Demo
Đầu tiên mời các bạn xem qua demo: http://**[LINK FORBIDDEN]**.com

Thực hiện
Giờ bắt đầu vào làm nhé!
Đầu tiên các bạn phải xác định vị trí muốn thêm add-on này. Ở hình là template ad_below_top_breadcrumb. Sau đó các bạn vào template mong muốn rồi thêm đoạn code này ra sau

Mã:

<xen:hook name="cot1" />
<xen:hook name="cot2" />
<xen:hook name="cot3" />
<xen:hook name="cot4" />

Cụ thể nó sẽ là như thế này nhé

Save lại. Sau đó các bạn chú ý đoạn này "cot1","cot2","cot3","cot4" nhé! Đó là bước tiếp theo đấy

Các bạn vào Applications -> Modern Statistics -> List Statistics rồi thêm 4 Statistics đặt tên lần lượt là Cot1,Cot2,Cot3,Cot4.

- Lưu Ý:

Phần Position các bạn điền lần lượt: cot1,cot2,... cho mỗi statistics nhé ( giống đoạn code vừa sửa )
Ở tab Display This Statistic While..., phần Template Title các bạn điền: forum_list
Ở tab Tab Data các bạn chỉ chọn 1 tab thôi nhé! Mỗi cột 1 tab khác nhau.

Nó sẽ ra như thế này

Như vậy là hoàn thành 90% rồi đó. Cuối cùng các bạn chỉ cần sửa template là xong.
Các bạn thay toàn bộ template BRMS_ModernStatistic thành đoạn sau:

Mã:

<xen:if is="{$modernStatistic.tab_data} && {$modernStatistic.active}">
<xen:if hascontent="true">
<div class="cot">
    <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" />

Rồi thay toàn bộ template BRMS_ModernStatistic.css thành đoạn sau

Mã:

@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: #eff2f7;

}
.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: rgb(36, 111, 175);
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;
}

.cot {
  width: 48.50%;
  float: left;
  max-height: 352px;
  min-height: 352px;
  overflow: hidden;

}

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

@media (max-width:800px)
{

}

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

@media (max-width:480px)
{

}

Thế là ok!

Chúc các bạn thành công!

Nguồn: http://**[LINK FORBIDDEN]**.com/thr...atistics-giong-**[LINK FORBIDDEN]**-com.1345/

Hướng dẫn - Chia 4 cột Modern Statistics giống [LINK FORBIDDEN].Com

datdaik000 D.C Style

Chia sẻ trang này

Text Links

Textlink

Thông báo mới nhất

Hướng dẫn - Chia 4 cột Modern Statistics giống **[LINK FORBIDDEN]**.Com

datdaik000 D.C Style

Chia sẻ trang này

Hướng dẫn - Chia 4 cột Modern Statistics giống [LINK FORBIDDEN].Com