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

Thảo luận trong 'Tips and Guides' bắt đầu bởi PVS, 26/08/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,744
    Đã được thích:
    6,994
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    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 Đế

    Tham gia:
    08/08/2019
    Bài viết:
    23
    Đã được thích:
    5
    Điểm thành tích:
    3
    Nơi ở:
    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 Thành viên BQT

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

    CoTich Thượng Đế

    Tham gia:
    08/08/2019
    Bài viết:
    23
    Đã được thích:
    5
    Điểm thành tích:
    3
    Nơi ở:
    HN
    heart~~
     
  5. QuangAnh

    QuangAnh Thượng Đế

    Tham gia:
    28/03/2020
    Bài viết:
    112
    Đã được thích:
    2
    Điểm thành tích:
    18
    Nơi ở:
    bắc ninh
    [​IMG]
    cho xin code này với ad @PVS
     
  6. thahtrung06

    thahtrung06 Thượng Đế

    Tham gia:
    12/11/2019
    Bài viết:
    258
    Đã được thích:
    65
    Điểm thành tích:
    28
    Nghề nghiệp:
    IT
    Nơi ở:
    Hà Nội
    Web:
    Tự gõ thôi bạn
    Mã:
    /* ### User Banners ### */
    .userBanner.userBanner--ctaSupporter
    {
         &:before{
                   .m-faBase();
                   .m-faContent(@fa-var-star);
                   padding-right: 4px;
         }
    }
     
  7. QuangAnh

    QuangAnh Thượng Đế

    Tham gia:
    28/03/2020
    Bài viết:
    112
    Đã được thích:
    2
    Điểm thành tích:
    18
    Nơi ở:
    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 Đế

    Tham gia:
    12/11/2019
    Bài viết:
    258
    Đã được thích:
    65
    Điểm thành tích:
    28
    Nghề nghiệp:
    IT
    Nơi ở:
    Hà Nội
    Web:
    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 Đế

    Tham gia:
    28/03/2020
    Bài viết:
    112
    Đã được thích:
    2
    Điểm thành tích:
    18
    Nơi ở:
    bắc ninh
    bro help tin nhắn trong hồ sơ vs
     

Chia sẻ trang này