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

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,734
Được Like
12,680
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​
 

KietRiot

Private
Tham gia
26/01/2019
Bài viết
23
Được Like
1
Mình add code vô extra rồi mà sao làm không được nhĩ!
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,734
Được Like
12,680
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

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom