Форум

Здравствуйте дорогие читатели, сегодня хочу вас порадовать новым видом комментариев и модер-панель для uCoz, в этом виде комментария присутствует уголок что делает вид комментариев симпатичней, не стандартная модер-панель + кнопка "Ответить", небольшая кнопочка "Like" и аватар от center-dm, это моя первая web разработка в этом блоге по этому строго не судите и так посмотрим демо.

[ Live Demo ] [ Downloads ]

Шаг 1 - Установим HTML:

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

HTML

Код

$USERNAME$

$NAME$

Гость

$DATE$ - $TIME$

Like | 0+$COMMENT_RATING$

№$NUMBER$

$MESSAGE$

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

Теперь нам надо прописать стили "css" что бы наш вид комментариев отображался коректно и стал симпатичным.

CSS-Code

Код

/* Вид комментариев 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;
}

На этом всё, это моя первая и не последня web разработка на center-dm, оценивайте и пользуйтесь, спасибо за внимание.