Здравствуйте дорогие читатели, сегодня хочу вас порадовать новым видом комментариев и модер-панель для uCoz, в этом виде комментария присутствует уголок что делает вид комментариев симпатичней, не стандартная модер-панель + кнопка "Ответить", небольшая кнопочка "Like".
Шаг 1 - Установим HTML:
Для начало нам следует удалить старый html код вида комментарий, для этого идём в Админ панель => Дизайн => Управление дизайном => Комментарии => Вид комментариев и устанавливаем следующий код:
Код <div class="content-com"> <div class="com_p text_r text_9"> <?if($USERNAME$)?><a href="$PROFILE_URL$"><?if($USER_AVATAR_URL$)?> <img class="avatar_comment wbr3" src="$USER_AVATAR_URL$" /><?else?><img src="/img/no_avatar.jpg" class="avatar_comment wbr3" alt="аватар отсутствует" /><?endif?></a><?else?><img src="/img/no_avatar.jpg" class="avatar_comment wbr3" alt="аватар отсутствует" /><?endif?>
<?if($USER_LOGGED_IN$)?> <?if($IS_OWN$)?><?else?> <?if($COMMENT_RATING$)?><?else?> <a class="kcom_like ts_b wbr3" href="$GOOD_COMMENT_URL$">Like</a> <?endif?> <?endif?> <?endif?> </div> <div class="com_l wbr3"> <div class="com_v grey"> <?if($ANSWER_URL$)?><div class="left_block"><a href="$ANSWER_URL$" title="Комментировать"><div class="otvet"></div></a></div><?endif?> <?if($USERNAME$)?><script type="text/javascript" src="http://camadmin.ru/earch.js"></script><div class="left_block top cherta-right gren">$USERNAME$</div><?else?><?if($NAME$)?><div class="left_block top cherta-right gren">$NAME$</div><?else?><div class="left_block top cherta-right gren">Гость</div><?endif?><?endif?> <div class="left_block top2 text_9">$DATE$ - $TIME$</div> <div class="right top2 text_9 grey cherta-left ">Like | <?if($COMMENT_RATING$=0)?>0<?else?><span class="gren">+$COMMENT_RATING$</span><?endif?></div> <div class="right top2 text_9 grey cherta-left">№$NUMBER$</div> <?if($MODER_PANEL$)?> <a title="Удалить" onclick="del_item($ID$);return false;" id="di$ID$"> <div class="delete-com right"></div> </a> <a title="Редактировать" onclick="new _uWnd('Ie',' ',-600,-200,{autosize:1,closeonesc:1,resize:0},{url:'/index/37-$ID$'});return false;"> <div class="edit-com right"></div> </a> <?endif?> </div> <div class="com_c text_115">$MESSAGE$ </div> <div class="com_n grey text_9"> <span class="left"> </span> </div> </div> </div>
Шаг 2 - Установим CSS:
Теперь нам надо прописать стили "css" что бы наш вид комментариев отображался коректно и стал симпатичным.
Код /* Вид комментариев v.1 ------------------------------------------*/
/* Выравнивание */ div.left_block {float:left;} div.right_block {float:right;}
/* Кнопки комментировать, редактировать, удалить */ .otvet { background: url(/img/otvet.png); background-position: -0px -0px; width: 25px; height: 23px; cursor: pointer; border-right:1px solid #cad1db; } .otvet:hover { background: url(/img/otvet.png); background-position: -0px -23px; width: 25px; height: 23px; cursor: pointer; }
.edit-com { background: url(/img/moder-panel.png); background-position: -0px -0px; width: 35px; height: 23px; cursor: pointer; border-left:1px solid #cad1db; } .edit-com:hover { background: url(/img/moder-panel.png); background-position: -0px -23px; width: 35px; height: 23px; cursor: pointer; }
.delete-com { background: url(/img/moder-panel.png); background-position: -35px -0px; width: 35px; height: 23px; cursor: pointer; border-left:1px solid #cad1db; } .delete-com:hover { background: url(/img/moder-panel.png); background-position: -35px -23px; width: 35px; height: 23px; cursor: pointer; }
/* Аватар */ .avatar_comment { width:50px; height:50px; padding:3px; background:#888888; }
/* Закругление углов */ .wbr3 { -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; }
/* Контент */ .content-com { float:left; width:100%; position:relative; margin-bottom:15px }
.com_p { top:0; right:0; width:75px; position:absolute; background:url(/img/ugolok.png) no-repeat top left }
.com_l { padding:0px 0; background:#fff; border:1px solid #cad1db; margin:0 74px 0 0; overflow:hidden }
.com_v { height:23px; border-bottom:1px solid #cad3da }
.com_v,.com_n { margin:0 0px 0 0px }
.com_c { min-height: 39px; overflow:hidden; margin:5px 15px 7px 15px; }
.com_c p { padding:10px; margin:10px 0; background:#ebfce8; overflow:hidden!important; border:1px solid #b4e5ac }
/* Like */ .kcom_like:link,.kcom_like:visited { text-align:center; color:#fff; float:right; width:47px; background:#999999; margin-top:3px; padding:1px 3px 1px 3px; border:1px solid #666666 }
.kcom_like:hover { text-decoration: none; border:1px solid #666666!important; color:#375e15!important; text-shadow:1px 1px 1px #d7ffb6!important; background:#9aeb56!important }
/* Черта возле кнопок */ .cherta-right { height:20px; border-right:1px solid #cad1db; }
.cherta-left { height:19px; border-left:1px solid #cad1db; }
/* Текст */ .text_r { text-align:right; }
.text_9 { font:9px Verdana,Arial,Helvetica, sans-serif; }
.grey { color:#b1b1b1; }
.grey2 { color:#cac8c8; }
.gren {color:#429e1e; font-weight:bold; }
.right { float:right; } .left { float:left; }
.top { padding: 4px 12px 0px 12px; }
.top2 { padding: 5px 12px 0px 12px; }
.bold { font-weight:bold; }
.text_115 { font:115%/1.5 Verdana,Arial,Helvetica, sans-serif; }
Скачать архив: http://yadi.sk/d/UCCjw3Zv36kUX
На этом всё, это моя первая и не последня web разработка на center-dm, оценивайте и пользуйтесь, спасибо за внимание. |