» »

Новый вид комментариев для сайта ucoz


Новый вид комментариев для сайта ucoz

Новый вид комментариев для сайта ucoz. Красивый темный вид, выполнен по дизайну красиво. И на темных дизайн сайтах если поставить, то как говориться , кашу маслом не испортишь. Вид комментариев по своему дизайну заметен, так же в нем есть несколько функций.
Приступаем, как установить и что первое начнем устанавливать. А первое начнем устанавливать сам вид. Админка - вид комментариев, от туда все убираем и вставляем этот код.
Если есть папка images то в ней создаем следующие папку comment если нет то в таком порядке создаем и в последнюю папку заливаем файлы.
Это меняем в комментах.
Код
<fieldset style="padding:5px;"><table cellpadding="0" cellspacing="0" width="100%" style="background:#212121;"><tr valign="top">  
<td width="95"><div class="avatar"><div class="comment-avatar">  
<?if($USER_AVATAR_URL$)?>  
<img title="$USERNAME$" class="userAvatar" border="0" src="$USER_AVATAR_URL$" alt="" />  
<?else?>  
<img title="$USERNAME$" border="0" src="http://ucoz-css.ru/images/comment/noavatar.gif"$USER_AVATAR_URL$ alt="" />  
<?endif?>  
</div>  
<div class="clear"></div>  
</div>  
<div><a href="$PROFILE_URL$" target="_blank" title="Профиль"><img src="http://icons.iconarchive.com/icons/fatcow/farm-fresh/16/administrator-icon.png" alt="" /><a href="http://www.ripe.net/perl/whois?$IP_ADDRESS$" target="_blank" title="IP Address"><img src="http://icons.iconarchive.com/icons/mayosoft/azullustre/16/Admin-min-icon.png" alt="" /></div>  
</div>  
</td>  
<td>  
<table class="comblock" width="100%" border="0" cellspacing="0" cellpadding="0">  
<tr>  
<td width="28"><img src="/images/comment/cblock_left_top.gif" width="28" height="12" alt="" /></td>  
<td class="cblock-top"></td>  
<td width="12"><img src="/images/comment/cblock_right_top.gif" width="12" height="12" alt="" /></td>  
</tr>  
<tr valign="top">  
<td class="cblock-left"><img src="/images/comment/cblock_left_mtop.gif" width="28" height="91" alt="" /></td>  
<td class="cblock-content">  
<span class="newstitle">$TITLE$</span>  
<table cellpadding="0" cellspacing="0" width="100%"><tr>  
<td>Написал: <a href="$PROFILE_URL$"><b>$USERNAME$</b></a> | Дата: $DATE$, $TIME$, $MODER_PANEL$</td><td width="13%"><?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="myWinSucces"><b>+$COMMENT_RATING$</b></span><?endif?><?endif?> <?if($GOOD_COMMENT_URL$)?><a href="$GOOD_COMMENT_URL$"><img src="/images/comment/comment.png" width="13" align="absmiddle" border="0" title="+1"></a> <a href="$BAD_COMMENT_URL$"><img src="/images/comment/comment-.png" width="13" border="0" align="absmiddle" title="-1"></a><?else?><img src="/images/comment/comment.png" align="absmiddle" width="13" border="0" title="+1"> <img src="/images/comment/comment-.png" width="13" align="absmiddle" border="0" title="-1"><?endif?> </div><div class="cTop" style="text-align:left;"><?if($IS_OWN$)?><?else?><?if($IS_NEW$)?><span class="myWinSuccess"></span> <?endif?><?endif?><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></b></a>  
</div><div class="clr"></div>  
</td></td>  
</tr></table>  
<div class="division"></div>  
$MESSAGE$  
<div align='right'>  
<?if($ANSWER_URL$)?><a href="$ANSWER_URL$"><img src="/images/comment/answer.png" border="0" alt="" /></a><?endif?>  
<a href="javascript://" onclick="Insert('$USERNAME$',document.getSelection());"><img src="/images/comment/qwote.png" border="0" alt="" /></a>  
<script type="text/javascript">  
function Insert(qname,text){  
  if (text!=""){ qname=qname.replace(/[\[\]]/g, "|"); document.getElementById('message').value += "[quote="+qname+"]"+text+"[/quote]\n"; document.getElementById(wh).focus(); document.getElementById(wh).focus()}  
  else _uWnd.alert('Выделите текст для цитирования','',{w:230,h:80,tm:3000});  
}  
</script>  
<td class="cblock-right"><img src="/images/comment/cblock_right_mtop.gif" width="12" height="62" alt="" /></td>  
</tr>  
<tr>  
<td width="28"><img src="/images/comment/cblock_left_bottom.gif" width="28" height="12" alt="" /></td>  
<td class="cblock-bottom"></td>  
<td width="12"><img src="/images/comment/cblock_right_bottom.gif" width="12" height="12" alt="" /></td>  
</tr>  
</table>  
</td>  
</tr>  
</table></fieldset>

Потом следуем в CSS и прописываем там стили к виду комментариев.
Код
table.comblock {background-color: #161616; }  
table.comblock td.cblock-content {background: transparent url("../images/comment/cblock_center_mtop.gif")left top repeat; }  
table.comblock td.cblock-left { vertical-align: top; background: url("../images/comment/cblock_middle_left.gif") left top repeat-y;}  
table.comblock td.cblock-right { vertical-align: top; background: url("../images/comment/cblock_middle_right.gif") right top repeat-y;}  
table.comblock td.cblock-top {background: url("../images/comment/cblock_center_top.gif") left top repeat-x;}  
table.comblock td.cblock-bottom {background: url("../images/comment/cblock_center_bottom.gif") left bottom repeat-x;}  
table.comblock div.maincont { padding: 4px; }  
.avatar img { width: 100px; height: auto; }


22.10.2012 Загрузок: 3 Просмотров: 1397 Комментарий: (7)

Поделиться в социальных сетях

Материал разместил

Комментарий: 7
yurik
yurik 18.08.2013 03:371
0
картинок нет ((((
Kosten
Kosten 18.08.2013 03:532
0
Да вижу, архив шел видать, не досмотрел. Постараюсь все найти и исправить.
yurik
yurik 18.08.2013 03:593
0
Kosten, с терпеньем буду ждать, добавлю в закладку... ok
Kosten
Kosten 18.08.2013 15:094
0
yurik, без архива идет fie
ucozmental
ucozmental 16.01.2016 23:515
0
Но вот почему всегда не темный дизайн идут красивые виды.
Сафрон
Сафрон 17.01.2016 00:036
0
Так вы в поиск забейте или не гугл или здесь на сайте и можно будет что то похожее и лучше найти.
Maryges
Maryges 17.01.2016 00:207
0
Но реально он выглядит как на втором изображение.
avatar