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

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,992
Được Like
11,340
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​
 

nobita8x

Thượng Đế
Tham gia
29/06/2016
Bài viết
157
Được Like
76
Muốn chỉnh trong profile post thì sao bác? ( phần tin nhắn hồ sơ)
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom