Рейтинг: 2.0/1

Метки

вид комментариев для ucoz

Опрос: Чего добавлять больше?

Чего добавлять больше?
Всего ответов: 91

Главная » 2011 » Ноябрь » 26 » Простой вид комментариев для сайтов на uCoz-платформе



Посмотрите для начала скриншот получающегося вида комментариев



Установка

1. В Общих настройках сайта уберите галочку рядом с полем "Использовать древовидный режим вывода комментариев"

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

Code
<?if($USERNAME$='ЗДЕСЬ УКАЗЫВАЕТЕ ВАШ ЛОГИН АДМИНИСТРАТОРА')?>
<li class="comment admincomment authorcomment " id="comment-$NUMBER$">
<div class="gravatar"><?if($USER_AVATAR_URL$)?><img alt='' src='$USER_AVATAR_URL$' class='avatar avatar-72 photo' height='72' width='72' />
<?else?><img src="http://all-sites.ucoz.ru/img/noavatar.png" border="0" alt="" class='avatar avatar-72 photo' height='72' width='72'/>
<?endif?>
</div>
<div class="comment_entry">
<div class="normal_link">
<span class="floatleft"><strong><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><?if($IS_OWN$)?><span class="myWinError">*</span> <?else?><?if($IS_NEW$)?><span class="myWinSuccess">*</span> <?endif?><?endif?>#$NUMBER$.</b> </a><?if($USERNAME$)?><a href="$PROFILE_URL$">$USERNAME$</a><?else?>$NAME$<?endif?></strong> $DATE$ $TIME$</span>
<span class="floatright"><?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://s18.ucoz.net/img/icon/thumbu.png" width="13" align="absmiddle" border="0" title="Хороший пост"></a> <a href="$BAD_COMMENT_URL$"><img alt="" src="http://s18.ucoz.net/img/icon/thumbd.png" width="13" border="0" align="absmiddle" title="Плохой пост"></a><?else?><img alt="" src="http://s18.ucoz.net/img/icon/thumbu_.png" align="absmiddle" width="13" border="0" title="Хороший пост"> <img alt="" src="http://s18.ucoz.net/img/icon/thumbd_.png" width="13" align="absmiddle" border="0" title="Плохой пост"><?endif?> $MODER_PANEL$</span>
<p>$MESSAGE$

<?if($ENTRY_URL$)?>[<a href="$ENTRY_URL$" target="_blank" title="Перейти на страницу материала">Материал</a>]<?endif?>
<?if($ANSWER$)?><div class="cAnswer" style="text-align:left;clear:both;"><b>Ответ</b>: $ANSWER$</div><?endif?>
<?if($ANSWER_URL$)?><div style="clear:both;padding:4px 0;font-size:7pt;">[<a href="$ANSWER_URL$">Ответить</a>]</div><?endif?>
</p>
</div></div>
</li>
<?else?>
<li class="comment " id="comment-$NUMBER$">
<div class="gravatar"><?if($USER_AVATAR_URL$)?><img alt='' src='$USER_AVATAR_URL$' class='avatar avatar-72 photo' height='72' width='72' />
<?else?><img src="http://all-sites.ucoz.ru/img/noavatar.png" border="0" alt="" class='avatar avatar-72 photo' height='72' width='72'/>
<?endif?>
</div>
<div class="comment_entry">
<div class="normal_link">
<span class="floatleft"><strong><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><?if($IS_OWN$)?><span class="myWinError">*</span> <?else?><?if($IS_NEW$)?><span class="myWinSuccess">*</span> <?endif?><?endif?>#$NUMBER$.</b> </a><?if($USERNAME$)?><a href="$PROFILE_URL$">$USERNAME$</a><?else?>$NAME$<?endif?></strong> $DATE$ $TIME$</span>
<span class="floatright"><?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://s18.ucoz.net/img/icon/thumbu.png" width="13" align="absmiddle" border="0" title="Хороший пост"></a> <a href="$BAD_COMMENT_URL$"><img alt="" src="http://s18.ucoz.net/img/icon/thumbd.png" width="13" border="0" align="absmiddle" title="Плохой пост"></a><?else?><img alt="" src="http://s18.ucoz.net/img/icon/thumbu_.png" align="absmiddle" width="13" border="0" title="Хороший пост"> <img alt="" src="http://s18.ucoz.net/img/icon/thumbd_.png" width="13" align="absmiddle" border="0" title="Плохой пост"><?endif?> $MODER_PANEL$</span>
<p>$MESSAGE$

<?if($ENTRY_URL$)?>[<a href="$ENTRY_URL$" target="_blank" title="Перейти на страницу материала">Материал</a>]<?endif?>
<?if($ANSWER$)?><div class="cAnswer" style="text-align:left;clear:both;"><b>Ответ</b>: $ANSWER$</div><?endif?>
<?if($ANSWER_URL$)?><div style="clear:both;padding:4px 0;font-size:7pt;">[<a href="$ANSWER_URL$">Ответить</a>]</div><?endif?>
</p>
</div></div>
</li>
<?endif?>


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

Code
$COM_BODY$


и перепишите так

Code

<ol class="commentlist"> $COM_BODY$ </ol>


4. В таблицу стилей CSS внесите строки

Code

.admincomment {

background-color:#eee;

width:600px;  

}

.authorcomment{

color:#666;

font-style:italic;

font-weight:bold;

}

.gravatar{

float:left;

width:90px;

height:85px;

position:relative;

}

.comment_entry{

float:left;

width:580px;

}

.comment_entry p{

clear:both;

}

.commentlist{

list-style-type:none;

list-style-position:outside;

margin:0;

padding:0;

border-top: 1px solid #dedede;

}

.commentlist li{

border-bottom:1px solid #dedede;

clear:both;

float:left;

line-height:1.5em;

padding:5px 0 0;

width:680px;

}

.commentlist li .floatright{

font-size:0.917em;float:right;

}


5. Настройки

5.1 Чтобы оформление вида комментариев администратора отличалось от комментариев других пользователей, в шаблоне "Вид комментариев" в строке в самом начале

Code

<?if($USERNAME$='ЗДЕСЬ УКАЗЫВАЕТЕ ВАШ ЛОГИН АДМИНИСТРАТОРА')?>


укажите ваш логин администратора

5.2 Подогнать ширину комментариев под ширину страницы вашего сайта можно в файле стилей здесь (параметр width):

Code

.commentlist li{

border-bottom:1px solid #dedede;

clear:both;

float:left;

line-height:1.5em;

padding:5px 0 0;

width:680px;

}


5.3 Подогнать ширину части, в которой выводится сам текст комментария (без учета аватара), можно здесь (параметр width):

Code

.comment_entry{

float:left;

width:580px;

}


На этом всё.
Ссылка:
BB-код:
HTML-код:
Всего комментариев: 0
Оставь комментарий первым!
Имя *:
Email:
Код *: