Tutorial 2x FontAwesome Icons in Message User Info for Xenforo 2.2 - Thêm biểu tượng FontAwesome trong Message User Info của XenForo 2.2

[PVS]

FontAwesome Icons in Message User Info for Xenforo 2.2 - Thêm biểu tượng FontAwesome trong Message User Info của XenForo 2.2

Điều này hoạt động trên XF 2.2, cũng có thể hoạt động trên 2.x.
Nó bao gồm cách triển khai các biểu tượng fontawesome cho các trường người dùng tùy chỉnh.

​

Có 4 bước. Bước 2 và 4 dành cho các trường người dùng tùy chỉnh và bạn có thể bỏ qua các bước này nếu bạn không hiển thị các trường người dùng tùy chỉnh của mình trong thông tin người dùng.

Bước 1.
Trước hết, thêm một số CSS vào template extra.less, điều này làm tăng kích thước của văn bản trường bổ sung của người dùng lên 12px vì 11px mặc định chỉ là một chút quá nhỏ để dễ dàng nhìn thấy các biểu tượng. Ngoài ra, nó sửa chữa chiều rộng của các biểu tượng và căn giữa chúng để chúng trông gọn gàng.

.message-userExtras
{
    font-size: @xf-fontSizeSmaller;
    .pairs.pairs--justified i
    {
        width: 14px;
        text-align: center;
    }
}

Bước 2. Bỏ qua bước này nếu bạn không có bất kỳ trường người dùng tùy chỉnh nào.
Tiếp theo, tạo một phrase cho trường người dùng tùy chỉnh của bạn. Phrase này được sử dụng khi người dùng di chuột qua biểu tượng fontawesome. Nó giải thích ý nghĩa của biểu tượng.

​

Bạn sẽ cần thêm một phrase cho mỗi trường người dùng tùy chỉnh của mình.

Bước 3.
Tiếp theo chỉnh sửa template message_macros và xem qua các trường thay đổi thẻ dt cho từng mục thông tin mà bạn hiển thị trong các trường bổ sung tin nhắn của mình. Chỉ thay đổi những cái mà bạn hiển thị.
Ví dụ:

                            <dt>{{ phrase('joined') }}</dt>

thay đổi thành

                            <dt>
                                <xf:if is="$xf.reply.template=='thread_view'">
                                    <xf:fa icon="fa-user-clock" title="{{ phrase('joined') }}" />
                                <xf:else />
                                    {{ phrase('joined') }}
                                </xf:if>
                            </dt>

Điều này kiểm tra xem template có phải là thread_view hay không để chỉ các trường người dùng hiển thị bên cạnh tin nhắn mới được thay đổi. Các trường người dùng hiển thị trong khu vực hồ sơ người dùng vẫn không thay đổi. Chúng hiển thị văn bản như bình thường.
Nếu bạn cũng muốn điều này hoạt động cho các cuộc trò chuyện riêng tư, bạn chỉ cần thay đổi

<xf:if is="$xf.reply.template=='thread_view'">

thành

<xf:if is="$xf.reply.template=='thread_view' or $xf.reply.template=='conversation_view'">

Bạn sẽ cần chọn những biểu tượng fontawesome để sử dụng.
Ví dụ sử dụng:

• Joined: fa-user-clock
• Messages: fa-comments
• Solutions: fa-vote-yea
• Reaction score: fa-thumbs-up
• Points: fa-trophy
• Location: fa-map-marker-alt

Bước 4. Bỏ qua bước này nếu bạn không có bất kỳ trường người dùng tùy chỉnh nào.
Cuối cùng, chỉnh sửa template custom_fields_macros và thay đổi

                    <dt>{$fieldDefinition.title}</dt>

thành

                    <dt>
                        <xf:if is="$fieldDefinition.title=='Driving' && $xf.reply.template=='thread_view'">
                            <xf:fa icon="fa-car-alt" title="{{ phrase('driving') }}" />
                        <xf:else />
                            {$fieldDefinition.title}
                        </xf:if>
                    </dt>

Lưu ý rằng bạn sẽ cần

• thay đổi Driving thành văn bản của trường người dùng tùy chỉnh của bạn
• thay đổi phrase('driving') thành tên của phrase bạn đã tạo trước đó
• thay đổi xf:if để thêm elseif cho từng trường người dùng tùy chỉnh bổ sung mà bạn muốn hiển thị

Và nếu bạn muốn điều này cũng hoạt động trên các cuộc trò chuyện riêng tư, bạn sẽ cần phải thay đổi

<xf:if is="$fieldDefinition.title=='Driving' && $xf.reply.template=='thread_view'">

thành

<xf:if is="$fieldDefinition.title=='Driving' && ($xf.reply.template=='thread_view' or $xf.reply.template=='conversation_view')">

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

Nguồn: xenforo.com​