dcstylexf
Major
- Tham gia
- 24/03/2015
- Bài viết
- 2,005
- Được Like
- 1,615
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://mamcongnghe.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
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 Ý:
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:
Rồi thay toàn bộ template BRMS_ModernStatistic.css thành đoạn sau
Thế là ok!
Chúc các bạn thành công!
Nguồn: http://mamcongnghe.com/threads/chia-4-cot-modern-statistics-giong-mamcongnghe-com.1345/
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://mamcongnghe.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" />
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.
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" />
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)
{
}
Lưu ý nhỏ:
Vì mỗi diễn đàn có 1 độ rộng khác nhau nên các bạn sửa chỗ .cot {width: 48.50%} lại nhé
Chúc các bạn thành công!
Nguồn: http://mamcongnghe.com/threads/chia-4-cot-modern-statistics-giong-mamcongnghe-com.1345/
Bài viết liên quan