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

[PVS]

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.

​

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

////////////////////////////////////// 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:

​

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

Nguồn: xenforo.com​

 

[tuanvu1091]

đã làm dc. thank ad

 

[Phatdz123]

r mình làm cho staff thì sao nhỉ ?