Кастомизация сообщений

Сообщения, появляющиеся в чате имеют определенную структуру. Вы можете влиять на их отображение, разместив на сайте соответствующие CSS правила.

Пример сообщения от посетителя:

<div class="nsc_msgouter nsc_vwr">
    <div class="nsc_msginner nsc_vwr">
        <div class="nsc_ttl nsc_vwr">
            Вы                  <!-- Заголовок сообщения -->
        </div>
        <div class="nsc_msg">
            <div class="nsc_txt">
                Здравствуйте    <!-- Текст сообщения -->
            </div>
            <div class="nsc_time">
                17:22           <!-- Время сообщения -->
            </div>
        </div>
    </div>
</div>

                

Заголовки сообщений

Все заголовки сообщений - это элементы div, которые имеют атрибут class со значением nsc_ttl. Также у заголовков есть второе значение класса, различное в зависимости от того, к каким сообщениям относится этот заголовок:
nsc_vwr - заголовки сообщений посетителя
nsc_owr - заголовки сообщений оператора
nsc_swr - заголовки сообщений системы

Например, чтобы назначить красный цвет всем заголовкам сообщений оператора, понадобится такое CSS-правило:

div.nsc_owr {
    color: red;
}        

Сообщения

Каждое сообщение заключено в контейнер, который является элементом div и имеет атрибут class со значением nsc_msg. Внутри этого контейнера находятся еще два элемента div. Один из них имеет класс nsc_txt и в нем находится сам текст сообщения. Второй имеет класс nsc_time и в нем находится время отправки этого сообщения.

Например, чтобы добавить зеленую рамку ко всем сообщениям и сделать серыми цифры времени отправки сообщения, понадобится такое CSS-правило:

div.nsc_msg {
    border: solid 1px green;
}
div.nsc_time {
    color: grey;
}        

Пример

Ниже приведен пример таблицы стилей для переписки

#nsc_history div.nsc_ttl, 
#nsc_history div.nsc_msg { 
    position: relative;
    padding: 5px;
}

#nsc_history div.nsc_ttl { font-weight: bold; }

#nsc_history div.nsc_msg { padding-right: 50px; }

#nsc_history div.nsc_time {
    position: absolute;
    top:0; right: 0;
    padding: 5px;
    color: #777;
}

#nsc_history div.nsc_vwr { color: #D11919; }

#nsc_history div.nsc_owr { color: #2626D1; }

#nsc_history div.nsc_swr { color: #777; }

Все права защищены. Copyright © 2018 Netrox SC