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

[PVS]

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:

/* 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ả:

​

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

Nguồn: xenforo.com​

 

[PhuongBinzz]

ước gì xen1 có

 

[KietRiot]

Mình add code vô extra rồi mà sao làm không được nhĩ!

 

[KietRiot]

@PVS sao mình add đầy đủ rồi mà không được nhĩ!

 

[Hoa Anh]

@PVS sao mình add đầy đủ rồi mà không được nhĩ!

bạn sài xf2.0 hay xf2.1

 

[KietRiot]

bạn sài xf2.0 hay xf2.1

xen 2 ạ

 

[KietRiot]

bạn sài xf2.0 hay xf2.1

Ong cho tui xin link fb de noi chuyen trao doi duoc k

 

[PVS]

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

 

[KietRiot]

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

Da~ add r ma`

 

[KietRiot]

bác teamview coi cho em với!