форма для входа

1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
09-12-2017 в 03:00 552

Информер комментариев


Информер комментариев
Здравствуйте, Сегодня публикую свою версию вида материалов для информера последних комментариев на сайте.

в информере есть аватар пользователя его ник а также его комментарий
информер выполнен в светлом стиле.

По клику на аватарку пользователя откроется его страница.
По клику на текст комментария откроется страница материала.
Если комментарий длинный, то он обрезается, так как его размер, ограничен мной размером в 200px, для просмотра всего комментария в блоке с текстом появится полоса прокрутки.

Все размеры вы сможете поменять на свои при необходимости.

Вид информера:

Думаю как создать данный информер писать не нужно!
Код в шаблон информера
Код
<div class="com_waak_bc">
  <div class="com_waak_bc_top">
  <span class="com_waak_bc_top_img_mat"><a href="$PROFILE_URL$" title="Профиль пользователя"><img src="$USER_AVATAR_URL$"></a></span>
  <span class="com_waak_bc_top_text">
  <b>$USERNAME$</b>
  <i>Комментарий к материалу</i>
  </span>
   
  <div id="clr"></div>
  </div>

  <div class="com_waak_bc_contentg">
  <a href="$ENTRY_URL$" title="Перейти на страницу материала $ENTRY_TITLE$">
  <div class="com_waak_bc_content">
  $MESSAGE$
  </div>
  </a>
  </div>
  <div id="clr"></div>
  </div>


В таблицу стилей в самый конец
Код
.com_waak_bc {background: #FFF;padding: 10px;}

.com_waak_bc_top_img_mat {
  width: 50px;
  height: 50px;
  float: left;border-radius: 50%;overflow: hidden;
}
.com_waak_bc_top_img_mat img {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

.com_waak_bc_top_text {display: block;padding: 5px 10px;float: left;}
.com_waak_bc_top_text b {
  display: block;
  font-size: 18px;
}
.com_waak_bc_top_text i {
  font-size: 11px;
  color: #676767;
  font-style: normal;
}

.com_waak_bc_contentg {
  max-height: 200px;
  overflow-x: auto;
  margin: 10px 0 0;
}
.com_waak_bc_content {
  padding: 10px;
  color: #676767;
  font-size: 11px;
  line-height: 18px;
  background: #f1f1f1;
  height: auto;

}
.com_waak_bc_content img {
  max-width: 100%;
}


Я не стал делать вывод картинки если нет аватара у пользователя это вы сделаете сами а если не сможете то пишите об этом в комментариях и я помогу вам.

6

Комментарии

Бармен 18-12-2017 в 05:09
Как раз думал изменить у себя на сайте данный информер.
Добавлять комментарии могут только зарегистрированные пользователи.

[ Регистрация | Вход ]

Автор


Похожие материалы

Реклама



Дополнение

Демонстрация результата либо показана на отдельной странице, либо просто показана на скриншоте. В исключительных случаях, когда нет возможности показать работу даже на скриншоте, используется развернутое описание. Описание есть у каждого материала, этот пункт важен, но иногда описание бывает косвенным, пустословным. Это относится к тем материалам, которым не нужна детальная инструкция.

Установка скриптов – иногда не быстрый процесс. На страницах с описаниями всегда указывается место, куда нужно вставить приложенный код. Если требуется редактирование настроек в Панели управления, то об этом тоже пишется. Если никакой информации об установке нет, значит, код можно ставить в любом месте на сайте, преимущественно в сайдбаре. Прежде чем редактировать страницы, настоятельно рекомендуем делать резервное копирование шаблонов. Этот совет по большей части для новичков.

Гость
Ваша корзина
Ваша корзина пуста
ttalantlev.ucozru