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

Super Moderator
Thành viên BQT
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.

1.jpg

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.
Less:
.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.

2.jpg

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ụ:
HTML:
                            <dt>{{ phrase('joined') }}</dt>

thay đổi thành
HTML:
                            <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
HTML:
<xf:if is="$xf.reply.template=='thread_view'">

thành
HTML:
<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
HTML:
                    <dt>{$fieldDefinition.title}</dt>

thành
HTML:
                    <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
HTML:
<xf:if is="$fieldDefinition.title=='Driving' && $xf.reply.template=='thread_view'">

thành
HTML:
<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​
 
Back
Top