Thêm huy hiệu/banner User Info XenForo 2

Xenforo 2 đã phát hành được một thời gian khá dài tuy nhiên những tùy biến hoặc Addon cho Xenforo 2 rất ít và nếu có thì phí cửa nó cũng khá là chát. Tuy nhiên vẫn có một số cái bạn có thể tự tùy chỉnh được.

Trong Xenforo sẽ có khung thành viên với các thông tin của bạn với các danh hiệu, hình ảnh được thêm vào đây. Hôm nay Blog thủ thuật f4vnn sẽ chia sẻ cho bạn cách thêm huy hiệu hoặc 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:

Tiền thân của Blog thủ thuật f4vnn trước cũng là một diễn đàn dùng mã nguồn mở Xenforo nhưng do một số lý do mà diễn đàn này đã trở thành Blog cá nhân và vì thời gian dành ra để quản trị một diễn đàn rất tốn thời gian. Nếu các bạn muốn tạo một diễn đàn thì các bạn nên có đội (Team) thì diễn đàn của bạn mới có thể phát triển bền vững được

Nếu bạn dùng Xenforo 1 thì đoạn code này sẽ không áp dụng được trừ khi là bạn đang dùng Xenforo 2. Code này được chia sẻ bởi anh PVS bên diễn đàn vnfx.vn chia sẻ

https://vnxf.vn/cach-them-huy-hieu-banner-nhom-tuy-chinh-vao-user-info-xenforo-2.t23089.html

Xem thêm : Tại Đây

Blog Download Phần Mềm Free : Tại Đây