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

PVS

Generalissimo
Thành viên BQT
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

Corporal
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
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

Corporal
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

Corporal
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

Private
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