xF1 Add-on Giao diện phẳng cho addon Brivium - Modern Statistics

  • Bạn không tìm được Add-on hay Style xenForo 1 trên hệ thống xFv2 hiện tại ?
    Đăng bài yêu cầu ngay !
  • Can't find your Add-on or Style on xFv2 ?
    Request now !

datdaik000

A boy learn to be a man
Staff member
7/2/18
64
82
18
Nam Định
dcforo.com
Chắc hẳn các bạn đa số đều đang sử dụng addon này cho diễn đàn XenForo của mình. Đây thực sự là một addon thống kê cực tốt, nếu bạn chưa dùng thì nên thử trải nghiệm nó [DOWNLOAD]. Tuy vậy, giao diện mặc định của addon này lại không được đẹp cho lắm, vậy nên mình sẽ hướng dẫn các bạn chỉnh lại giao diện cho addon cho đẹp và hợp với xu hướng phẳng hóa hiện tại !

Demo

Demo.png

Hướng dẫn
Đầu tiên các bạn hãy tải file đính kèm về và giải nén, upload lên host nhé. Sau đó vào template BRMS_ModernStatistic.css thay toàn bộ bằng code sau
CSS:
.BRMSContainer
{
    @property "BRMSContainer";
    color: #333;
    background-color: rgb(255, 255, 255);
    margin: auto auto 13px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    font: 13px/18px 'Roboto', sans-serif;
    height: 100%;
    @property "/BRMSContainer";
}

.BRMSContainer .brmsStatisticHeader
{
    @property "brmsStatisticHeader";
    display: block;
    margin: auto 10px !important;
    @property "/brmsStatisticHeader";
}

.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{
    @property "brmsConfigList";
    text-align: center;
    @property "/brmsConfigList";
}

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

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

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

.BRMSContainer ul.brmsTabNav
{
    @property "brmsTabNav";

    @property "/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
{
    @property "brmsTabOuter";
    font-size: 1.11em;
    margin: auto;
    border: 0px solid #DDD;
    list-style-type: none;
    display: block;
    @property "/brmsTabOuter";   
}
.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
{
    @property "brmsTabLinkSelected";
    color: black;
    background-color: #eff2f7;
    @property "/brmsTabLinkSelected";   
}
.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
{
    @property "brmsTabLink";
    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;
    @property "/brmsTabLink";
}
.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
{
    @property "brmsTabContent";
    padding: 10px;
    display: none;
    @property "/brmsTabContent";
}
.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{
    @property "brmsContentList";
    counter-reset: numList;
    @property "/brmsContentList";
}
.BRMSContainer .brmsTabContent ol.brmsContentList li{
    @property "brmsContentItemOuter";
    padding: 0;
    border-top: 1px solid rgb(239, 242, 247);
    float: left;
    width: 100%;
    @property "/brmsContentItemOuter";
}

.BRMSContainer .brmsTabContent ol.brmsContentList li.first{
    @property "brmsContentItemOuterFirst";
    border-top: 1px none black;
    @property "/brmsContentItemOuterFirst";
}
.BRMSContainer .itemContent{
    @property "brmsContentItem";
    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%;
    @property "/brmsContentItem";
}
.BRMSContainer .itemContent:hover{
    @property "brmsContentItemHover";
    background-color: #eff2f7;
    padding-right: 6px;
    padding-left: 6px;
    box-sizing: border-box;
    @property "/brmsContentItemHover";
}
.BRMSContainer .itemContent .listBlock {
    display: table-cell;
    vertical-align: middle;
}

.brmsIcoRefresh{
        background-image: url('styles/brivium/ModernStatistic/BRMS_refresh.png');
}

.brmsIcoConfig,
.brmsIcoList,
.brmsIcoLayout{
    background-image: url('styles/brivium/ModernStatistic/BRMS_images.png');
}

.BRMSContainer .itemContent .counter{
    @property "brsmCounter";
    display: none;
    @property "/brsmCounter";
}

.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: @mutedTextColor;
}
.BRMSContainer .itemContent .itemDetailDate > span {
    font-size: 0.8em;
    color: @faintTextColor;
}

.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 .itemContent .itemSubDetail.alleft{
    text-align: left;
}

.BRMSContainer .newItemCounter {
    @property "brsmsNewItemCounter";
    font-weight: bold;
    font-size: 10px;
    color: white;
    background-color: #e03030;
    padding: 0 3px;
    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;
    box-shadow: 2px 2px 5px rgba(0,0,0, 0.25);
    height: 16px;
    @property "/brsmsNewItemCounter";
}

.BRMSContainer .newItemCounter .totalNumber {

}

.BRMSContainer .newItemCounter .arrow {
    @property "brsmsNewItemCounterArrow";
    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;
    @property "/brsmsNewItemCounterArrow";
}

.BRMSContainer .brmsNewItem .itemContent{
    @property "brmsContentItemNew";
    box-sizing: border-box;
    @property "/brmsContentItemNew";
}
.BRMSContainer .brmsNewItem .itemContent:hover {
    background: #FFEAE7 !important;
}
.BRMSContainer .brmsSticky .itemContent{
    @property "brmsContentItemSticky";
    color: rgb(238, 62, 87);
    box-sizing: border-box;
    @property "/brmsContentItemSticky";
}
.BRMSContainer .brmsSticky .itemContent:hover {
    background: #fff1ba !important;
}
.clear{
    clear:both;
}
.BRMSContainer .xenTooltip{
    position: absolute;
    margin: -50px 0px 0px 60px;
    z-index:999;
}

.brmsIco{
    height:16px;
    width:14px;
    display:block;
}
.brmsDropdownToggle{
    position:relative;
}
.brmsDropdownMenu{
    @property "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;
    @property "/brmsDropdownMenu";
}
.brmsDropdownMenu li{
    @property "brmsDropdownItem";
    color: rgb(79, 92, 119);
    background-color: #FAFAFA;
    border: 1px solid #E4E4E4;
    border-top: 1px none black;
    @property "/brmsDropdownItem";
}
.brmsDropdownMenu li.current,
.brmsDropdownMenu li:hover{
    @property "brmsDropdownItemHover";
    background-color: #f6f6f6;
    @property "/brmsDropdownItemHover";
}

.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 {
    @property "brmsDropdownLink";
    font-size: 12px;
    color: #6A6A6A;
    padding: 8px 10px;
    display: block;
    clear: both;
    font-weight: normal;
    white-space: nowrap;
    @property "/brmsDropdownLink";
}
.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;
}

.brmsConfigBtn:hover .brmsIcoRefresh{
    background:url('styles/brivium/ModernStatistic/BRMS_refresh.gif') no-repeat center center;
}
.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;
}
@media (max-width:800px)
{
    
}

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

@media (max-width:480px)
{
    
}
Code trên do chính tay mình tinh chỉnh lại, giữ lại các property của addon để các bạn có thể chỉnh sửa trực tiếp trong Style Properties nhé :D
Bước này tùy chọn thôi, các bạn vào Applications -> List Statistics -> Chọn thống kê bạn đang sử dụng và chỉnh options như sau để giống với ảnh demo

Admin_Options.png

Vậy là xong rồi, chúc các bạn thành công !
 

Attachments

Members online

No members online now.

Latest resources