Главная » Статьи » Разное » Cкрипты для ucoz сайта

Скрипты для ucoz: Новый вид комментариев v.1.0 + Модер-панель
IMAGE1$
Приветствую, предлагаю вам поменять, стандартный вид комментариев, на новый. Понять, как выглядит новинка можно по скриншоту. Дизайн свежий и лёгкий. Для модераторов предусмотрена специальная панель, доступ к которой прост, в отличии от стандартных инструментов 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, оценивайте и пользуйтесь, спасибо за внимание.

 

Категория: Cкрипты для ucoz сайта | Добавил: startsmart (14.12.2014)
Просмотров: 673 | Рейтинг: 0.0/0

Другие интересные материалы:

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