- Tham gia
- 28/02/2015
- Bài viết
- 17,150
- Được Like
- 12,746
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:
Thay bằng:
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.
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.
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ả:
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 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
Bài viết liên quan
Bài viết mới