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:
    10,966
    Đã được thích:
    6,606
    Đ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: xenforo.com​
     
    CoTich thích bài này.
  2. CoTich

    CoTich Thượng Đế

    Tham gia:
    08/08/2019
    Bài viết:
    23
    Đã được thích:
    3
    Đ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:
    10,966
    Đã được thích:
    6,606
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    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:
    3
    Điểm thành tích:
    3
    Nơi ở:
    HN
    heart~~
     

Chia sẻ trang này