Tutorial 2x Thread prefix icons - Tùy chỉnh tiền tố chủ đề của XenForo 2

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,832
Được Like
12,694
Thread prefix icons - Tùy chỉnh tiền tố chủ đề của XenForo 2

Bạn muốn tùy chỉnh tiền tố của bạn?

Đây là một hướng dẫn đơn giản làm ví dụ. Tất nhiên bạn có thể mở rộng nó cho nhu cầu của riêng bạn như bạn muốn.

Hướng dẫn sẽ giúp bạn đạt được kết quả như sau:

2019-02-04_10-24-15.gif

Tạo tiền tố tùy chỉnh của bạn
Vào Admin CP > Forums > Thread prefixes và nhấp vào nút Add prefix ở phía trên bên phải.

Điền vào mẫu như thế này:

2019-02-04_10-29-31.png

Bạn có thể chọn bất kỳ tên tiền tố nào bạn muốn, chỉ cần thay đổi pack-a thành tên bạn muốn.

* đừng quên chọn các diễn đàn áp dụng ở phía dưới

Tiếp theo là thêm code vào template Extra.less của bạn

Mở template Extra.less và thêm:
Mã:
/*** Prefix Pack A ***/
.label.label--pack-a {
    background: #CD7F32;
    color: #fafafa;
    &:hover {
        background: #4A4E51;
        color: #fafafa;
    }
    &:before {
        .m-faBase();
        .m-faContent(@fa-var-cogs);
        padding-right: 5px;
    }
}
/**********/

Đối với tên tiền tố khác, chỉ cần thay đổi pack-a trong code.

Để chỉnh sửa tiền tố khi rê chuột vào thì kiểm tra class &:hover.

Để chỉnh sửa biểu tượng tiền tố kiểm tra class &:before. Để thay đổi biểu tượng Font Awesome, hãy chỉnh sửa cogs (trong ví dụ trên) với bất kỳ tên biểu tượng nào khác.

Bạn muốn một biểu tượng Pro cho một style cụ thể?
Chỉnh sửa .m-faBase(); và thay đổi nó thành .m-faBase('Pro', @faWeight-solid);, .m-faBase('Pro', @faWeight-regular); hoặc .m-faBase('Pro', @faWeight-light);.

Bạn muốn một biểu tượng thương hiệu?
Chỉnh sửa .m-faBase(); và thay đổi nó thành .m-faBase('Brands');.

Về cơ bản là vậy. Để thêm nhiều tiền tố tùy chỉnh, chỉ cần thực hiện quy trình trên cho mỗi tiền tố.

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


Nguồn: xenforo.com​
 
  • Like
Reactions: THB

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mobile/Zalo: 0906081284

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom