Боба
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1

Для добавления необходима авторизация
Граффити
Форма входа

Закрыть

Светлый вид комментариев
Скрипты

Всем привет! Сегодня хочу поделится с вами очередной своей работай.
Простой - светлый вид комментариев, если вы внимательно посмотрите на скриншот то заметите что у главного комментария есть отличия от вида ответа на комментарий
1 - Большой верхний бордер зелёного цвета,
2 - Вывод рейтинга в верхнем правом углу ( Если рейтинг отрицательный то цветменяется на красный ),
3 - Есть кнопка "поделится" нажав на которую появится блок с иконками социальных сетей ( Данный блок был добавлен по просьбе пользователя. Зачем? я не знаю! ) после повторного нажатия блок скроется.
4 - Надпись "Комментировать" вместо "Ответить" .
Так же если комментарий пренадлежит вам то кнопки голосования вам не ведны так же как и у комментариев за которые вы уже отдали свой голос.

Ещё одна важная вешь это то что все иконки выводятся с помошью Шрифта Font Awesome

Скрипт написан по просьбе пользователя - tolyan163rus который предоставил скриншот по которому я сверстал данный вид комментариев

Установка


Заходим в админ панель управление дизайном вид комментариев и заменяем весь код на код ниже
Код

<?if($LEVEL$>=1)?>  

<div class="wid-comm-bc otvet-com">
  <div class="wid-comm-ava"><a href="$PROFILE_URL$"><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$"><?else?><img src="/img/g_tema.png"><?endif?></a></div>
  <div class="wid-comm-inf">
  <div class="wid-comm-us"><a href="$PROFILE_URL$">$USERNAME$ </a><?if($MODER_PANEL$)?>$MODER_PANEL$<?endif?></div>
  <div class="wid-comm-text">
  $MESSAGE$
  </div>
  <div class="wid-comm-fot">
  <ul>
  <li>$DATE$ | </li>
  <?if($IS_OWN$)?><?else?><li><a href="$ANSWER_URL$">Ответить</a></li><?endif?>
  </ul>
  <span>
   
<?if($BAD_COMMENT_URL$)?><a href="$BAD_COMMENT_URL$"><i class="fa fa-thumbs-down" aria-hidden="true"></i></a><?endif?>
<?if($COMMENT_RATING$<0)?><b style="color:#FF2828;">$COMMENT_RATING$ <i class="fa fa-star" aria-hidden="true"></i></b><?else?>
<?if($COMMENT_RATING$=0)?><b class="c_ziro">0</b><?else?><b class="c_plus">$COMMENT_RATING$ <i class="fa fa-star" aria-hidden="true"></i></b><?endif?><?endif?>
<?if($GOOD_COMMENT_URL$)?><a href="$GOOD_COMMENT_URL$"><i class="fa fa-thumbs-up" aria-hidden="true"></i></a><?endif?>

  </span>
  <div id="clr"></div>
  </div>
  <div class="wid-comm-soc"></div>
   
  </div>
</div>

<?else?>

<div class="wid-comm-bc">
  <div class="wid-comm-ava"><a href="$PROFILE_URL$"><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$"><?else?><img src="ССЫЛКА НА КАРЬИНКУ НЕТ АВАТАРА"><?endif?></a></div>
  <div class="wid-comm-inf">
  <div class="wid-comm-us"><a href="$PROFILE_URL$">$USERNAME$ </a><span style="<?if($COMMENT_RATING$<0)?>color:#FF2828;<?endif?>">$COMMENT_RATING$ <i class="fa fa-star" aria-hidden="true"></i></span><?if($MODER_PANEL$)?>$MODER_PANEL$<?endif?></div>
  <div class="wid-comm-text">
  $MESSAGE$<? substr($COMMENT_RATING$,0,1) ?>
  </div>
  <div class="wid-comm-fot">
  <ul>
  <li>$DATE$ | </li>
  <li><a href="javascript://" onclick="$('.wid-comm-soc$NUMBER$').slideToggle('slow');">Поделится</a> </li>
  <?if($IS_OWN$)?><?else?><li> | <a href="$ANSWER_URL$">Комментировать</a></li><?endif?>
  </ul>
  <span>

   

<?if($BAD_COMMENT_URL$)?><a href="$BAD_COMMENT_URL$"><i class="fa fa-thumbs-down" aria-hidden="true"></i></a><?endif?>

<?if($GOOD_COMMENT_URL$)?><a href="$GOOD_COMMENT_URL$"><i class="fa fa-thumbs-up" aria-hidden="true"></i></a><?endif?>
   
   
   
   
  </span>
  <div id="clr"></div>
  </div>
  <div class="wid-comm-soc wid-comm-soc$NUMBER$">
  <!-- uSocial -->ТУТ КОД БЛОКА СОЦ СЕТЕЙ<!-- /uSocial -->  
  </div>
  </div>
</div>
<?endif?>

</div>

Для работы блока социальные сети вам нужно в коде выше заменить текст "ТУТ КОД БЛОКА СОЦ СЕТЕЙ" создать свой блок можно по этой ссылки usocial.pro.
Также меняем надпись "ССЫЛКА НА КАРЬИНКУ НЕТ АВАТАРА" на ссылку вашей картинки.

Теперь добавим стили нашего вида в таблицу стилей вашего сайта в самый конеw
Код


#clr {clear: both;}
.wid-comm-bc {
  background: #FFF;
  border-top: 5px solid #50B780;
  padding: 15px;
  overflow: hidden;
  position: relative;
  margin-top: 20px;
}

.wid-comm-ava {
  width: 50px;
  height: 50px;
  float: left;
  overflow: hidden;
  background: #CCC;
}
.wid-comm-ava img {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

.wid-comm-inf {
  margin-left: 70px;
}

.wid-comm-us a {
  font-size: 17px;
  color: #6A6D72;
  font-weight: 300;
}

.wid-comm-us span {
  float: right;
  color: #50B780;
  font-size: 18px;
}

.wid-comm-text {
  color: #6A6D72;
  font-size: 12px;
  line-height: 22px;
  font-weight: 100;
}

.wid-comm-fot {
  padding: 10px 0;
}
.wid-comm-fot ul {
  list-style: none;
  padding: 0px;
}
.wid-comm-fot ul li {
  float: left;
}

.wid-comm-fot ul li a {
  padding: 7px 10px;
  font-size: 11px;
  color: #626669;
}
.wid-comm-fot ul li a:hover {
  color: #85A5B2;
}

.wid-comm-fot span {
  float: right;
  color: #878787!important;
}
.wid-comm-fot span i {margin: 0px 10px;}

.otvet-com {
  border-top: 1px solid #D7D7D7;
  margin-top: 0px;
  margin-left: 50px;
}

.wid-comm-soc {
  display: none;
}
Теперь нам осталось подклчить шрифтовые иконки для этого просто добавьте в самый верх вашей таблицу стилей следующий код
Код

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);

Если у вас уже подключен данный шрифт то пропустите шаг выше.

Готово ДЕМО"

Особености:

Тематика
Для любого cайта
Браузеры
Все посней версии
Адаптация
Не полная

Скачивать файлы могут только зарегистрированные пользователи, Войдите на сайт под своим именем.

Запись добавлена

Комментарии

trem200 26.02.2017 в 18:36
Круто сделано
waak 28.02.2017 в 07:41
Спасибо! рад что вам понравилось.
tolyan163rus 25.02.2017 в 11:26
Отлично сделано!!! Спасибо Большое!!!
waak 28.02.2017 в 07:39
Пожалуйста! только в следующий раз не нужно писать в лс лучше создайте тему на форуме или в мастерской

Добавлять комментарии могут только зарегистрированные пользователи, Войдите на сайт под своим именем.