FAQpk FAQpk.ru   Войти   Зарегистрироваться  


faqpk.ru
Компьютерный форум
С оплатой за сообщения



faqpk.ru

Страница 1 из 11
Компьютерный форум » Web-Мастер » Скрипты для сайта » Темный вид комментариев для uCoz (Скрипты для ucoz)
Темный вид комментариев для uCoz
Темный вид комментариев для uCoz



Скрипт для ucoz в виде комментариев для ucoz. Скрипт выполнен в тёмных тонах с использованием интересной цветовой гаммы. Можете попращаться со стандартным видиом комментариев ucoz, так как тут изменено ВСЕ(и это к лучшему). Текст имеет 3D эффект - смотриться очень красиво.
Установку комментариев ucoz выполним в 2 этапа: Первый - установка HTML, Второй - CSS.

HTML

Заходим в Админ панель => Дизайн => Управление дизайном => Комментарии => Вид комментарий, удаляем старый код и устанавливаем новый:

Code
<div class="$CLASS$">   
   <div class="vid_comments_os">   
   <div class="vc_top">   
   <div class="vc_name"><strong><?if($USERNAME$)?>$USERNAME$ <?else?>$NAME$<?endif?></strong><?if($MODER_PANEL$ && $EMAIL$)?><a href="$EMAIL_JS$" title="Email"> ( E-mail )</a><?endif?><span> | $DATE$ | $TIME$</span></div>   
   <div class="vc_nomer"><a href="#ent$ID$" uzzonclick="if (document.getElementById('comEnt$ID$')){$('body').scrollTo( { top:$('#comEnt$ID$').offset().top-22, left:0}, 500 );return false;}" name="ent$ID$">$NUMBER$</a> </div>   
   <div class="vc_reiting">   
   <?if($GOOD_COMMENT_URL$)?>   
   <a href="$GOOD_COMMENT_URL$"><img src="http://wallaby.ucoz.ru/_ph/1/2/358401381.gif" alt="+" title="Хороший пост"/></a>   
   <span class="post_r">($COMMENT_RATING$)</span>   
   <a href="$BAD_COMMENT_URL$"><img src="http://wallaby.ucoz.ru/_ph/1/2/502451503.gif" alt="-" title="Плохой пост"/></a><?else?>   
   <?if($COMMENT_RATING$=0)?>   
   <img src="http://wallaby.ucoz.ru/_ph/1/2/962410741.png" alt="+" title="Хороший пост"/>   
   <span class="post_r">($COMMENT_RATING$)</span>   
   <img src="http://wallaby.ucoz.ru/_ph/1/2/489588750.png" alt="-" title="Плохой пост"/>   
   <?else?>   
   <?if($COMMENT_RATING$<0)?>   
   <img src="http://wallaby.ucoz.ru/_ph/1/2/962410741.png" alt="+" title="Хороший пост"/>   
   <span class="red">($COMMENT_RATING$)</span>   
   <img src="http://wallaby.ucoz.ru/_ph/1/2/489588750.png" alt="-" title="Плохой пост"/>   
   <?else?>   
   <img src="http://wallaby.ucoz.ru/_ph/1/2/962410741.png" alt="+" title="Хороший пост"/>   
   <span class="gren">(+$COMMENT_RATING$)</span>   
   <img src="http://wallaby.ucoz.ru/_ph/1/2/489588750.png" alt="-" title="Плохой пост"/>   
   <?endif?>   
   <?endif?>   
   <?endif?>   
   </div>   
   </div>   
   <div class="vc_center"><?if($USERNAME$)?><?if($USER_AVATAR_URL$)?><a href="$PROFILE_URL$" title="$USERNAME$"><img class="coment_avatar" alt="" src="$USER_AVATAR_URL$" /></a><?else?><a href="$PROFILE_URL$" title="$USERNAME$"><img class="coment_avatar" alt="" src="http://wallaby.ucoz.ru/_ph/1/2/123843080.jpg" /></a><?endif?><?else?><img class="coment_avatar" alt="" src="http://wallaby.ucoz.ru/_ph/1/2/123843080.jpg" /><?endif?>$MESSAGE$</div>   
   <?if($ANSWER$)?><div class="vcc_otvet"><strong>Ответ</strong>: $ANSWER$</div><?endif?>   
   <div class="vc_bottom"><?if($ANSWER_URL$)?><a href="$ANSWER_URL$">Ответить</a> <?endif?> $MODER_PANEL$</div>   
   </div>   
   </div>


Теперь установим CSS для нашего темного вида комментариев для ucoz.

CSS

Code
/* Comments Style */   
   .cBlock1,   
   .cBlock2 {   
   float:left;   
   overflow: hidden;   
   width:100%;   
   margin-bottom: 15px;   
   }   

   .cBlock1 {background: #555;}   
   .cBlock2 {background: #333;}   

   .coment_avatar,   
   .cBlock1,   
   .cBlock2 {   
   outline: 1px solid #2c2c2c;   
   border: 1px solid #838383;   
   }   

   .vid_comments_os {   
   float:left;   
   width:95%;   
   padding: 5px 15px 5px 16px;   
   }   

   .vid_comments_os a:link,   
   .vid_comments_os a:visited {color:#9cbdd3;}   
   .vid_comments_os a:hover {color:#87dd85;}   
   img {border: none; }   
   a {outline: none; text-decoration:none!important; }   

   .vc_top {   
   float:left;   
   width:100%;   
   padding: 0px 0px 5px 0px;   
   }   

   .vc_name {   
   font: 10px Verdana,Arial,Helvetica, sans-serif;   
   text-shadow: 1px 1px 1px #111;   
   float:left;   
   padding: 3px 0px 0px 0px;   
   }   
     
   .vc_name strong {color:#4EA62C;}   
   .vc_name span {color:#999;}   

   .vc_reiting {   
   font: 11px Verdana,Arial,Helvetica, sans-serif;   
   float:right;   
   }   

   .vc_reiting img {float:left; padding-top: 6px;}   
   .vc_reiting span {float:left; padding: 2px 5px 0px 5px; font-weight: bold;}   

   .vc_nomer {   
   font: 11px Verdana,Arial,Helvetica, sans-serif;   
   float:right;   
   font-size:19px;   
   margin-left: 15px;   
   }   

   .vc_nomer a:link,   
   .vc_nomer a:visited {color:#C7C7C7;}   
   .vc_nomer a:hover {color:#2C68A6;}   

   .vc_center {   
   float:left;   
   text-align:justify;   
   font: 115%/1.5 Verdana,Arial,Helvetica, sans-serif;   
   color:#b5b5b5;   
   width:100%;   
   }   

   .coment_avatar{   
   float:right;   
   width:50px;   
   height:50px;   
   padding:3px;   
   margin: 0px 0px 10px 15px;   
   }   

   .vc_center {   
   color:#b5b5b5;   
   width:100%;   
   }   

   .vcc_otvet {   
   color:#ececec;   
   padding: 5px 5px 5px 5px;   
   background: #7d7d7d;   
   border: 1px solid #959595;   
   width:98%;   
   margin: 10px 0px 10px 0px;   
   }   

   .vc_center,   
   .vcc_otvet {   
   float:left;   
   overflow: hidden;   
   text-align:justify;   
   font: 115%/1.5 Verdana,Arial,Helvetica, sans-serif;   
   }   

   .vc_bottom {   
   clear:left;   
   text-align:right;   
   padding: 0px 0px 0px 0px;   
   }   

   .post_r {color: #858585;}   
   .red {color: #ef7575;}   
   .gren {color: #8fef75;}   
   .grey {color: #999;}
Дата: Суббота, 23.06.2012. Сообщение # 1 Bro
Темный вид комментариев для uCoz



Скрипт для ucoz в виде комментариев для ucoz. Скрипт выполнен в тёмных тонах с использованием интересной цветовой гаммы. Можете попращаться со стандартным видиом комментариев ucoz, так как тут изменено ВСЕ(и это к лучшему). Текст имеет 3D эффект - смотриться очень красиво.
Установку комментариев ucoz выполним в 2 этапа: Первый - установка HTML, Второй - CSS.

HTML

Заходим в Админ панель => Дизайн => Управление дизайном => Комментарии => Вид комментарий, удаляем старый код и устанавливаем новый:

Code
<div class="$CLASS$">   
   <div class="vid_comments_os">   
   <div class="vc_top">   
   <div class="vc_name"><strong><?if($USERNAME$)?>$USERNAME$ <?else?>$NAME$<?endif?></strong><?if($MODER_PANEL$ && $EMAIL$)?><a href="$EMAIL_JS$" title="Email"> ( E-mail )</a><?endif?><span> | $DATE$ | $TIME$</span></div>   
   <div class="vc_nomer"><a href="#ent$ID$" uzzonclick="if (document.getElementById('comEnt$ID$')){$('body').scrollTo( { top:$('#comEnt$ID$').offset().top-22, left:0}, 500 );return false;}" name="ent$ID$">$NUMBER$</a> </div>   
   <div class="vc_reiting">   
   <?if($GOOD_COMMENT_URL$)?>   
   <a href="$GOOD_COMMENT_URL$"><img src="http://wallaby.ucoz.ru/_ph/1/2/358401381.gif" alt="+" title="Хороший пост"/></a>   
   <span class="post_r">($COMMENT_RATING$)</span>   
   <a href="$BAD_COMMENT_URL$"><img src="http://wallaby.ucoz.ru/_ph/1/2/502451503.gif" alt="-" title="Плохой пост"/></a><?else?>   
   <?if($COMMENT_RATING$=0)?>   
   <img src="http://wallaby.ucoz.ru/_ph/1/2/962410741.png" alt="+" title="Хороший пост"/>   
   <span class="post_r">($COMMENT_RATING$)</span>   
   <img src="http://wallaby.ucoz.ru/_ph/1/2/489588750.png" alt="-" title="Плохой пост"/>   
   <?else?>   
   <?if($COMMENT_RATING$<0)?>   
   <img src="http://wallaby.ucoz.ru/_ph/1/2/962410741.png" alt="+" title="Хороший пост"/>   
   <span class="red">($COMMENT_RATING$)</span>   
   <img src="http://wallaby.ucoz.ru/_ph/1/2/489588750.png" alt="-" title="Плохой пост"/>   
   <?else?>   
   <img src="http://wallaby.ucoz.ru/_ph/1/2/962410741.png" alt="+" title="Хороший пост"/>   
   <span class="gren">(+$COMMENT_RATING$)</span>   
   <img src="http://wallaby.ucoz.ru/_ph/1/2/489588750.png" alt="-" title="Плохой пост"/>   
   <?endif?>   
   <?endif?>   
   <?endif?>   
   </div>   
   </div>   
   <div class="vc_center"><?if($USERNAME$)?><?if($USER_AVATAR_URL$)?><a href="$PROFILE_URL$" title="$USERNAME$"><img class="coment_avatar" alt="" src="$USER_AVATAR_URL$" /></a><?else?><a href="$PROFILE_URL$" title="$USERNAME$"><img class="coment_avatar" alt="" src="http://wallaby.ucoz.ru/_ph/1/2/123843080.jpg" /></a><?endif?><?else?><img class="coment_avatar" alt="" src="http://wallaby.ucoz.ru/_ph/1/2/123843080.jpg" /><?endif?>$MESSAGE$</div>   
   <?if($ANSWER$)?><div class="vcc_otvet"><strong>Ответ</strong>: $ANSWER$</div><?endif?>   
   <div class="vc_bottom"><?if($ANSWER_URL$)?><a href="$ANSWER_URL$">Ответить</a> <?endif?> $MODER_PANEL$</div>   
   </div>   
   </div>


Теперь установим CSS для нашего темного вида комментариев для ucoz.

CSS

Code
/* Comments Style */   
   .cBlock1,   
   .cBlock2 {   
   float:left;   
   overflow: hidden;   
   width:100%;   
   margin-bottom: 15px;   
   }   

   .cBlock1 {background: #555;}   
   .cBlock2 {background: #333;}   

   .coment_avatar,   
   .cBlock1,   
   .cBlock2 {   
   outline: 1px solid #2c2c2c;   
   border: 1px solid #838383;   
   }   

   .vid_comments_os {   
   float:left;   
   width:95%;   
   padding: 5px 15px 5px 16px;   
   }   

   .vid_comments_os a:link,   
   .vid_comments_os a:visited {color:#9cbdd3;}   
   .vid_comments_os a:hover {color:#87dd85;}   
   img {border: none; }   
   a {outline: none; text-decoration:none!important; }   

   .vc_top {   
   float:left;   
   width:100%;   
   padding: 0px 0px 5px 0px;   
   }   

   .vc_name {   
   font: 10px Verdana,Arial,Helvetica, sans-serif;   
   text-shadow: 1px 1px 1px #111;   
   float:left;   
   padding: 3px 0px 0px 0px;   
   }   
     
   .vc_name strong {color:#4EA62C;}   
   .vc_name span {color:#999;}   

   .vc_reiting {   
   font: 11px Verdana,Arial,Helvetica, sans-serif;   
   float:right;   
   }   

   .vc_reiting img {float:left; padding-top: 6px;}   
   .vc_reiting span {float:left; padding: 2px 5px 0px 5px; font-weight: bold;}   

   .vc_nomer {   
   font: 11px Verdana,Arial,Helvetica, sans-serif;   
   float:right;   
   font-size:19px;   
   margin-left: 15px;   
   }   

   .vc_nomer a:link,   
   .vc_nomer a:visited {color:#C7C7C7;}   
   .vc_nomer a:hover {color:#2C68A6;}   

   .vc_center {   
   float:left;   
   text-align:justify;   
   font: 115%/1.5 Verdana,Arial,Helvetica, sans-serif;   
   color:#b5b5b5;   
   width:100%;   
   }   

   .coment_avatar{   
   float:right;   
   width:50px;   
   height:50px;   
   padding:3px;   
   margin: 0px 0px 10px 15px;   
   }   

   .vc_center {   
   color:#b5b5b5;   
   width:100%;   
   }   

   .vcc_otvet {   
   color:#ececec;   
   padding: 5px 5px 5px 5px;   
   background: #7d7d7d;   
   border: 1px solid #959595;   
   width:98%;   
   margin: 10px 0px 10px 0px;   
   }   

   .vc_center,   
   .vcc_otvet {   
   float:left;   
   overflow: hidden;   
   text-align:justify;   
   font: 115%/1.5 Verdana,Arial,Helvetica, sans-serif;   
   }   

   .vc_bottom {   
   clear:left;   
   text-align:right;   
   padding: 0px 0px 0px 0px;   
   }   

   .post_r {color: #858585;}   
   .red {color: #ef7575;}   
   .gren {color: #8fef75;}   
   .grey {color: #999;}
Прикрепления: 3814502.png(7Kb)
Дмитрий Асмус (Bro)
Модератор
Сообщений: 198
Нет на сайте
    

 
Компьютерный форум » Web-Мастер » Скрипты для сайта » Темный вид комментариев для uCoz (Скрипты для ucoz)
Страница 1 из 11
Поиск: