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

PVS

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

NOKIAPRO

Moderator
Thành viên BQT
Tham gia
28/05/2016
Bài viết
263
Được Like
76
uồi đc r ạ em cảm ơn bác nhiều. Bác cho em hỏi mấy cái code như này kiếm ở đâu và sao để cho nó phù hợp ạ
cái trên mình mua bạn ơi, còn free trên mạng đầy bạn ạ :D
 

DNACAD

Private
Tham gia
24/10/2022
Bài viết
21
Được Like
1
Thì bạn cứ tìm cdn fontawesome là ra cả đống
E còn nhiều cái muốn hỏi bác quá mà toàn trả lời qua diễn đàn này nó chênh lệch nhau về thời gian quá hihi, nếu bác có thể thì bác add zalo em với ạ 0334233001
 

NOKIAPRO

Moderator
Thành viên BQT
Tham gia
28/05/2016
Bài viết
263
Được Like
76
E còn nhiều cái muốn hỏi bác quá mà toàn trả lời qua diễn đàn này nó chênh lệch nhau về thời gian quá hihi, nếu bác có thể thì bác add zalo em với ạ 0334233001
Thì cứ làm rồi gom hỏi để người khác ko biết còn trả lời, mình cũng có cái ko cái có chứ hihi
 

DNACAD

Private
Tham gia
24/10/2022
Bài viết
21
Được Like
1
Thì cứ làm rồi gom hỏi để người khác ko biết còn trả lời, mình cũng có cái ko cái có chứ hihi
Dạ vậy bác cho e hỏi, như vừa e thấy 1 bài có hỏi về làm background cho badge như admin á bác ấy có đưa 1 code css hay gì đó mà bác ấy bảo phần tử tự làm e k hiểu phần tử banner nó là như thế nào ạ
 

NOKIAPRO

Moderator
Thành viên BQT
Tham gia
28/05/2016
Bài viết
263
Được Like
76
Dạ vậy bác cho e hỏi, như vừa e thấy 1 bài có hỏi về làm background cho badge như admin á bác ấy có đưa 1 code css hay gì đó mà bác ấy bảo phần tử tự làm e k hiểu phần tử banner nó là như thế nào ạ
Bài viết ấy đâu bạn
 

NOKIAPRO

Moderator
Thành viên BQT
Tham gia
28/05/2016
Bài viết
263
Được Like
76
bạn thêm cái này vào extra.less
Mã:
.hzbanner_hzteam {
    color: #000000;
    background: url(https://lh3.googleusercontent.com/XzEzjCdub1v33duny20w_ifZgg9TtvCyozX_J1y4BsL2k7nH85MsQGJRUpPqxIFsIJA_C-8duYl752xM_-iqYRd_OKMST8YNqyGJjyTBlDOvxpGDv2REYEBl4PQN0h0IzMEZlo0G=w2400);
    background-size: cover;
}

rồi vào group user thêm như này ảnh đính kèm
 

Đính kèm

  • Capture.PNG
    Capture.PNG
    15.6 KB · Lượt xem: 9

DNACAD

Private
Tham gia
24/10/2022
Bài viết
21
Được Like
1
bạn thêm cái này vào extra.less
Mã:
.hzbanner_hzteam {
    color: #000000;
    background: url(https://lh3.googleusercontent.com/XzEzjCdub1v33duny20w_ifZgg9TtvCyozX_J1y4BsL2k7nH85MsQGJRUpPqxIFsIJA_C-8duYl752xM_-iqYRd_OKMST8YNqyGJjyTBlDOvxpGDv2REYEBl4PQN0h0IzMEZlo0G=w2400);
    background-size: cover;
}

rồi vào group user thêm như này ảnh đính kèm
E muốn làm 1 banner khác có background thì e chỉ cần thay link banner r phần tử banner đúng k bác
 

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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mobile/Zalo: 0906081284

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom