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

Bài Viết Của Admin Blue

Bài Viết Đáng Chú Ý

Bài Viết Mới

Trả Lời Mới

PVS

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

NOKIAPRO

Corporal
DNACAD nói:
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
Nhấn để mở rộng...
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

DNACAD

Private
NOKIAPRO nói:
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
Nhấn để mở rộng...
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

NOKIAPRO

Corporal
DNACAD nói:
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 ạ
Nhấn để mở rộng...
Bài viết ấy đâu bạn
 
NOKIAPRO

NOKIAPRO

Corporal
DNACAD nói:
đây bác ạ https://vnxf.vn/threads/sao-de-chen-anh-dong-vao-trong-1-usergroup-vay-moi-nguoi.23708/
Nhấn để mở rộng...
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

DNACAD

Private
NOKIAPRO nói:
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ấn để mở rộng...
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
 
Bạn phải đăng nhập hoặc đăng ký để bình luận.
Người đăng Chủ đề tương tự Diễn đàn Trả lời Ngày đăng
askingvn Help làm ơn hướng dẫn em cách thêm widgest ạ Tips and Guides 3
PVS Tutorial 2x Cách thêm danh sách tỉnh thành khi đăng ký thành viên cho XenForo 2 Tips and Guides 0
PVS Tutorial 2x Cách thêm huy hiệu/banner nhóm tùy chỉnh vào User Info XenForo 2 Tips and Guides 2
vudinhkhang2 Help Hỏi cách thêm hình ảnh vào header xenforo Tips and Guides 8
PVS Tutorial 2x Cách thêm Custom Group Badge/Banner vào User Info cho XenForo 2 Tips and Guides 1

Chủ đề tương tự


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

Texlink

Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink

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