Other Messenger Style Conversations - Style tin nhắn cho cuộc trò chuyện

PVS

Super Moderator
Thành viên BQT
Code hoặc hướng dẫn này được sử dụng trên phiên bản Xenforo cũ đã quá hạn sử dụng. Bạn hãy click để tìm bản mới hơn
Messenger Style Conversations - Style tin nhắn cho cuộc trò chuyện

Mô tả: Tạo cho cuộc trò chuyện một style tin nhắn đơn giản chỉ với một sửa đổi template duy nhất và một vài dòng CSS.

Kết quả:

messenger-layout-1.png

Avatar của bạn sẽ luôn xuất hiện ở bên phải và các avatar của người tham gia khác sẽ xuất hiện bên trái. Đương nhiên mỗi người tham gia sẽ có một cách xem khác nhau:

messenger-layout-2.png

Trong giao diện responsive hẹp, các yếu tố cần thiết đã được loại bỏ (chỉ thông qua CSS) để tối đa hóa diện tích nội dung tin nhắn:

messenger-layout-3.png

Như với các tiêu chuẩn bố trí, những người tham gia khác sẽ nhìn thấy cách bố trí với avatar của mình ở bên phải:

messenger-layout-4.png


messenger-layout-5.png

Hướng dẫn:

Bước đầu tiên là chỉnh sửa template message.

Tìm dòng sau:
Mã:
<li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_staff}', 'staff'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}">

Thay bằng:
Mã:
<li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_staff}', 'staff'} {xen:if $message.isIgnored, ignored} {xen:if '{$message.conversation_id}', {xen:if '{$visitor.user_id} ==  {$message.user_id}', 'ctaConversationMessageSelf', 'ctaConversationMessageOther'}}" data-author="{$message.username}">

Tiếp theo thêm mã sau vào template EXTRA.css để tạo ra kết quả như trong ảnh chụp màn hình ở trên. Hãy sửa đổi nó cho phù hợp với nhu cầu riêng của bạn.
Mã:
.conversation_view .mainContent .messageList,
.conversation_view .mainContent .messageList .message
{
    border: none !important;
}

.conversation_view .message .newIndicator
{
    display: none;
}

.ctaConversationMessageSelf .messageUserInfo,
.Responsive .ctaConversationMessageSelf .messageUserInfo
{
    float: right;
}

.ctaConversationMessageSelf .messageUserBlock .arrow,
.ctaConversationMessageOther .messageUserBlock .arrow
{
    display: none;
}

.ctaConversationMessageSelf.message .messageInfo
{
    margin-left: 0;
    margin-right: 140px;
}

.ctaConversationMessageSelf .messageContent
{
    border-radius: 10px;
    background-color: @primaryLighterStill;
}

.ctaConversationMessageOther .messageContent
{
    border-radius: 10px;
    background-color: @pageBackground;
}

.ctaConversationMessageSelf .messageText,
.ctaConversationMessageOther .messageText
{
    padding: 10px;
}

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    .Responsive .ctaConversationMessageOther .messageUserInfo
    {
        float:left;
    }

    .Responsive .ctaConversationMessageSelf .messageUserBlock div.avatarHolder,
    .Responsive .ctaConversationMessageOther .messageUserBlock div.avatarHolder
    {
        float: none;
    }

    .Responsive .ctaConversationMessageSelf .messageUserBlock h3.userText,
    .Responsive .ctaConversationMessageOther .messageUserBlock h3.userText
    {
        margin: 0;
        width: 52px;
        font-size: 80%;
    }

    .Responsive .ctaConversationMessageSelf .messageUserBlock a.username,
    .Responsive .ctaConversationMessageOther .messageUserBlock a.username
    {
        line-height: 12px;
    }

    .Responsive .ctaConversationMessageSelf .messageUserBlock .userTitle,
    .Responsive .ctaConversationMessageOther .messageUserBlock .userTitle,
    .Responsive .ctaConversationMessageSelf .messageUserBlock .userBanner,
    .Responsive .ctaConversationMessageOther .messageUserBlock .userBanner
    {
        display: none;
    }

    .Responsive .ctaConversationMessageSelf.message .messageInfo
    {
        margin-right: 66px;
        padding-right: 8px;
    }

    .Responsive .ctaConversationMessageOther.message .messageInfo
    {
        margin-left: 66px;
        padding-left: 8px;
    }
}
</xen:if>

Lưu ý rằng nếu bạn thay đổi class name ctaConversationMessageSelfctaConversationMessageOther trong CSS, bạn cũng phải thay đổi chúng trong template để phù hợp.

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


Nguồn: xenforo.com​
 
Back
Top