Tutorial 2x Cách thêm huy hiệu/banner nhóm tùy chỉnh vào User Info XenForo 2

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,981
Được Like
11,328
Cách thêm huy hiệu/banner nhóm tùy chỉnh vào User Info XenForo 2

Hiển thị hình ảnh với "User banner text" trong "User info.

postbit.png tooltip.png profile.png
Bước 1: Vào: AdminCP > Appearance > Templates > "extra.less"

Mở template và thêm code sau (Gọi bất cứ điều gì bạn muốn.) Trong ví dụ ở đây, mình gọi nó là ".myBadge":

Điều chỉnh các cài đặt khi cần để định kích cỡ và căn chỉnh
Mã:
////////////////////////////////////// START - Group Banner/Badge CSS ////////////////////////////////////

/* Adds userBanner to memberHeader-banners and memberTooltip-banners */
.userBanner.myBadge{
     background-image: url('images/myBadge.png');
     display: block;
     background-size: 45px; // adjusts size of background image
     background-position: 1.5% 0%; // adjusts image position (x% y%)
     background-repeat: no-repeat;  // keeps image from repeating
     text-indent: -7px;  // shifts text left or right
     padding-top: 45px;  // adjusts distance from image to text (group name)
     text-align: left;
}

/* Additonal adjustments for message-userBanner Only */
.userBanner.myBadge.message-userBanner {
     background-position: 50% 0%; // adjusts image position (x% y%)
     text-indent: 0px;  // shifts text left or right
     text-align: center;
}

/* Adjusts size, position, or removal of banner image in Mobile view */
@media (max-width: 650px){
.userBanner.myBadge.message-userBanner.userBanner {
  // background-image: none; // *** to remove background image remove "//" in front of code ***
     display: inline-block;
     background-size: 35px; // adjusts size of background image
     background-position: 0% 0%; // adjusts image position (x% y%)
     text-indent: -7px;  // shifts text left or right
     padding-top: 37px;  // adjusts distance from image to text (use with image)
  // padding-top: 0px;  // if background-image is set to "none", remove "//" and remove line above)
     text-align: left;
}
}

///////////////////////////////////// End - Group Banner/Badge CSS /////////////////////////////////

Bước 2: Vào "Groups and Permissions > User Groups" và chọn nhóm bạn muốn thêm huy hiệu.

Dưới "User banner styling," check vào "Other, using custom CSS class name" và nhập tên bạn đã nhập ở extra.less.

QUAN TRỌNG: Hãy chắc chắn xóa "." (dấu chấm) ở phía trước tên như hình dưới đây:

2019-11-09_11-43-12.jpg

Chúc các bạn thành công.


Nguồn: xenforo.com​
 

tuanvu1091

Thượng Đế
Tham gia
03/02/2020
Bài viết
10
Được Like
0
đã làm dc. thank ad
 
Sửa lần cuối:

Phatdz123

Thượng Đế
Tham gia
27/08/2020
Bài viết
31
Được Like
3
r mình làm cho staff thì sao nhỉ ?
 

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