Главная » Для UCOZ » 2017 » Сентябрь » 28 » ВИД КОММЕНТАРИЕВ ДЛЯ МОДУЛЕЙ СИСТЕМЫ UCOZ. ( ВАРИАНТ 3 )

Разное

ВИД КОММЕНТАРИЕВ ДЛЯ МОДУЛЕЙ СИСТЕМЫ UCOZ. ( ВАРИАНТ 3 )



Теги: Вид комментариев


Еще один вид комментариев для модулей системы Ucoz. Оформление в виде новомодного тайм-лайн (к слову сказать, древовидность не поддерживается). Есть возможность выделения комментариев конкретных пользователей, например, администраторов, бейджем с надписью, к примеру, "Админ".
Установку вида комментариев рассмотрим, к примеру, для модуля "Новости".

Предварительно, войти в ОБЩИЕ НАСТРОЙКИ и убрать галочку напротив опции "Использовать древовидный режим вывода комментариев". Сохранить внесённые изменения.

Установка

1. В шаблоне "НОВОСТИ САЙТА - Страница материала и комментариев к нему" в шапке подключить шрифт Font Awesome

Код

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">


Тут же, в коде этого шаблона найди системный код:

Код
$COM_BODY$


и оформить его таким образом:

Код
<div class="comments-container"><ul id="comments-list" class="comments-list">$COM_BODY$</ul></div>


Сохраните изменения в шаблоне.

2. Перейти в шаблон "КОММЕНТАРИИ - Вид комментариев" и заменить в нём весь код на этот:

Код

<li>
<div class="comment-main-level">
<div class="comment-avatar"><?if($USER_AVATAR_URL$)?>
<?if($SOC_LINK$)?><a rel="nofollow" href="$SOC_LINK$" title="$USERNAME$"><img src="$USER_AVATAR_URL$" alt="avatar" /></a>
<?else?><a href="$PROFILE_URL$" title="$USERNAME$"><img src="$USER_AVATAR_URL$" alt="avatar" /></a><?endif?>
<?else?><img src="/.s/img/icon/social/noavatar.png" alt="avatar" /><?endif?></div>
<div class="comment-box"><div class="comment-head">
<?if($UID$=1)?><h6 class="comment-name by-author">
<?if($USERNAME$)?><a href="$PROFILE_URL$">$USERNAME$</a><?else?>
<?if($SOC_LINK$)?><a rel="nofollow" href="$SOC_LINK$">$NAME$</a><?else?>$NAME$<?endif?><?endif?>
<a href="#ent$ID$" onclick="prompt('', location.protocol + '//' + location.hostname + location.pathname + location.search + '#comEnt$ID$' ); if (document.getElementById('comEnt$ID$') ) { $('body').scrollTo({top:$('#comEnt$ID$').offset().top-54, left:0 }, 500 ); return false; }" name="ent$ID$"> <b>(# $NUMBER$)</b></a>
</h6><?else?>
<h6 class="comment-name"><?if($USERNAME$)?><a href="$PROFILE_URL$">$USERNAME$</a><?else?>
<?if($SOC_LINK$)?><a rel="nofollow" href="$SOC_LINK$">$NAME$</a><?else?>$NAME$<?endif?>
<?endif?>
<a href="#ent$ID$" onclick="prompt('', location.protocol + '//' + location.hostname + location.pathname + location.search + '#comEnt$ID$' ); if (document.getElementById('comEnt$ID$') ) { $('body').scrollTo({top:$('#comEnt$ID$').offset().top-54, left:0 }, 500 ); return false; }" name="ent$ID$"> <b>(# $NUMBER$)</b></a></h6>
<?endif?></h6>
<span style="font-size:9px;">$TIME$, $DATE$</span>
<div style="float:right;">
<?if($GOOD_COMMENT_URL$)?>  
<a href="$GOOD_COMMENT_URL$"><i class="fa fa-heart" aria-hidden="true"></i></a>  
<?if($COMMENT_RATING$ > 0)?><span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">  
<span itemprop="ratingValue"><b style="color:#339933;">$COMMENT_RATING$</b></span>  
</span><?else?> $COMMENT_RATING$<?endif?>  
<?else?><i class="fa fa-heart" aria-hidden="true"></i>  
<?if($COMMENT_RATING$ > 0)?><span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">  
<span itemprop="ratingValue">$COMMENT_RATING$</span></span>  
<?else?>$COMMENT_RATING$<?endif?><?endif?></div>
</div>
<div class="comment-content">
$MESSAGE$
<?if($ANSWER$)?><div class="uc-answer cAnswer"><b>Ответ</b>: $ANSWER$</div><?endif?>
  <?if($ANSWER_URL$)?><div class="uc-answer-link"><a href="$ANSWER_URL$">Ответить</a></div><?endif?>
<?if($MODER_PANEL$)?>$MODER_PANEL$<?endif?>
</div></div></div>
</li>


Сохранить изменения в шаблоне.

3. Теперь поговорим о CSS-стилях оформления комментариев. Для начала, войдите в таблицу стилей CSS своего сайта. Стандартно все стили оформления сайта находятся в шаблоне "Таблица стилей (CSS)", я больше люблю выносить все стили в отдельный файл. Не суть.
Нам нужно найти стили для класса .report-spam-toggle-wrapper и заменить их нашими:

Код

.report-spam-toggle-wrapper {
  text-align: center;
  color: gray;
  font-weight:700;
  padding: 10pt 0;
  margin: 10px 0px;
  border:none!important;
}


Теперь добавим сами стили для оформления комментариев:

Код

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }

.com-order-block {
padding:0px 0px 30px 0px;
color:#595959;
}

.comments-container {
  margin: 60px auto 15px;
  width: 768px;
}

.comments-container a {
text-decoration:none;
}

.comments-list {
  margin-top: 30px;
  position: relative;
}

.comments-list:before {
  content: '';
  width: 2px;
  height: 100%;
  background: #c7cacb;
  position: absolute;
  left: 32px;
  top: 65px;
}

.comments-list:after {
  content: '';
  position: absolute;
  background: #c7cacb;
  bottom: 0px;
  left: 28px;
  width: 4px;
  height: 4px;
  border: 3px solid #dee1e3;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.comments-list li {
  margin-bottom: 15px;
  display: block;
  position: relative;
}

.comments-list li:after {
  content: '';
  display: block;
  clear: both;
  height: 0;
  width: 0;
}

.comments-list .comment-avatar {
  width: 65px;
  height: 65px;
  position: relative;
  z-index: 99;
  float: left;
  border: 3px solid #FFF;
  -webkit-border-radius: 30% 30% 0 ;  
  -moz-border-radius: 30% 30% 0 ;  
  border-radius: 30% 30% 0 ;  
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  overflow: hidden;
}

.comments-list .comment-avatar img {
  width: 100%;
  height: 100%;
}

.comment-main-level:after {
  content: '';
  width: 0;
  height: 0;
  display: block;
  clear: both;
}

.comments-list .comment-box {
  width: 680px;
  float: right;
  position: relative;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
  box-shadow: 0 1px 1px rgba(0,0,0,0.15);
}

.comments-list .comment-box:before, .comments-list .comment-box:after {
  content: '';
  height: 0;
  width: 0;
  position: absolute;
  display: block;
  border-width: 10px 12px 10px 0;
  border-style: solid;
  border-color: transparent #FCFCFC;
  top: 8px;
  left: -11px;
}

.comments-list .comment-box:before {
  border-width: 11px 13px 11px 0;
  border-color: transparent rgba(0,0,0,0.05);
  left: -12px;
}

.comment-box .comment-head {
  background: #FCFCFC;
  padding: 10px 12px;
  border-bottom: 1px solid #E5E5E5;
  overflow: hidden;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
}

.comment-box .comment-head i {
  float: right;
  margin-left: 5px;
  position: relative;
  top: 3px;
  color: #A6A6A6;
  cursor: pointer;
  -webkit-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.comment-box .comment-head i:hover {
  color: #cc0000;
}

.comment-box .comment-name {
  color: #283035;
  font-size: 14px;
  font-weight: 700;
  float: left;
  margin-right: 10px;
}

.comment-box .comment-name a {
  color: #283035;
}

.comment-box .comment-head span {
  float: left;
  color: #999;
  font-size: 13px;
  position: relative;
  top: 1px;
}

.comment-box .comment-content {
  background: #FFF;
  padding: 12px;
  font-size: 12px;
  color: #595959;
  -webkit-border-radius: 0 0 4px 4px;
  -moz-border-radius: 0 0 4px 4px;
  border-radius: 0 0 4px 4px;
}

.comment-box .comment-name.by-author, .comment-box .comment-name.by-author a {color: #03658c;}
.comment-box .comment-name.by-author:after {
  content: 'Админ';
  background: #f4786e;
  color: #FFF;
  font-size: 10px;
  padding: 3px 5px;
  font-weight: 700;
  margin-left: 5px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

@media only screen and (max-width: 766px) {
  .comments-container {
  width: 480px;
  }

  .comments-list .comment-box {
  width: 390px;
  }

}


Вот такая несложная установка. Вживую оформление комментариев можно посмотреть на демо-странице.
Обсуждение материала:
Комментариев: 0
avatar

Новые пользователи

Хостинг от uCoz