Изменяем системный чат и делаем его как Telegram

О чем материал ?

В сегодняшнем материале мы обсудим решение, как с системного стандартного чата сделать что-то похожее на Viber или Telegram. То есть, мы изменим отображение сообщений и их вид, так же, сообщения вашего собеседника будут отображаться слева, а ваши справа, в системном чате такого нет.

Как установить скрипт кастомизации чата под Telegram ?

Перейдите в шаблон вида материалов модуля Мини-чат и замените весь код который там будет на следующий:

<style>body {background:url(здесь ссылка на фон) no-repeat 0%0%/cover fixed !important;}</style>  
  <div class="rsrt">  
  <div class="rsblock">  
  <div class="rsava">  
  <a href="$PROFILE_URL$" title="$USERNAME$" rel="nofollow">  
  <img class="rsimg" src="$AVATAR_URL$" alt="name" /></a>  
  <a class="User$GID$" href="javascript:void('Apply to')" onclick="parent.window.document.getElementById('mchatMsgF').focus();parent.window.document.getElementById('mchatMsgF').value+='[i]$NAME$[/i], ';return false;">$USERNAME$</a>  
  </div>  
  <div class="rsmesr trs">$MESSAGE$  
  <div class="rstime">$TIME$</div>  
  </div>  
  </div>  
  <div class="gb" style="display:none;">$USERNAME$</div>  
  </div>

Выше в коде выделено красным, это будет статическая картинка для фона чата, пропишите ту картинку которая вам больше всего подходит для фона чата.

Устанавливаем скрипт доработанного нового чата

Перейти в глобальный блок нижняя часть сайта и в самый низ установить следующий скрипт:

<script>
$(function() {$('#mchatIfm2').load(function(){
var iframe = $($('#mchatIfm2')[0].contentWindow.document.body);
  iframe.find(".gb").each(function(){
  if ($(this).text() !== '$USERNAME$'){
  $(this).parent().css('float', 'left').end().prev().css('flex-direction', 'row');
  $(this).prev().find('.trs').addClass('rsmess').removeClass('rsmesr');}
});
});});
</script>

Установка стилей для обновленного мини-чата

Перейти в таблицу стилей CSS и установить следующие стили:

.rsrt {width:80%;float:right;margin:5px 2px;}
.rsblock {display:flex;flex-direction:row-reverse;}
.rsmess, .rsmesr {align-self:flex-start;min-width:0px;word-wrap:break-word;padding:5px; border-radius:10px; position:relative; color:#000;}
.rsmess {background:#fff;}
.rsmesr {background:#b3e0ff;}
.rsava {flex:0 1 55px;align-self:flex-start;min-width:55px;text-align:center; word-wrap:break-word;}
.rsimg {margin:auto;display:block; width:40px;height:40px;border-radius:40%;}
.rstime {font-size:10px;color:#808080;padding:2px;text-align:right;}

.rsmesr::after {
content:"";
position:absolute;  
width:5px;
left:100%;
top:0px;
border-radius:8px 0px 0px 0px;
padding:5px;
box-shadow:-8px 0px 0px 0px #b3e0ff;
z-index:-1;
}

.rsmess::before {
content:"";
position:absolute;  
width:5px;
right:100%;
top:0px;
border-radius:0px 8px 0px 0px;
padding:5px;
box-shadow:8px 0px 0px 0px #fff;
z-index:-1;  
}

Примечание

Для не авторизованных пользователей (гостей) все участники чата будут слева, а вот авторизованный пользователь всегда будет справа, как в вайбере. Это особенность работы данного чата.

Разработчик скрипта: Sentimo