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

[PVS]

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:

​

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:

​

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:

/*** 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​