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,638
Được Like
10,891
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
8
Đượ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


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