Жизнь Гигабайта — Развлекательно-информативный портал

УЛУЧШАЕМ ФУНКЦИЮ КТО ОНЛАЙН ДЛЯ UCOZ

Дмитрий — Mon, 11 Feb 2013 09:37:14 GMT

Всем доброго дня, в этом посте мы будем создавать и улучшать внешний вид функции "Кто онлайн" для uCoz, плюс мы добавим путём js отдельный контейнер со списком зарегистрированных пользователей которые побывали на сайте в этот день, но для начала смотрим Демо.

Шаг 1 - Переименовываем текст в статистике.:

Для начала следует изменить стандартные надписи статистики пользователей uCoz на свои, для этого заходим:

в Админ панель => Замена стандартных надписей => Статистика "Кто Онлайн"

и заменяем следующий текст на свой:

Онлайн всего: на Онлайн
Гостей: на Гостей
Пользователей: на Читателей
Шаг 2 - Установим JS:
Скачиваем архив.
Теперь заливаем к себе на сайт js файл kto_online и подключаем его вниз страницы, перед закрывающим тегом
Шаг 3 - Установим HTML:

Теперь на страницу сайта устанавливаем следующий html каркас:

Код

   $ONLINE_COUNTER$

Онлайн

Кто был

$ONLINE_USERS_LIST$

Шаг 4 - Установим CSS:

Наше решение почти готово, осталось прописать нужные стили:

Код

/* Статистика пользователей uCoz
   ------------------------------------------*/
.cell_uo {
   float:left;
   width:250px;
   background: #fff;
   border: 1px solid #CAD3DA;
}

.uzer_info {
   float:left;
   width:250px;
   margin-bottom: 10px;
   padding: 5px 0px;
   background: #F1F3F7;
   border-bottom: 1px solid #CAD3DA;
   font:9px Verdana,Arial,Helvetica, sans-serif; text-shadow: 1px 1px 1px #fff;
}

#onl1,
#onl2,
#onl3,
#onl4,
#onl1 b,
#onl2 b,
#onl3 b,
#onl4 b {float:left; width:61px; text-align:center;}
#onl2 {border-right: 1px solid #CAD3DA; border-left: 1px solid #CAD3DA;}
#onl4 {border-left: 1px solid #CAD3DA;}

#tabs_online {text-align:center;}

.uo_ul{
   margin:0;
   padding:0;
   list-style:none;
}

.uo_ul li {
   display: inline;
   margin: 0px 5px 0px 5px;
}

.uo_ul li a {
   color:#666;
   font-weight: bold;
   padding: 5px 10px 5px 10px;
   text-shadow: 1px 1px 1px #fff;
}

.uo_ul li a.selected,ul
.uo_ul li a.selected:hover,
.uo_ul li a:hover {color: #666; background:#F1F3F7;}
.uo_ul li a:focus {outline:0;}

.uzer_online,
.uzer_allist {
   width:230px;
   overflow: hidden;
   text-align:left;
   margin-top: 10px;
   padding: 5px 10px 5px 10px;
   border-top: 1px solid #cecece;
   font:10px Verdana,Arial,Helvetica, sans-serif;
}

Скрипт правил добавления комментариев

Дмитрий — Mon, 11 Feb 2013 09:27:31 GMT

[spoiler="Скрин"][Увеличить][/spoiler]

Простенький скрипт правил публикации комментариев.
Вставить код туда где желаете видеть правила!

Код

Добавление комментария

При публикации комментариев старайтесь, по мере возможности, придерживаться правил русского языка. Старайтесь не делать грамматических ошибок.

В комментариях категорически запрещено:

1. Употреблять ненормативную лексику, проще говоря мат

2. Писать большими буквами, не будьте блондинками

3. Публиковать объявления рекламного характера в том числе и рекламирующие другой сайт

4. Публиковать комментарии бессодержательного характера, то есть "флуд"

5. Размещать комментарий содержащий только один или несколько смайлов

За нарушение правил следует удаление комментария.

Красивый, лёгкий вид комментариев для ucoz

Дмитрий — Sat, 01 Sep 2012 08:19:45 GMT

[spoiler="Скрин"]

[Увеличеть]
[/spoiler]

Красивый, лёгкий вид комментариев для ucoz, к чему слова установите и вы сами все поймёте.

Установим:

И так для начало нам следует удалить старый html код вида комментарий, для этого идём в Админ панель => Дизайн => Управление дизайном => Комментарии => Вид комментариев и устанавливаем следующий код:

Code

$NUMBER$ |
$USERNAME$ $NAME$ пишет: | $DATE$ | $TIME$ ( E-mail )
$MODER_PANEL$
Страница с комментарием |

$MESSAGE$

Ответ: $ANSWER$

Ответить |



   ($COMMENT_RATING$)



   ($COMMENT_RATING$)




   ($COMMENT_RATING$)



   (+$COMMENT_RATING$)

Теперь давайте пропишем css стили, чтобы улучшить его внешний вид:

Code

/* Вид комментарий v.2.0
------------------------------------------*/
.cell_comment_os {
   float:left;
   width:100%;
   background:#fff;
   border:1px solid #CAD1DB;
   padding-bottom:3px;
   margin-bottom:15px;
}

.comment_p {
   float:right;
   width:80px;
}

.comment_v {
   margin: 5px 0px 5px 10px;
}

.comment_c {
   overflow: hidden;
   text-align:justify;
   margin: 0px 0px 0px 10px;
   padding: 5px 0px;
   border-top: 1px solid #e7e7e7;
}

.comment_n {
   text-align:right;
   margin: 3px 78px 0px 10px;
}
.vcc_otvet {overflow:hidden!important; border: 1px solid #eccece; padding: 10px;background:#fcf6f6; }

.comment_avatar {
   width:40px;
   height:40px;
   padding: 4px;
   margin: 8px 10px 0px 15px;
   border: 1px solid #CAD1DB;
   background:#F6F6F6;
   -webkit-border-radius:5px;
   -moz-border-radius:5px;
   border-radius:5px;
}

.red {color: #d20000;}
.gren {color: #429e1e;}
.grey {color: #999;}
.text_9 {font: 9px Verdana,Arial,Helvetica, sans-serif;}
.right {float:right;}

Вот и всё, более улучшенная по внешнему виду и верстке вид комментарий uCoz готов, а комментарии могут выводиться как в простом варианте так и в древовидном.

Вид комментариев

Дмитрий — Sat, 01 Sep 2012 08:16:59 GMT

[spoiler="Скрин"][/spoiler]

Красивый, но и в тоже время и простой вид комментариев для ucoz. Данный вид комментариев для ucoz подойдет для любого дизайна сайта.

Установка

В вид комментариев:

Код

    $USER_AVATAR_URL$http://gigabytes.clan.su/load-ucoz/skripts/komments/1/465053923.gif" width="40" height="40" title="$USERNAME$$NAME$" />

    Like $COMMENT_RATING$$COMMENT_RATING$

Написано $DATE$ в $TIME$
Комментарий №$NUMBER$

$USERNAME$$NAME$ $MODER_PANEL$

    $MESSAGE$


Ответить

CSS стиль:

Код

/* by coffee */
    .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://gigabytes.clan.su/load-ucoz/skripts/komments/1/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;}
    /* ------ */

Готово.

Лёгкая форма добавления комментарий для uCoz

Дмитрий — Sat, 01 Sep 2012 08:13:38 GMT

[spoiler="Скрин"]

[Увеличеть]
[/spoiler]

Лёгкая и красивая форма добавления комментариев для ucoz

Установим:

И так, для начало нам следует установить html каркас формы добавления комментарий uCoz, для этого идём в Админ панель => Дизайн => Управление дизайном => Комментарии => Форма добавления комментариев удаляем от туда старый код и устанавливаем следующий код:

Code

   B
   i
   http:
   img
   Цитата
   Сode
   Close-BB
   Справка
$BBCODES$

$ERROR$

   $SECURITY_CODE$

Quote

Отлично, почти всё готово, теперь чтобы завершить весь ход работы, припишем нашему html каркасу стили:

Code

/* Форма комментарий
------------------------------------------*/
   #forma_comment {
   float:left;
   width:540px;
   background:#fff;
   padding: 15px 30px 15px 30px;
}

.comm_input {
   color:#999;
   padding:5px;
   width:245px;
   background: #f9f9f9;
   border: 1px solid #E0E0E0;
   margin: 10px 0px 10px 0px;
}

.comm_input:focus,
#forma_comment textarea:focus {
   box-shadow:inset 0px 1px 3px #c3c3c3!important;
   -webkit-box-shadow:inset 0px 1px 3px #c3c3c3!important;
   -moz-box-shadow:inset 0px 1px 3px #c3c3c3!important;
}

#forma_comment textarea {
   margin:0;
   float:left;
   color:#555;
   padding:10px;
   background:#f9f9f9;
   width:518px!important;
   border:1px solid #E0E0E0;
   border-top:none;
}

#panel_error {
   float:left;
   width:100%;
   text-align:center;
   margin: 5px 0px 10px 0px;
   font: 12px Verdana,Arial,Helvetica, sans-serif; color:#c71a1a;
}

#panel_bottom {
   float:left;
   width:100%;
}

#ckcomm_dobavit {
   float:right;
   background:#dfdfdf;
   padding:4px;
}

.left {float:left;}
.right {float:right;}

/* Вид Панели BB-кодов
------------------------------------------*/
#comment_panel {
   float:left;
   width:530px;
   padding: 5px 5px 5px 5px;
   background:#E0E0E0;
}

#comment_panel .codeButtons{
   display:none;
}

#panel_bb {
   float:left;
   width:500px;
}

#panel_bb a:link,
#panel_bb a:visited {
   float:left;
   padding: 3px 10px 4px 10px;
   margin: 0px 5px 0px 0px;
   background:#F6F6F6;
   cursor:pointer;
   border:1px solid #B2B2B2;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   font: 10px Verdana,Arial,Helvetica, sans-serif; color:#555; text-shadow: 1px 1px 1px #fff;
}

#panel_bb a:hover {background:#fff;}

.panel_i {font-style:italic!important; }
.panel_u {text-decoration: underline!important; }
.panel_info {float:right!important; margin: 0px!important;}

.menu_n {
   float:left;
   display:block;
   position:relative;
   margin: 2px 5px 0px 0px;
}

.dd_ugol1,
.dd_menu {width:240px;}

.dd_menu {
   float:left;
   padding:5px;
   left:-999em;
   z-index:998;
   background:#fff;
   position:absolute;
   border:1px solid #999;
   margin: 0px 0px 0px -5px;
   -moz-border-radius:5px 5px 5px 5px;
   -webkit-border-radius:5px 5px 5px 5px;
   border-radius:5px 5px 5px 5px;
   box-shadow: 0px 0px 5px #999;
}

.menu_n:hover .dd_menu{
   right:auto;
   left:0px;
   top:30px;
}

.dd_ugol1 {
   float:left;
   height:25px;
   top:-25px;
   left:4px;
   position:absolute;
   background:url(http://gigabytes2.clan.su/load-Gigabytes/forum/uCoz/fon_ugol_1-1-.png) no-repeat left bottom;
}

/* Разбор палётов (КАПЧА)
------------------------------------------*/
#panel_bottom img {
   display:none;
}

#secuImgC {
   margin:0!important;
   float:left!important;
   display:inline!important;
   border: 1px solid #E0E0E0!important;
}

.securityCode {
   color:#777!important;
   margin:0!important;
   float:left!important;
   height:25px!important;
   padding: 5px 5px 5px 5px!important;
   background:#f9f9f9!important;
   border: 1px solid #E0E0E0!important;
   border-right:none!important;
}

/* - добавляем внутреннюю тень поля */
.securityCode:focus {
   box-shadow:inset 0px 1px 3px #c3c3c3!important;
   -webkit-box-shadow:inset 0px 1px 3px #c3c3c3!important;
   -moz-box-shadow:inset 0px 1px 3px #c3c3c3!important;
}

/* - кнопка добавить комментарий */
.kn_dobavit {
   font:11px Verdana,Arial,Helvetica, sans-serif;
   text-shadow: 1px 1px 1px #333;
   float:right!important;
   color:#fff!important;
   margin:0!important;
   height:37px!important;
   cursor:pointer;
   padding: 0px 10px 0px 10px!important;
   background:#535B64!important;
   border: 4px solid #DFDFDF!important;
}

.kn_dobavit:hover {
   background:#3E444B!important;
}

#forma_comment a:hover img {filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; filter: alpha(opacity=50);}

Готово.

Красивый Вид комментариев для uCoz (5 штук)

Дмитрий — Fri, 10 Aug 2012 13:07:53 GMT

[spoiler="Скрин"][/spoiler]

5 видов коментариев сверстал нам Rulez-dn22
И так приступим к установке.
Установим первоначальный нужный html код по этому пути: Панель управления > Дизайн > Управление дизайном Ю Комментарии > Вид комментариев (удаляем старый код и устанавливаем новый):

Code

$USERNAME$ $NAME$ ( E-mail ) | $DATE$ | $TIME$

$NUMBER$

   ($COMMENT_RATING$)



   ($COMMENT_RATING$)




   ($COMMENT_RATING$)

$MESSAGE$

Ответ: $ANSWER$

Ответить $MODER_PANEL$

Теперь нам нужно выбрать один из пяти дизайнов, Но код уже вставляем ПУ>Дизайн>CSS и в конце кода CSS вставляем нужный нам код(под картинкой):

№1 Белый вид комментариев

Code

/* Comments Style */
.cBlock1,
.cBlock2 {
   float:left;
   overflow: hidden;
   width:100%;
   margin-bottom: 15px;
   outline: 1px solid #d7d7d7;
   border: 1px solid #fff;
}

.cBlock1 {background: #f6f6f6;}
.cBlock2 {background: #e5e5e5;}

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

.vid_comments_os a:link,
.vid_comments_os a:visited {color:#2e6fac;}
.vid_comments_os a:hover {color:#31ac2e;}
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 #fff;
   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:#555;
   width:100%;
}

.coment_avatar{
   float:right;
   width:50px;
   height:50px;
   padding:3px;
   margin: 0px 0px 10px 15px;
   border: 1px solid #fff;
}

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

.vcc_otvet {
   color:#555;
   padding: 5px 5px 5px 5px;
   background: #fff;
   border: 1px solid #d7d7d7;
   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: #888;}
.red {color: #a71a1a;}
.gren {color: #1da71a;}
.grey {color: #999;}

№2 Черный вид комментариев

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;}

№3 Оранжевый вид комментариев

Code

/* Comments Style */
.cBlock1,
.cBlock2 {
   float:left;
   overflow: hidden;
   width:100%;
   margin-bottom: 15px;
   outline: 1px solid #ffa24a;
   border: 1px solid #fff;
}

.cBlock1 {background: #fff0e1;}
.cBlock2 {background: #fff4db;}

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

.vid_comments_os a:link,
.vid_comments_os a:visited {color:#e98d34;}
.vid_comments_os a:hover {color:#2222be;}
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 #fff;
   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:#555;
   width:100%;
}

.coment_avatar{
   float:right;
   width:50px;
   height:50px;
   padding:3px;
   margin: 0px 0px 10px 15px;
   border: 1px solid #f6c65d;
}

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

.vcc_otvet {
   color:#555;
   padding: 5px 5px 5px 5px;
   background: #fff;
   border: 1px solid #f6c65d;
   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: #888;}
.red {color: #a71a1a;}
.gren {color: #1da71a;}
.grey {color: #999;}

№4 Голубой Синий вид комментариев

Code

/* Comments Style */
.cBlock1,
.cBlock2 {
   float:left;
   overflow: hidden;
   width:100%;
   margin-bottom: 15px;
   outline: 1px solid #84ABC2;
   border: 1px solid #fff;
}

.cBlock1 {background: #eff3f7;}
.cBlock2 {background: #dbe8f6;}

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

.vid_comments_os a:link,
.vid_comments_os a:visited {color:#115882;}
.vid_comments_os a:hover {color:#2222be;}
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 #fff;
   float:left;
   padding: 3px 0px 0px 0px;
}

.vc_name strong {color:#4EA62C;}
.vc_name span {color:#777;}

.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:#555;
   width:100%;
}

.coment_avatar{
   float:right;
   width:50px;
   height:50px;
   padding:3px;
   margin: 0px 0px 10px 15px;
   border: 1px solid #84ABC2;
}

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

.vcc_otvet {
   color:#555;
   padding: 5px 5px 5px 5px;
   background: #fff;
   border: 1px solid #84ABC2;
   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: #888;}
.red {color: #a71a1a;}
.gren {color: #1da71a;}
.grey {color: #999;}

№5 Зеленый вид комментариев

Code

/* Comments Style */
.cBlock1,
.cBlock2 {
   float:left;
   overflow: hidden;
   width:100%;
   margin-bottom: 15px;
   outline: 1px solid #60bd5c;
   border: 1px solid #fff;
}

.cBlock1 {background: #cdf6ce;}
.cBlock2 {background: #ebffeb;}

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

.vid_comments_os a:link,
.vid_comments_os a:visited {color:#1d821f;}
.vid_comments_os a:hover {color:#1d5882;}
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 #fff;
   float:left;
   padding: 3px 0px 0px 0px;
}

.vc_name strong {color:#4EA62C;}
.vc_name span {color:#777;}

.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:#555;
   width:100%;
}

.coment_avatar{
   float:right;
   width:50px;
   height:50px;
   padding:3px;
   margin: 0px 0px 10px 15px;
   border: 1px solid #60bd5c;
}

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

.vcc_otvet {
   color:#555;
   padding: 5px 5px 5px 5px;
   background: #fff;
   border: 1px solid #60bd5c;
   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: #888;}
.red {color: #a71a1a;}
.gren {color: #1da71a;}
.grey {color: #999;}

Вид комментариев

Дмитрий — Sun, 10 Jun 2012 05:57:54 GMT

Вполне красивый вид комментов, подойдёт под чёрный дизайн.

Установка:
пихаем код в вид коментариев:

Code

   $USERNAME$

$COMMENT_RATING$$COMMENT_RATING$+$COMMENT_RATING$ -

$MESSAGE$

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

Дмитрий — Tue, 29 May 2012 13:49:02 GMT

+Светлый дизайн
+Новая модер панель
+Можно подригулировать под свой диз
+Нет багов проверенно на всех браузерах
+Ваще огонь.....
[moder]Вставляем в Вид ком-ев.... [/moder]

Code

$USERNAME$

$COMMENT_RATING$$COMMENT_RATING$+$COMMENT_RATING$ -

$MESSAGE$