Tutorial 2x [cXF] Thread prefix icons - Biểu tượng tiền tố chủ đề cho XenForo 2

[PVS]

[cXF] Thread prefix icons - Biểu tượng tiền tố chủ đề cho XenForo 2


Bạn có muốn tùy chỉnh tiền tố của mình không?

Đây là một hướng dẫn DIY đơ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 theo ý muốn.


Vì vậy, hãy đọc hướng dẫn này để đạt được điều gì đó như thế này:

1. Tạo tiền tố tùy chỉnh của bạn

Trong AdminCP, hãy vào Forums > Thread prefixes và nhấp vào nút Add prefix ở phía trên bên phải.

Điền vào biểu mẫu như sau:

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 bằng tên bạn muốn.

* Đừng quên chọn diễn đàn áp dụng ở cuối



2. Thêm code vào template extra.less của bạn

Mở template extra.less của bạn và thêm code:

Spoiler: XF 2.3

/*** Prefix Pack A ***/
.label.label--pack-a {
    background: #CD7F32;
    color: #fafafa;
    &:hover {
        background: #4A4E51;
        color: #fafafa;
    }
    &:before {
        .m-faContent(@fa-var-cogs);
        padding-right: 5px;
    }
}
/**********/

Spoiler: XF 2.2

/*** 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 nhau, chỉ cần thay đổi pack-a trong code.

Để chỉnh sửa tiền tố khi di chuột, hãy kiểm tra class &:hover.

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


Bạn muốn có biểu tượng Pro theo một phong cách cụ thể?

Spoiler: XF 2.3

Nếu bạn muốn một biểu tượng có một trong các kiểu Font Awesome 5 Pro - light, solid hoặc duotone - hãy sử dụng code ở trên như thế này (ví dụ): .m-faContent(@fa-var-duotone-sign-in);. Như bạn thấy, bạn thêm tên kiểu (trong trường hợp này là duotone) vào bên trong code ngay sau dấu var-.

Spoiler: XF 2.2

Chỉnh sửa .m-faBase(); và thay đổi thành .m-faBase('Pro', @faWeight-solid);, .m-faBase('Pro', @faWeight-regular); hoặc .m-faBase('Pro', @faWeight-light);.

Bạn muốn có biểu tượng thương hiệu?

Spoiler: XF 2.3

Trong XenForo 2.3, bạn không cần phải chỉ định biểu tượng Thương hiệu. Sử dụng code như bạn làm với bất kỳ biểu tượng nào khác.

Spoiler: XF 2.2

Chỉnh sửa .m-faBase(); và thay đổi thành .m-faBase('Brands');.

Bạn chỉ muốn hiển thị biểu tượng mà không có văn bản trong tiền tố chủ đề?

Sử dụng code ví dụ này:

Spoiler: XF 2.3

/*** Prefix Pack A ***/
.label.label--pack-a {
    background: #CD7F32;
    color: #fafafa;

    .label:not(.menuPrefix)& {
        font-size: 0;
    }

    &:hover {
        background: #4A4E51;
        color: #fafafa;
    }
    &:before {
        .m-faContent(@fa-var-cogs);
        padding-right: 5px;
        font-size: @xf-fontSizeNormal;
        padding-left: 5px;

        .label:not(.menuPrefix)& {
            font-size: @xf-fontSizeNormal;
        }
    }
}
/**********/

Spoiler: XF 2.2

/*** Prefix Pack A ***/
.label.label--pack-a {
    background: #CD7F32;
    color: #fafafa;

    .label:not(.menuPrefix)& {
        font-size: 0;
    }

    &:hover {
        background: #4A4E51;
        color: #fafafa;
    }
    &:before {
        .m-faBase();
        .m-faContent(@fa-var-cogs);
        padding-right: 5px;
        font-size: @xf-fontSizeNormal;
        padding-left: 5px;

        .label:not(.menuPrefix)& {
            font-size: @xf-fontSizeNormal;
        }
    }
}
/**********/

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

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

Nguồn: xenforo.com​