Новый вид коментариев

Новый вид коментариев

22012-07-2140983Денис Абдуллин
Я подумал и решил сделать свой вид комментариев для uCoz. Самое главное его отличие от других подобных материалов – это расположение аватара справа, а не слева, как обычно. Еще в этом виде комментария предусмотрен вид кнопки Like. Функция голосования за комментарии стандартная, можно сказать, что просто убрали кнопку для минуса.

Установка

Панель управления » Управление дизайном » Вид комментариев

Code
<div style="border-bottom:1px solid #ccc; background:#f5f5f5 url(/images/new/highlight_faint.png) repeat-x top; padding:5px 5px; color:#999; text-shadow:0px -1px 0px #fff;">  
<div style="float:right;"><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$" width="50"><?else?><img src="http://uweb.su/images/noava.png" width="50"><?endif?></div>  
<div style="style="float:left;margin-left:6px;"><a href="$PROFILE_URL$"><b><?if($USERNAME$)?>$USERNAME$<?else?>$NAME$<?endif?></b></a></span><span style="padding:0px 5px;"></span> Добавил(а) <img src="http://uzerip.my1.ru/images/image_arrow_olive.png" style="margin-bottom: -1px; margin-right: 1px;"> $DATE$ $TIME$ $ANSWER_URL$<img src="http://uzerip.my1.ru/images/image_arrow_olive.png" style="margin-bottom: -1px; margin-right: 1px;"> $MODER_PANEL$  
<img src="http://uzerip.my1.ru/images/image_arrow_olive.png" style="margin-bottom: -1px; margin-right: 1px;"><a class="likees" href="$GOOD_COMMENT_URL$">Like <?if($COMMENT_RATING$=0)?>$COMMENT_RATING$<?else?>$COMMENT_RATING$<?endif?></a> <img src="http://uzerip.my1.ru/images/image_arrow_olive.png" style="margin-bottom: -1px; margin-right: 1px;"> Комментарий №$NUMBER$  
</td>  
<div style="border-bottom:1px solid #cccccc;margin:6px 0 6px 0"></div>  
<div style="margin-top:3px;text-align:left;">$MESSAGE$</div></div>


Таблица стилей (CSS)

Code
/* by ser2010 */  
.obolochka {border-radius: 3px; padding: 5px; margin-bottom: 5px; background: #fff; font-family: Tahoma; font-size: 11px; color:#808080;}  
.avatariwe {border-radius: 3px; border: 2px solid #ccc; background: #ccc; width: 40px;}  
.mesige {border-bottom: 1px solid #ccc; padding-bottom: 8px;}  
.infywka {border-left: 1px dotted #ccc; padding-left: 6px; font-size: 7pt; }  
.likees {-moz-transition: all 0.3s ease 0s;width: 43px;-moz-box-sizing: border-box;background: url("http://image-up.3dn.ru/_ph/1/2/895184048.png") repeat-x scroll center top #323232;border: 1px solid #2B2B2B;border-radius: 3px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.43);color: #FFFFFF;cursor: pointer;display: inline-block;font-family: Calibri,'Trebuchet MS',Verdana,Geneva,Arial,Helvetica,sans-serif;font-size: 8pt;font-style: normal;line-height: 18px;outline: medium none;margin-top: 5px;padding: 0 6px;text-align: center;text-shadow: 0 -1px 0 #2B2B2B;}  
a.likees {color: #FFFFFF;display: inline-block; text-decoration: none;}  
.likees:hover {background-color: #555555;color: #FFFFFF;text-decoration: none;}  
.likees:active {background-color: #242424;color: #FFFFFF;outline: 0 none;}  
/* ------ */

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (3)
Гость 2013-05-20 в 13:48 / МатериалСпам
Перезалйте картинки!!!!
0
Ruslan Saharuck 2012-08-01 в 15:05 / МатериалСпам
в тени итекста стоит выставить 0px 1px 1px #fff;
0
Кирилл Косырев 2012-07-23 в 13:48 / МатериалСпам
"Зделан, вит" - о, боже
2
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.