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

Thảo luận trong 'Tips and Guides' bắt đầu bởi PVS, 21/11/2019.

  1. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,307
    Đã được thích:
    6,711
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    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​
     

Chia sẻ trang này