Tutorial 2x Banner Rank - Tùy chỉnh banner xếp hạng cho XenForo 2

PVS

Generalissimo
Thành viên BQT
Banner Rank - Tùy chỉnh banner xếp hạng cho XenForo 2

Trước tiên, hãy thêm đoạn mã này vào template Extra.less:
Mã:
/* common banner codes */
[class*='trgamersafis_'] {font-family:'Exo';border-left: 3px solid rgba(0, 0, 0, 0.2);margin-top: 3px;text-align: center;height: 20px;line-height: 15px;position: relative;max-width: 180px;padding: 2px 20px 2px 15px;user-select: none;color: #FFFFFF;font-size: 11px;font-weight: normal;}
[class*='trgamersafis_'] strong:before {font-family: "FontAwesome";background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;position: absolute;top: 0;bottom: 0;left: 0;padding: 2px 4px 0px 4px;min-width: 15px;font-size: 100%;text-align: center;}
[class*='trgamersafis_'] strong {margin-left: 15px;}

/* custom banner codes for user group */
.trgamersafis_00 {background: #8e0909;border-color: #8e0909;box-shadow: 0 0 15px #8e0909, inset 0 0 20px white;}.trgamersafis_00 strong:before {content: "\f27e";}
.trgamersafis_01 {background: #1C86EE;border-color: #1C86EE;box-shadow: 0 0 15px #1C86EE, inset 0 0 20px white;}.trgamersafis_01 strong:before {content: "\f132";}
.trgamersafis_02 {background: #176093;border-color: #176093;box-shadow: 0 0 15px #176093, inset 0 0 20px white;}.trgamersafis_02 strong:before {content: "\f132";}
.trgamersafis_03 {background: #14bd61;border-color: #14bd61;box-shadow: 0 0 15px #14bd61, inset 0 0 20px white;}.trgamersafis_03 strong:before {content: "\f0e7";}
.trgamersafis_04 {background: #17713c;border-color: #17713c;box-shadow: 0 0 15px #17713c, inset 0 0 20px white;}.trgamersafis_04 strong:before {content: "\f0e7";}
.trgamersafis_05 {background: #8F343A;border-color: #8F343A;box-shadow: 0 0 15px #8F343A, inset 0 0 20px white;}.trgamersafis_05 strong:before {content: "\f044";}
.trgamersafis_06 {background: #4ca79b;border-color: #4ca79b;box-shadow: 0 0 15px #4ca79b, inset 0 0 20px white;}.trgamersafis_06 strong:before {content: "\f0d6";}
.trgamersafis_07 {background: #8E44AD;border-color: #8E44AD;box-shadow: 0 0 15px #8E44AD, inset 0 0 20px white;}.trgamersafis_07 strong:before {content: "\f2b5";}
.trgamersafis_08 {background: #FFBE1C;border-color: #FFBE1C;box-shadow: 0 0 15px #FFBE1C, inset 0 0 20px white;}.trgamersafis_08 strong:before {content: "\f234";}
.trgamersafis_09 {background: #CF4D35;border-color: #CF4D35;box-shadow: 0 0 15px #CF4D35, inset 0 0 20px white;}.trgamersafis_09 strong:before {content: "\f007";}
.trgamersafis_10 {background: #000000;border-color: #000000;box-shadow: 0 0 15px #000000, inset 0 0 20px white;}.trgamersafis_10 strong:before {content: "\f235";}
.trgamersafis_11 {background: #202020;border-color: #202020;box-shadow: 0 0 15px #202020, inset 0 0 20px white;}.trgamersafis_11 strong:before {content: "\f06e";}

Sau đó, thêm đoạn code sau vào user group ở field (Other, using custom CSS class name)
Thêm theo thứ tự:
trgamersafis_00 cho nhóm đầu tiên,
trgamersafis_01 cho nhóm thứ hai, v.v.

Kết quả:

afba1.png

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


Nguồn: xenforo.com​
 

PVS

Generalissimo
Thành viên BQT
Bạn thêm code vào extra rồi nhưng mà bạn quên add vào các group nhé :), đọc kỹ bài viết nha ;)
 

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

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top