Tutorial 2x Cách thêm Custom Group Badge / Banner vào User Info cho XenForo 2

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,638
Được Like
10,891
Cách thêm Custom Group Badge / Banner vào User Info cho XenForo 2

Bài viết này sẽ hướng dẫn các bạn cách thêm Custom Group Badge / Banner vào User Info cho XenForo 2.

Tùy chọn #1
- Sử dụng "User banner text"

example_banner_small.png

Vào: AdminCP > Appearance > Templates > extra.less
Thêm đoạn code sau (Đặt tên bất cứ gì bạn muốn. Trong bài viết này gọi là ".mybadge"):
Mã:
.mybadge {
     background-image: url('https://www.mywebsite.com/mybadge.png');
     background-repeat: no-repeat;
     background-position: center top;
     padding-top:42px;
     text-align: center top;
}

Lưu ý: Nhớ thay đổi liên kết hình ảnh bằng hình ảnh bạn muốn đặt.

Sau đó vào "Groups and Permissions > User Groups" chọn nhóm bạn muốn thêm.

Dưới "User banner styling," check "Other, using custom CSS class name" và nhập tên vừa đặt ở trên extra.less vào:

Lưu ý: Đảm bảo xóa "." (dấu chấm) ở phía trước tên như hình dưới đây:

2018-04-05_20-42-15.jpg

Tùy chọn #2 - Xóa "User banner text" và dùng "User title override"

2018-05-16_18-13-01.png

Vào AdminCP > Appearance > Templates > extra.less
Thêm đoạn code sau (Đặt tên bất cứ gì bạn muốn. Trong bài viết này gọi là ".tac"):
Mã:
.tac {
     background-image: url('https://mywebsite.com/tac.png');
     background-repeat: no-repeat;
     background-position:center center;
     width: XXpx;                         /* be sure to set height & width */
     height: XXpx;                        /* be sure to set height & width */
     text-indent: 100%;                   /* hide User banner text */
     white-space: nowrap;                 /* hide User banner text */
     overflow: hidden;                    /* hide User banner text */
}
.memberHeader-banners .tac {
     background-position:5px 0px;
}
.memberTooltip-banners .tac {
     background-position:5px 0px;
}

Lưu ý: Nhớ thay đổi các chỉ số.

2018-05-16_18-28-08.png

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


Nguồn: xenforo.com​
 

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

XenForo 1 XenForo 2
Translate by PVS


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 Bottom