Làm đẹp giao diện cho addon Modern Statistics
Để làm được điều này, trước tiên các bạn cần phải cài addon Modern Statistics, các bạn có thể download tại đây.
Rất đơn giản, đầu tiên các bạn download file đính kèm và upload lên theo đường dẫn: styles/brivium/ModernStatistic
Tiếp theo vào ACP tìm template: BRMS_ModernStatistic.css
Sau đó thay toàn bộ code trong template BRMS_ModernStatistic.css bằng đoạn code sau:
Lưu lại và thưởng thức.
Demo:
Chúc các bạn thành công.
Để làm được điều này, trước tiên các bạn cần phải cài addon Modern Statistics, các bạn có thể download tại đây.
Rất đơn giản, đầu tiên các bạn download file đính kèm và upload lên theo đường dẫn: styles/brivium/ModernStatistic
Tiếp theo vào ACP tìm template: BRMS_ModernStatistic.css
Sau đó thay toàn bộ code trong template BRMS_ModernStatistic.css bằng đoạn code 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;
display: none;
}
.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('styles/brivium/ModernStatistic/BRMS_refresh.png');
}
.brmsIcoConfig,
.brmsIcoList,
.brmsIcoLayout
{
background: url('styles/brivium/ModernStatistic/vnxf-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('styles/brivium/ModernStatistic/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;
}
@media (max-width:800px)
{
}
@media (max-width:610px)
{
}
@media (max-width:480px)
{
}
Lưu lại và thưởng thức.
Demo:
Chúc các bạn thành công.
PVS - Vnxf
Nguồn code: mamcongnghe.com
Nguồn code: mamcongnghe.com
Đính kèm
Bài viết liên quan
Được quan tâm
Bài viết mới