Понеділок, 28.07.2025, 01:41
Приветствую Вас Гість | Регистрация | Вход

4web-master.at.ua

Меню сайта
Програми
Windows
Ігри на Андроїд
Ігри
Реклама
Вход на сайт
Поиск
Календарь
«  Липень 2015  »
Пн Вт Ср Чт Пт Сб Нд
  12345
6789101112
13141516171819
20212223242526
2728293031
Архив записей
Наш опрос
Оцените мой сайт
Всього відповідей: 9
Статистика

Онлайн всього: 1
Гостей: 1
Користувачів: 0

Блог

Главная » 2015 » Липень » 28 » Продвинутый вид комментариев для сайта на uCoz
23:04
Продвинутый вид комментариев для сайта на uCoz

На этот раз я хочу показать вам как легко и просто можно усовершенствовать вид комментариев для сайта на uCoz. После небольших изменений в коде форма добавления комментариев на вашем сайте существенно преобразится. 

Прежде всего, нужно убедится, что функция "Комментарии" используется для данного модуля. Если нет, ее 

Для того, что бы изменить внешний вид комментариев нужно скопировать приведенный ниже html код и вставить его вместо старого в шаблоне "Вид комментариев": 

<div class="cell_comment">  
  <div class="comment_top">  
  <strong class="comment_name"><?if($USERNAME$)?>$USERNAME$ <?else?>$NAME$<?endif?></strong>  
  <span> пишет: | $DATE$ | $TIME$ <?if($MODER_PANEL$ && $EMAIL$)?><a href="$EMAIL_JS$" title="Email"> ( E-mail )</a><?endif?></span>  
  <a href="#ent$ID$" onclick="if (document.getElementById('comEnt$ID$')){$('body').scrollTo( { top:$('#comEnt$ID$').offset().top-22, left:0}, 500 );return false;}" name="ent$ID$"><strong class="comment_number">#$NUMBER$</strong></a>  
  <?if($ENTRY_URL$)?><a class="comment_page" href="$ENTRY_URL$" target="_blank" title="Перейти на страницу материала">Страница с комментарием </a><?endif?> <?if($MODER_PANEL$)?><span class="comment_mp">$MODER_PANEL$</span><?endif?>  
  </div>  
  <div class="comment_message">  
  <?if($USERNAME$)?><a href="$PROFILE_URL$"><img class="comment_avatar" alt="$USERNAME$" src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>http://uguide.ru/img/no_avatar.jpg<?endif?>" /></a><?else?><img src="http://uguide.ru/img/no_avatar.jpg" class="comment_avatar" alt="аватар отсутствует" /><?endif?>  
  $MESSAGE$  
  <?if($ANSWER$)?><div class="comment_answer_admin"><a href="/index/8-1" ><img class="comment_avatar_admin" alt="админ" src="http://uguide.ru/img/ava.jpg"></a>$ANSWER$</div><?endif?>  
  </div>  
  <div class="comment_bottom">  
  <?if($ANSWER_URL$)?><a href="$ANSWER_URL$" class="comment_answer">Ответить</a><?endif?>  
  <strong> <?if($COMMENT_RATING$>0)?>Like | +$COMMENT_RATING$ <?endif?> <?if($COMMENT_RATING$=0)?><?if($GOOD_COMMENT_URL$)?><?else?>Like |<?endif?> $COMMENT_RATING$ <?endif?></strong>  
  <?if($GOOD_COMMENT_URL$)?><a class="comment_like" href="$GOOD_COMMENT_URL$">Like</a><?endif?>  
  </div>  
</div>

 

Скриншот для наглядности: 

Хочу обратить ваше внимание на маленькую деталь - url аватара и ссылку на страницу администратора в ячейке оператора $ANSWER$ нужно прописать вручную. 
В самый конец "Таблицы стилей" добавляем CSS код: 

/* Обновленный вид комментариев для uCoz с аватарами  
------------------------------------------*/  
.cell_comment {  
  float:left;  
  width:100%;  
  color:#666;  
  background:#fff;  
  margin: 10px 0px;  
  border: 5px solid #bdd3e0;  
  border-radius:3px; overflow: hidden;  
}  

.comment_top {  
  float:left;  
  width:100%;  
  padding:5px 0px;  
  background:#F4F8F9;  
  border-bottom: 1px solid #E6F0F2;  
}  

.comment_name{  
  margin-left: 20px;  
  color:#34AB63;  
}  

.comment_number {  
  float:right;  
  background:#f5f7f9;  
  margin-right: 20px;  
}  

.comment_top span {  
  font:9px Verdana,Arial,Helvetica, sans-serif;  
  color:#999;  
}  

.comment_mp,  
.comment_page {  
  float:right;  
  margin-right: 20px;  
}  

.comment_message {  
  float:left;  
  font:115%/1.5 Verdana,Arial,Helvetica, sans-serif;  
  text-align:justify;  

  width:94%;  
  overflow: hidden;  
  padding: 10px 20px 15px 20px;  
}  

.comment_avatar {  
  float:right;  
  width:50px;  
  height:50px;  
  margin: 0px 0px 10px 20px;  
  border: 3px solid #bdd3e0;  
  border-radius:3px;  
}  

.comment_bottom {  
  float:left;  
  width:100%;  
  padding:6px 0px 5px 0px;  
  background:#F4F8F9;  
  border-top: 1px solid #E6F0F2;  
  font:10px Verdana,Arial,Helvetica, sans-serif;  
}  

.comment_answer:link,  
.comment_answer:visited{  
  float:left;  
  margin: 0px 0px 0px 20px;  
  background:#8cbec9;  
  padding: 2px 7px 2px 7px;  
  text-shadow: 1px 1px 1px #5d97a4;  
  color:#fff;  
}  

.comment_answer:hover {  
  background:#9dd0db;  
}  

.comment_answer:active {  
  box-shadow:inset 0px 0px 3px #5a95a2!important;  
}  

.comment_like:link,  
.comment_like:visited{  
  float:right;  
  background:#8ec98c;  
  padding: 2px 7px 2px 7px;  
  text-shadow: 1px 1px 1px #4aa44c;  
  color:#fff;  
}  

.comment_like:hover {  
  background:#abe6a9;  
}  

.comment_like:active {  
  box-shadow:inset 0px 0px 3px #349932!important;  
}  

.comment_bottom strong {  
  float:right;  
  padding: 2px 10px 2px 10px;  
  background:#dde9d9;  
  margin-right: 20px;  
}  

.comment_answer_admin{  
  float:left;  
  width:94%;  
  margin-top: 10px;  
  padding: 10px 20px 10px 20px;  
  background:#f4ecec;  
  border-radius:3px;  
}  

.comment_avatar_admin{  
  float:right;  
  width:50px;  
  height:50px;  
  margin: 0px 0px 10px 25px;  
  border: 3px solid #dca2a2;  
  border-radius:3px;  
}  

.cell_comment a:hover img {  
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85);  
  -moz-opacity: 0.7;  
  opacity: 0.7;  
  filter: alpha(opacity=85);  
}
 

Скрин: 

Вот и все, как видите изменить внешний вид комментариев на uCoz проще простого... 

Просмотров: 469 | Добавил: volodumur | Рейтинг: 0.0/0