Гостевой вход

Вы не залогинились
00:12

Вид комментариев для модулей системы uCoz. ( Вариант 2 )

Категория: Разное

Метки: Вид комментариев
Сегодня выкладываю оформление комментариев в виде таймлайна (не поддерживается древовидность), либо без строки таймлайна с поддержкой древовидности комментариев. Установка простая, не требует создания в файловом менеджере каких-либо папок и загрузки файлов.



Комментарии со строкой таймлайна (без поддержки древовидности)

Предварительно в шапку сайта в шаблоне "Страница материалов и комментариев к нему" нужного вам модуля системы подключить этот файл css-стилей:

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


Установка проста и проходит в три этапа:

1. В шаблоне "Вид комментариев" заменяем код на этот:

Код

<li>  
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$" class="icon"/><?else?><img src="http://ps-studio.info/myforum/noavatar-300x300.png" class="icon"/><?endif?>
<h5><?if($MODER_PANEL$)?><div style="float:right;">$MODER_PANEL$</div><?endif?>
<i class="fa fa-user" aria-hidden="true"></i> <?if($USERNAME$)?><a itemprop="author" itemscope itemtype="https://schema.org/Person" href="$PROFILE_URL$" class="uc-profile-link"><span itemprop="name">$USERNAME$</span></a>  
<?else?>
<?if($SOC_LINK$)?><a itemprop="author" itemscope itemtype="https://schema.org/Person" rel="nofollow" href="$SOC_LINK$" class="uc-profile-link"><span itemprop="name">$NAME$</span></a>
<?else?><span itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="name">$NAME$</span></span><?endif?>
<?endif?> <?if($SOC_TYPE$)?><img style="width:10px;" src="/.s/img/icon/social/16/$SOC_TYPE$.png" alt="" /><?endif?></h5>
<p>$MESSAGE$</p>
<p><?if($ANSWER$)?><b>Ответ</b>: $ANSWER$<?endif?></p>
<div class="ps-footer clearfix">
<div class="comments">
<span style="font-size:10px;"># <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>
</span>
<span style="font-size:10px;color:#666;" itemprop="datePublished" content="$DATE_FORMATTED$ $TIME$">• $TIME$, $DATE$</span></div>
<div class="likes"><?if($GOOD_COMMENT_URL$)?>
<a href="$GOOD_COMMENT_URL$"><i class="fa fa-thumbs-o-up"></i></a>
<?if($COMMENT_RATING$ > 0)?><span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
<span itemprop="ratingValue">Like <b style="color:#339933;">$COMMENT_RATING$</b></span>
</span><?else?>Like $COMMENT_RATING$<?endif?>
<?else?><i class="fa fa-thumbs-o-up"></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>
</li>


2. В шаблоне "Страница материала и комментариев к нему" нужного вам модуля системы найдите системный код:

Код
$COM_BODY$


и оберните его в теги списка с классом "ps-comments":

Код
<ol class="ps-comments">$COM_BODY$</ol>


3. В Таблицу стилей (CSS) добавьте следующие стили:

Код

.clearfix:after,.clearfix:before {display:table;content:" "}
.clearfix:after {clear:both}
.ps-comments {
font-size:14px;color: #444;
  font-family: 'PT Sans', sans-serif;
  margin-left: 2em;
  border-left: 1px solid #e8e8eb;
  padding-left: 1.5em;
}

.ps-comments li {
  border: 1px solid #dedeea;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 1.2em;
  margin: 1em;
  display: block;
  position: relative
}

.ps-comments li .icon {
  height: 36px;
  width: 36px;
  border:2px solid #e8e8eb;
  text-align: center;
  -webkit-border-radius: 30% 30% 0;
  -moz-border-radius: 30% 30% 0;
  border-radius: 30% 30% 0;
  display: block;
  position: absolute;
  left: -55px;
  top: 0;

}
.ps-comments li:after,
.ps-comments li:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-left: 0
}
.ps-comments li:before {
  top: 1em;
  left: -8px;
  border-right-color: #dedeea;
  border-width: 7px
}

.ps-comments li:after {
  top: 1em;
  left: -7px;
  border-right-color: #fff;
  border-width: 7px
}
.ps-comments li .ps-footer {
  background-color: #f4f4f8;
  padding: 10px;
  font-size: 12px;
  color: #66757f
}
.ps-comments li .ps-footer .comments i,
.ps-comments li .ps-footer .likes i {
  margin-right: 5px;
  font-size: 16px
}
.ps-comments li .ps-footer .comments {
  float: left; font-size: 12px;
}
.ps-comments li .ps-footer .likes {
  float: right
}
.ps-comments li h5 {
  margin: 0 0 10px;
  padding: 0;
  text-transform: uppercase;
  color:#666;
}
.ps-comments li a:link {text-decoration:none;}
.ps-comments li a:active {text-decoration:none;}
.ps-comments li a:visited {text-decoration:none;}
.ps-comments li a:hover {text-decoration:underline;}


На этом установка нового оформления вида комментариев для uCoz завершена.

Не забудьте в Общих настройках сайта отключить использование древовидных комментариев.

Вид комментариев с поддержкой древовидности



Предварительно в шапку сайта в шаблоне "Страница материалов и комментариев к нему" нужного вам модуля системы подключить этот файл css-стилей:

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


В Общих настройках сайта включаем поддержку древовидности.

1. Шаблон "Вид комментариев" - заменяем весь код на этот:

Код

<li>  
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$" class="icon"/><?else?><img src="http://ps-studio.info/myforum/noavatar-300x300.png" class="icon"/><?endif?>
<h5><?if($MODER_PANEL$)?><div style="float:right;">$MODER_PANEL$</div><?endif?>
<i class="fa fa-user" aria-hidden="true"></i> <?if($USERNAME$)?><a itemprop="author" itemscope itemtype="https://schema.org/Person" href="$PROFILE_URL$" class="uc-profile-link"><span itemprop="name">$USERNAME$</span></a>  
<?else?>
<?if($SOC_LINK$)?><a itemprop="author" itemscope itemtype="https://schema.org/Person" rel="nofollow" href="$SOC_LINK$" class="uc-profile-link"><span itemprop="name">$NAME$</span></a>
<?else?><span itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="name">$NAME$</span></span><?endif?>
<?endif?> <?if($SOC_TYPE$)?><img style="width:10px;" src="/.s/img/icon/social/16/$SOC_TYPE$.png" alt="" /><?endif?></h5>
<p>$MESSAGE$</p>
<p><?if($ANSWER$)?><b>Ответ</b>: $ANSWER$<hr><?endif?> <?if($ANSWER_URL$)?><a class="answ" href="$ANSWER_URL$"><i class="fa fa-share-square" aria-hidden="true"></i> Ответить</a><?endif?></p>
<div class="ps-footer clearfix">
<div class="comments">
<span style="font-size:10px;"># <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>
</span>
<span style="font-size:10px;color:#666;" itemprop="datePublished" content="$DATE_FORMATTED$ $TIME$">• $TIME$, $DATE$</span></div>
<div class="likes"><?if($GOOD_COMMENT_URL$)?>
<a href="$GOOD_COMMENT_URL$"><i class="fa fa-thumbs-o-up"></i></a>
<?if($COMMENT_RATING$ > 0)?><span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
<span itemprop="ratingValue">Like <b style="color:#339933;">$COMMENT_RATING$</b></span>
</span><?else?>Like $COMMENT_RATING$<?endif?>
<?else?><i class="fa fa-thumbs-o-up"></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>
</li>


2. В Таблицу стилей (CSS) вставляем:

Код

.clearfix:after,.clearfix:before {display:table;content:" "}
.clearfix:after {clear:both}
a.answ:link {text-decoration:none;}
a.answ:active {text-decoration:none;}
a.answ:visited {text-decoration:none;}
a.answ:hover {text-decoration:none!important;color:#669966;}
.ps-comments {
font-size:14px;color: #444;
  font-family: 'PT Sans', sans-serif;
  margin-left: 2em;
  padding-left: 1.5em;
}

.ps-comments li {
  border: 1px solid #dedeea;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 1.2em;
  margin: 1em;
  display: block;
  position: relative
}

.ps-comments li .icon {
  height: 36px;
  width: 36px;
  border:2px solid #e8e8eb;
  text-align: center;
  -webkit-border-radius: 30% 30% 0;
  -moz-border-radius: 30% 30% 0;
  border-radius: 30% 30% 0;
  display: block;
  position: absolute;
  left: -55px;
  top: 0;

}
.ps-comments li:after,
.ps-comments li:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-left: 0
}
.ps-comments li:before {
  top: 1em;
  left: -8px;
  border-right-color: #dedeea;
  border-width: 7px
}

.ps-comments li:after {
  top: 1em;
  left: -7px;
  border-right-color: #fff;
  border-width: 7px
}
.ps-comments li .ps-footer {
  background-color: #f4f4f8;
  padding: 10px;
  font-size: 12px;
  color: #66757f
}
.ps-comments li .ps-footer .comments i,
.ps-comments li .ps-footer .likes i {
  margin-right: 5px;
  font-size: 16px
}
.ps-comments li .ps-footer .comments {
  float: left; font-size: 12px;
}
.ps-comments li .ps-footer .likes {
  float: right
}
.ps-comments li h5 {
  margin: 0 0 10px;
  padding: 0;
  text-transform: uppercase;
  color:#666;
}
.ps-comments li a:link {text-decoration:none;}
.ps-comments li a:active {text-decoration:none;}
.ps-comments li a:visited {text-decoration:none;}
.ps-comments li a:hover {text-decoration:underline;}


3. В шаблоне "Страниц материала и комментариев к нему" нужного вам модуля системы найти код:

Код
$COM_BODY$


и обернуть его в теги списка с классом "ps-comments"

Код
<ol class="ps-comments">$COM_BODY$</ol>



Просмотров: 118 | Комментариев: 0 | Рейтинг: 0.0/Оценок: 0

Материалы схожей тематики

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

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

    Вид комментариев для модулей системы uCoz

    Сегодня выкладываю адаптивный вид комментариев для модулей системы uCoz. Древовидные комментарии поддерживаются.

Онлайн статистика

18.11.2017

Суббота

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

На сайте сейчас: