Изменяем внешний вид личных переписок

Внешний вид личных переписок

  1. Next
    Совместимость с XenForo:
    • XenForo 1.5
    Изменяем внешний вид личных переписок.

    Свой собственный аватар появляется всегда справа, а других участников слева.

    messenger-layout-1.png

    В адаптивном (отзывчивом) дизайне, лишние элементы были удалены (с помощью CSS)

    messenger-layout-3.png

    Инструкция

    В шаблоне message находим:
    Код:
    <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}">
    и заменяем на:
    Код:
    <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}">

    В шаблон EXTRA.css добавляем:
    Код:
    .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 .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>
Поделиться этой страницей в