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

[PVS]

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ả:

​

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:

​

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:

​

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:

​

Hướng dẫn:

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

Tìm dòng sau:

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

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

.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 ctaConversationMessageSelf và ctaConversationMessageOther 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​

 

[nobita8x]

Muốn chỉnh trong profile post thì sao bác? ( phần tin nhắn hồ sơ)