Меню

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

Установка

Шаг 1 - Установим HTML:
Как и полагается для начала нам следует установить html каркас вида комментариев, для этого заходим в Админ панель => Дизайн => Управление дизайном => Комментарии => Вид комментариев

в котором удаляем старый html код и устанавливаем новый:

Код
<div class="cell_comment">  

  <div class="comment_top">  
  <strong class="comment_name"><?if($USERNAME$)?>$USERNAME$ <?else?>$NAME$<?endif?></strong>  
  <span> пишет: | $DATE$ | $TIME$ <?if($MODER_PANEL$ && $EMAIL$)?><a href="$EMAIL_JS$" title="Email"> ( E-mail )</a><?endif?></span>  
  <a href="#ent$ID$" onclick="if (document.getElementById('comEnt$ID$')){$('body').scrollTo( { top:$('#comEnt$ID$').offset().top-22, left:0}, 500 );return false;}" name="ent$ID$"><strong class="comment_number">#$NUMBER$</strong></a>  
  <?if($ENTRY_URL$)?><a class="comment_page" href="$ENTRY_URL$" target="_blank" title="Перейти на страницу материала">Страница с комментарием </a><?endif?>  
  <?if($MODER_PANEL$)?><span class="comment_mp">$MODER_PANEL$</span><?endif?>  
  </div>  

  <div class="comment_message">  
  <?if($USERNAME$)?><a href="$PROFILE_URL$"><img class="comment_avatar" alt="$USERNAME$" src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>http://www.center-dm.ru/img/no_avatar.jpg<?endif?>" /></a><?else?><img src="http://www.center-dm.ru/img/no_avatar.jpg" class="comment_avatar" alt="аватар отсутствует" /><?endif?>  
  $MESSAGE$  
  <?if($ANSWER$)?><div class="comment_answer_admin"><a href="/index/8-1" ><img class="comment_avatar_admin" alt="админ" src="http://www.center-dm.ru/avatar/1DM.jpg"></a>$ANSWER$</div><?endif?>  
  </div>  

  <div class="comment_bottom">  
  <?if($ANSWER_URL$)?><a href="$ANSWER_URL$" class="comment_answer">Ответить</a><?endif?>  
  <strong> <?if($COMMENT_RATING$>0)?>Like | +$COMMENT_RATING$ <?endif?> <?if($COMMENT_RATING$=0)?><?if($GOOD_COMMENT_URL$)?><?else?>Like |<?endif?> $COMMENT_RATING$ <?endif?></strong>  
  <?if($GOOD_COMMENT_URL$)?><a class="comment_like" href="$GOOD_COMMENT_URL$">Like</a><?endif?>  
  </div>  

</div>

Обратите внимание, что аватар и ссылка на страницу администратора в ячейки системной переменной $ANSWER$ отвечающий за отображение ответа от администратора, следует прописать вручную.

Шаг 2- Установим CSS:
Теперь когда наш с вами каркас формы добавление комментариев для uCoz готов, пропишем ему следующие css стили:

Код
/* Вид комментариев для uCoz v.5  
------------------------------------------*/  
.cell_comment {  
  float:left;  
  width:100%;  
  color:#666;  
  background:#fff;  
  margin: 10px 0px;  
  border: 5px solid #bdd3e0;  
  border-radius:3px; overflow: hidden;  
}  

.comment_top {  
  float:left;  
  width:100%;  
  padding:5px 0px;  
  background:#F4F8F9;  
  border-bottom: 1px solid #E6F0F2;  
}  

.comment_name{  
  margin-left: 20px;  
  color:#34AB63;  
}  

.comment_number {  
  float:right;  
  background:#f5f7f9;  
  margin-right: 20px;  
}  

.comment_top span {  
  font:9px Verdana,Arial,Helvetica, sans-serif;  
  color:#999;  
}  

.comment_mp,  
.comment_page {  
  float:right;  
  margin-right: 20px;  
}  

.comment_message {  
  float:left;  
  font:115%/1.5 Verdana,Arial,Helvetica, sans-serif;  
  text-align:justify;  

  width:94%;  
  overflow: hidden;  
  padding: 10px 20px 15px 20px;  
}  

.comment_avatar {  
  float:right;  
  width:50px;  
  height:50px;  
  margin: 0px 0px 10px 20px;  
  border: 3px solid #bdd3e0;  
  border-radius:3px;  
}  

.comment_bottom {  
  float:left;  
  width:100%;  
  padding:6px 0px 5px 0px;  
  background:#F4F8F9;  
  border-top: 1px solid #E6F0F2;  
  font:10px Verdana,Arial,Helvetica, sans-serif;  
}  

.comment_answer:link,  
.comment_answer:visited{  
  float:left;  
  margin: 0px 0px 0px 20px;  
  background:#8cbec9;  
  padding: 2px 7px 2px 7px;  
  text-shadow: 1px 1px 1px #5d97a4;  
  color:#fff;  
}  

.comment_answer:hover {  
  background:#9dd0db;  
}  

.comment_answer:active {  
  box-shadow:inset 0px 0px 3px #5a95a2!important;  
}  

.comment_like:link,  
.comment_like:visited{  
  float:right;  
  background:#8ec98c;  
  padding: 2px 7px 2px 7px;  
  text-shadow: 1px 1px 1px #4aa44c;  
  color:#fff;  
}  

.comment_like:hover {  
  background:#abe6a9;  
}  

.comment_like:active {  
  box-shadow:inset 0px 0px 3px #349932!important;  
}  

.comment_bottom strong {  
  float:right;  
  padding: 2px 10px 2px 10px;  
  background:#dde9d9;  
  margin-right: 20px;  
}  

.comment_answer_admin{  
  float:left;  
  width:94%;  
  margin-top: 10px;  
  padding: 10px 20px 10px 20px;  
  background:#f4ecec;  
  border-radius:3px;  
}  

.comment_avatar_admin{  
  float:right;  
  width:50px;  
  height:50px;  
  margin: 0px 0px 10px 25px;  
  border: 3px solid #dca2a2;  
  border-radius:3px;  
}  

.cell_comment a:hover img {  
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85);  
  -moz-opacity: 0.7;  
  opacity: 0.7;  
  filter: alpha(opacity=85);  
}

На этом всё, спасибо за внимание!
Рейтинг: 0.0/0
Всего комментариев: 0
Подписка: 1 Код *:

Категории раздела
Пользователи [1]
Все материалы для модуля: Пользователи
Каталога файлов [0]
Все материалы для модуля: Каталога файлов
Комментарий [2]
Все материалы для модуля: Комментарий
Мини-чат [0]
Все материалы для модуля: Мини-чат
Статистика [0]
Все материалы для модуля: Статистика
PHP [1]
Все материалы по языку: PHP
Форум [2]
Все материалы для модуля: Форум
Прочее [5]
Все материалы для любых модулей
Вход на сайт
Логин:
Пароль:
Баннерообмен

банерообмен, тут может стоять вашь банер    банерообмен, тут может стоять вашь банер

банерообмен, тут может стоять вашь банер    банерообмен, тут может стоять вашь банер

Наш опрос
Оцените мой сайт
Всего ответов: 10
Помощь проекту
Вы можете помочь в развитие данного проекта.
Мы будем вам очень признательны.
WMR R762436343376
WMZ Z782883784570
WME E687245834519
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0