Здравствуйте! как обычно очередная работа выполненная по просьбе пользователей нашего сайта в которой просили сверстать вид комментариев для информера и блок с прокруткой данных комментариев , ну и так как к просьбе был приложен скриншот с видом комментариев который он хотел бы получить для информера что упростило задачу и так как в нём не было нечего сложного то я естественно приступил к её реализации и вот что получилось.
Скриншот вида блока
Установка информера
А теперь для тех кому понравился такой вид информера давайте преступим к его установке на сайт и для начала создадим новый информер для этого перейдем в админ панель и выберем пункт информеры затем создать
Параметры информера
- Название информера: На своё усмотрение
- Раздел:Комментарии
- Модуль:Все модули
- Количество материалов:На своё усмотрение
- Количество колонок:1
- Максимальная длина текста комментария:На своё усмотрение
Отлично не забываем сохранить!
Теперь в созданном нами только что информере жмем на ссылку
Шаблон информера и меняем всё на код ниже
Шаблон информера
Код
<div class="infcombstop"> <span class="userinfcombc"> <a href="$PROFILE_URL$"> <?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$"><?else?> <img src="ССЫЛКА НА КАРТИНКУ НЕТ АВАТАРА"><?endif?> <b>$USERNAME$</b> <div class="clr"></div> </a> </span> <p>$MESSAGE$</p> <span class="infcombcdsts"> <span><i class="fa fa-clock-o" aria-hidden="true"></i> $DATE$ в $TIME$</span> </span> <span class="infcombcdstss"> <a href="$ENTRY_URL$"><i class="fa fa-folder-open" aria-hidden="true"></i> материал</a> </span> </div>
Перед тем как сохранять замените текст в коде выше
ССЫЛКА НА КАРТИНКУ НЕТ АВАТАРА на ссылку картинки которая будет показана если у пользователя не установлен аватар.
Отлично можно сохранять!
Теперь давайте подключим стили для данного информера а для этого переходим в таблицу стилей и в самый конец её добавляем код ниже
css таблицу стилей
Код
.infcombc::-webkit-scrollbar { width: 4px; height: 4px;
} .infcombc::-webkit-scrollbar-thumb { background-color: rgb(241 241 241); border-radius: 2px; border: 2px solid hsl(150deg 75% 42%);
} .infcombc::-webkit-scrollbar-track { background: hsla(0,0%,50.2%,.1);
} .infcombc { background: #f1f1f1; padding: 15px 20px; } .infcombcup { max-height: 400px; overflow-x: hidden; } .infcombstop { margin: 20px 0; padding: 10px 0 20px; border-bottom: 1px solid #cdcdcd; } .userinfcombc { background: #434343; border-radius: 20px; display: inline-block; } .userinfcombc img { width: 32px; height: 32px; border-radius: 100%; object-fit: cover; float: left; border: solid 2px #FFF; } .userinfcombc b { color: #FFF; line-height: 30px; padding: 0 20px; font-weight: 300; } .infcombstop p { display: block; padding: 15px 0; font-size: 13px; padding-right: 10px; } .infcombcdsts span{ color: #999; font-size: 11px; } .infcombcdstss { display: block; text-align: right; margin: 20px 0 0; } .infcombcdstss a { color: #434343; font-size: 13px; padding-right: 10px; display: block; } .infcombcfoot a { display: block; font-size: 13px; color: #434343; text-align: center; line-height: 50px; text-transform: uppercase;
}
Отлично не забываем сохранить!
Так же пока мы в таблице стилей на нужно подключить шрифтовые иконки от
font-awesome но только в том случае если они у вас ещё не подключены в противном случае повторно этого делать не нужно, ну а для тех у кого их нет то просто в самый вер первой строчкой в таблице стилей пропишите код ниже
Код
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);
Отлично не забываем сохранить!
Ну и теперь нам осталось подключить на сайт сам код вывода комментариев для этого в нужное место на сайте размещаем код который приведё ниже
Блок вывода информера
Код
<div class="infcombc"> <span class="menusitiname"><i class="fa fa-commenting-o" aria-hidden="true"></i> Комментарии</span> <div class="infcombcup"> $MYINF_НОМЕР ИНФОРМЕРА$ </div> <div class="infcombcfoot"><a href="">больше комментариев</a></div> </div> </div> </div>
в коде выше нужно сменить строчку
$MYINF_НОМЕР ИНФОРМЕРА$ на код информера который мы создали в начале и после этого жмем сохранить и конечно же чистим кеш у браузера комбинацией клавиш
Ctrl+F5 и после этого установка завершена!
web_master 
