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

PVS

PVS

Super Moderator
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​
 
Bài viết liên quan
Liệu có add-on dành cho SEO Xenforo? bởi gameboiz1806,
Addon xem ảnh đã upload xenforo bởi namchelsea,
Lỗi url tiếng Việt trong TAGS của xenforo 2 bởi namchelsea,
Thêm mô tả ngắn vào dưới tiêu đề trong forum view xenforo 2 bởi namchelsea,
Xenforo n*** vs Xenforo bản quyền có những điểm gì hay và hạn chế ạ? bởi gameboiz1806,
Hướng dẫn chi tiết và đầy đủ cách cài đặt XenForo lên hosting bởi LCB,
Bài viết mới
Liệu có add-on dành cho SEO Xenforo? bởi gameboiz1806,
Addon xem ảnh đã upload xenforo bởi namchelsea,
Lỗi url tiếng Việt trong TAGS của xenforo 2 bởi namchelsea,
Thêm mô tả ngắn vào dưới tiêu đề trong forum view xenforo 2 bởi namchelsea,
Xenforo n*** vs Xenforo bản quyền có những điểm gì hay và hạn chế ạ? bởi gameboiz1806,
Hướng dẫn chi tiết và đầy đủ cách cài đặt XenForo lên hosting bởi LCB,
NOKIAPRO nói:
Thì bạn cứ tìm cdn fontawesome là ra cả đống
Nhấn để mở rộ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
 
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
 
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 ạ
 
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
 
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: 12
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
 
8,553 32 1
Bạn phải đăng nhập hoặc đăng ký để bình luận.

Chủ đề tương tự

PVS
Tutorial 2x Cách thêm Custom Group Badge/Banner vào User Info cho XenForo 2
Trả lời
1
Lượt xem
5K
cheng
cheng
PVS
Tutorial 2x How to add your logo in the editor - Cách thêm logo của bạn vào trình soạn thảo cho XenForo 2
Trả lời
0
Lượt xem
353
PVS
PVS
PVS
Tutorial 2x How to add an email logo in XenForo - Cách thêm logo email vào XenForo 2
Trả lời
0
Lượt xem
302
PVS
PVS
gameboiz1806
Help Có cách nào để eddit và thêm dc mục ở đây không ạ?
Trả lời
1
Lượt xem
753
PVS
PVS
H
Help Cách thêm icon vào tiêu đề wiget và đổi màu
Trả lời
0
Lượt xem
2K
HyVong
H

Dịch vụ XenForo của VNXF

anhanhxf     0906081284
silzedt_1207          Inbox   PVS

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

XenForo 1 XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Xử lý sự cố (Troubleshooting)

Texlink

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

Nhà Tài Trợ

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