Tutorial 2x Creating custom user banner styling - Tạo kiểu banner người dùng tùy chỉnh cho XenForo 2

Discussion in 'Tips and Guides' started by PVS, Aug 26, 2019.

  1. PVS

    PVS Cộng Sự Đặc Biệt Staff Member

    Joined:
    Feb 28, 2015
    Messages:
    11,779
    Likes Received:
    7,039
    Trophy Points:
    113
    Gender:
    Male
    Location:
    Huế
    Home Page:
    Creating custom user banner styling - Tạo kiểu banner người dùng tùy chỉnh cho XenForo 2

    Theo mặc định, XF đi kèm với các kiểu banner người dùng sau:

    1566747742470.png
    Tạo kiểu tùy chỉnh bằng cách sử dụng tùy chọn "Other, using custom CSS class name" khá đơn giản.

    Hướng dẫn này sẽ giải thích cách làm.

    Cách dễ nhất cho đến nay để thêm kiểu banner mới và để đảm bảo nó kế thừa tất cả kiểu dáng gốc là chỉnh sửa template app_user_banners.less.

    Tìm phần được tô sáng trong template như ảnh chụp màn hình bên dưới:

    1566746468224.png
    Sau đó, chỉ cần thêm các mục tùy chỉnh của bạn sau mục orange và trước dấu đóng }, như sau:

    1566746538270.png
    Khuyên bạn nên sử dụng tên sẽ không gây ra bất kỳ xung đột tiềm ẩn nào với code gốc hoặc các add-on của bên thứ ba.
    Hai giá trị màu trong dấu ngoặc nhọn biểu thị màu văn bản và màu nền, trong trường hợp này màu văn bản là màu trắng và màu nền là # 008800.

    XF sau đó sẽ tạo màu đường viền dựa trên các giá trị đó, sử dụng CSS gốc.

    Cuối cùng, cấu hình nhóm người dùng:

    1566746708977.png
    Kết quả của tất cả đó là:

    1566746760594.png
    Tất nhiên bạn có thể tạo kiểu theo ý muốn, thêm biểu tượng, hình ảnh, v.v.

    Để làm điều đó, bạn sẽ sử dụng template Extra.less.

    Ví dụ sau đây thêm biểu tượng star của Font Awesome (https://fontawesome.com/icons?d=gallery) ở phía trước văn bản.

    1566746995913.png
    Kết quả như sau:

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


    Nguồn: bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365.com​
     
    thahtrung06 and CoTich like this.
  2. CoTich

    CoTich Thượng Đế

    Joined:
    Aug 8, 2019
    Messages:
    23
    Likes Received:
    5
    Trophy Points:
    3
    Location:
    HN
    bro cho hỏi làm sao để style riêng cho từng user ladder vậy ?
    có add-on nào để xếp hạng cấp bậc thành viên theo tiêu chí và có style cho từng bậc ko ạ ?
     
  3. PVS

    PVS Cộng Sự Đặc Biệt Staff Member

    Joined:
    Feb 28, 2015
    Messages:
    11,779
    Likes Received:
    7,039
    Trophy Points:
    113
    Gender:
    Male
    Location:
    Huế
    Home Page:
    User title ladder bạn có thể dùng html để style cho nó nha. Còn xếp hạng có thể sử dụng User title ladder để xếp hạng cho user luôn cũng được.

    Ngoài ra có thể hướng dẫn này giúp ích cho bạn: https://vnxf.vn/them-mot-he-thong-d...on-gian-va-hieu-qua-cho-bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365-2.t20742.html

    Nếu hướng dẫn phức tạp thì có add-on cho bạn luôn: https://vnxf.vn/reaction-ranks-xep-hang-dua-vao-reaction-cho-bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365-2.t20743.html
     
    CoTich likes this.
  4. CoTich

    CoTich Thượng Đế

    Joined:
    Aug 8, 2019
    Messages:
    23
    Likes Received:
    5
    Trophy Points:
    3
    Location:
    HN
    heart~~
     
  5. QuangAnh

    QuangAnh Thượng Đế

    Joined:
    Mar 28, 2020
    Messages:
    112
    Likes Received:
    2
    Trophy Points:
    18
    Location:
    bắc ninh
    [​IMG]
    cho xin code này với ad @PVS
     
  6. thahtrung06

    thahtrung06 Thượng Đế

    Joined:
    Nov 12, 2019
    Messages:
    262
    Likes Received:
    66
    Trophy Points:
    28
    Occupation:
    IT
    Location:
    Hà Nội
    Home Page:
    Tự gõ thôi bạn
    Code:
    /* ### User Banners ### */
    .userBanner.userBanner--ctaSupporter
    {
         &:before{
                   .m-faBase();
                   .m-faContent(@fa-var-star);
                   padding-right: 4px;
         }
    }
     
  7. QuangAnh

    QuangAnh Thượng Đế

    Joined:
    Mar 28, 2020
    Messages:
    112
    Likes Received:
    2
    Trophy Points:
    18
    Location:
    bắc ninh
    mình gõ nhưng nó báo lỗi sai :v cảm ơn bro nhiều lắm nhé
     
  8. thahtrung06

    thahtrung06 Thượng Đế

    Joined:
    Nov 12, 2019
    Messages:
    262
    Likes Received:
    66
    Trophy Points:
    28
    Occupation:
    IT
    Location:
    Hà Nội
    Home Page:
    Bạn chỉnh sửa trong template app_user_banners.less như nào thì khi gõ mã CSS trên thêm đúng như thế nhé!
     
  9. QuangAnh

    QuangAnh Thượng Đế

    Joined:
    Mar 28, 2020
    Messages:
    112
    Likes Received:
    2
    Trophy Points:
    18
    Location:
    bắc ninh
    bro help tin nhắn trong hồ sơ vs
     

Share This Page