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
15,250
Được Like
11,672
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

Thượng Đế
Tham gia
28/05/2016
Bài viết
104
Được Like
30
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

Thượng Đế
Tham gia
24/10/2022
Bài viết
19
Đượ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

Thượng Đế
Tham gia
28/05/2016
Bài viết
104
Được Like
30
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

Thượng Đế
Tham gia
24/10/2022
Bài viết
19
Đượ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

Thượng Đế
Tham gia
28/05/2016
Bài viết
104
Được Like
30
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

Thượng Đế
Tham gia
28/05/2016
Bài viết
104
Được Like
30
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: 5

DNACAD

Thượng Đế
Tham gia
24/10/2022
Bài viết
19
Đượ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

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 Bottom