Ещё один вид комментариев для сайтов на uCoz-платформе

Установка

1. Скачиваем архив с исходниками изображений.
2. Закачиваем файлы изображений через файловый менеджер в корневую папку своего сайта.
3. Открываем в Панели управления своим сайтом редактирование шаблона страницы с комментариями. Для примера я выбрал шаблон "Новости сайта - Страница материала и комментариев к нему". Находим в нём строку:

Code

и заменяем её следующей строкой:

Code

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

4. Теперь открываем файл со стилями CSS и добавляем в него стили для оформления наших комментариев:

Code

#comments {background:#ececec; border-top:1px solid #f5f5f5; border-bottom: 1px solid #dadada; position:relative;margin-top:20px;padding:25px 25px 20px;}
#comments h3{ font-size:16px; color:#777; padding-bottom:10px; }
#comments .comment{margin-top:10px;width:100%;list-style-type:none;}
#comments .avatar { float: left; }
#comments img.avatar { background:#fff; padding:4px; border:1px solid #ddd; }
#comments .comment-right { margin-left: 95px; }
#comments .comment .comment-container { padding: 3px 0; }
#comments .comment-head { background:#e4e4e4 url(/bg-comment-head.png) repeat-x bottom; border:1px solid #d8d8d8; height:40px; line-height:40px; padding:0 15px;margin: 0; }
#comments .comment-head .name { font-family:Georgia, serif; font-style:italic; margin: 0 0 -5px 0; font-weight: bold; font-size: 12px; }
#comments .comment-head .date { margin-right:10px; }
#comments .comment-head .date a, #comments .comment-head .edit { font-size: 11px; color:#777; }
#comments .comment-entry { background:#fff; border:1px solid #d8d8d8; color:#555; padding:20px 15px 10px 15px; border-width:0 1px 1px 1px; font-size:14px; line-height:20px; }
#comments .comment-entry p { margin: 0 0 10px 0;}

Сохраняем изменения и переходим в редактирование шаблона "Вид комментариев". Весь имеющийся в нём код заменяем на такой:

Code

<li class="comment even thread-even depth-1" id="li-comment-$NUMBER$">
<a name="comment-$NUMBER$"></a>
<div class="comment-container">
<div class="avatar"><?if($USER_AVATAR_URL$)?><img alt='' src='$USER_AVATAR_URL$' class='photo avatar avatar-70 photo' height='70' width='70' /><?endif?></div>
<div class="comment-right">
<div class="comment-head">
<div style="float:right;font-size:11px;font-family:Arial,sans-serif;"><?if($COMMENT_RATING$<0)?><span class="myWinError"><b>$COMMENT_RATING$</b></span><?else?><?if($COMMENT_RATING$=0)?><span style="color:gray;"><b>$COMMENT_RATING$</b></span><?else?><span class="myWinSuccess"><b>+$COMMENT_RATING$</b></span><?endif?><?endif?> <?if($GOOD_COMMENT_URL$)?><a href="$GOOD_COMMENT_URL$"><img alt="" src="http://s15.ucoz.net/img/icon/thumbu.png" width="13" align="absmiddle" border="0" title="Хороший пост"></a> <a href="$BAD_COMMENT_URL$"><img alt="" src="http://s15.ucoz.net/img/icon/thumbd.png" width="13" border="0" align="absmiddle" title="Плохой пост"></a><?else?><img alt="" src="http://s15.ucoz.net/img/icon/thumbu_.png" align="absmiddle" width="13" border="0" title="Хороший пост"> <img alt="" src="http://s15.ucoz.net/img/icon/thumbd_.png" width="13" align="absmiddle" border="0" title="Плохой пост"><?endif?> $MODER_PANEL$</div>
<span class="name fl"><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$"><b>$NUMBER$</b></a><?if($IS_OWN$)?><span class="myWinError">*</span> <?else?><?if($IS_NEW$)?><span class="myWinSuccess">*</span> <?endif?><?endif?> <?if($USERNAME$)?><a href="$PROFILE_URL$"><b>$USERNAME$</b></a><?else?><b>$NAME$</b><?endif?></span>
<span class="reply fr"></span>
<span class="date fr">$DATE$, $TIME$</span>
<span class="edit fr"></span>
</div>
<div class="comment-entry" id="comment-48445">
<p>$MESSAGE$ </p>
<?if($ANSWER$)?><p><b>Ответ</b>: $ANSWER$</p><?endif?>
<?if($ANSWER_URL$)?><p><a href="$ANSWER_URL$">Ответить</a></p><?endif?>
<?if($ENTRY_URL$)?><p><a href="$ENTRY_URL$" target="_blank" title="Перейти на страницу материала">Материал</a></p><?endif?>
</div></div></div>
</li>

Сохраняем изменения в шаблоне. На этом всё, вы получили новый вид комментариев для своего сайта.

Ссылка:

BB-код:

HTML-код:

Ещё по теме:

Всего комментариев: 1