Форум Diz-Cs.Ru
Преимущества регистрации:
Возможность создания тем
Общение с пользователями
Найдете множество полезной информации
Найдете своих единомышленников
DIZ-CS.RU - Мы с Вами НАВСЕГДА!
  • Страница 1 из 1
  • 1
Модератор форума: -SAM-  
Новый вид комментариев v.1.0 + Модер-панель для uCoz
Дата: Пн, 18.03.2013, 21:43:17 | Сообщение # 1
Аватарка M0DDII
Епти я не ВАНГА
OFF
Постоянный
888 Сообщения:
150 Награды:
29 Отзывы:

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


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

Для начало нам следует удалить старый 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$)?><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" что бы наш вид комментариев отображался коректно и стал симпатичным.

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, оценивайте и пользуйтесь, спасибо за внимание.


Отец проверяет дневник сына: физика-2, химия-2, истрия-2, литература-2, пение-5
- Господи, этот дебил еше и поет....
Сообщение отредактировал -SAM- - Пн, 18.03.2013, 23:25:30
Дата: Вт, 19.03.2013, 16:45:22 | Сообщение # 2
Аватарка -keke-
OFF
Премиум
1299 Сообщения:
15 Награды:
79 Отзывы:
ICQ пользователя:
Skype пользователя:
Сайт пользователя:
M0DDII, вообще кульно good , а есть-ли под темный диз?

Дата: Пн, 25.03.2013, 12:00:48 | Сообщение # 3
Аватарка Timgo
Real Madrid FC
OFF
Пользователь
139 Сообщения:
1 Отзывы:
не плохо выглядит
  • Страница 1 из 1
  • 1
Поиск: