Универсальный вид комментариев

Уважаемый гость! Для скачивания файлов с нашего портала необходимо авторизоваться:

Понравилась статья?

Поделись с друзьями!
На uCozBook обновился вид комментариев, и почему бы не поделиться предыдущей версией с народом? smile
Вот так выглядят комментарии:


Дизайн комментариев
Дизайн комментариев создан с нуля специально для uCozBook, но по определенным причинам мы вынуждены от него отказаться.
Код комментария разбит на три части: информация об авторе комментария (его логин и аватар), само тело с комментарием и рейтинг. Хочется отметить, что вы можете "плюсовать", нажимая на стрелочку вверх, и "минусовать", соответственно, нажимая на стрелочку вниз.

Комментарии имеют универсальный дизайн, который подойдет под многие тематики.


Установка
1. В ПУ сайта открываем дизайн "Вида комментариев" (вашсайт.ру/panel/?a=tmpl;m=5;t=1) и заменяем содержимое на этот код:
Код
<div class="comment_body">

  <div class="info">
  <?if($USER_AVATAR_URL$)?> <img class="user_pic" src="$USER_AVATAR_URL$" width="35" height="34"> <?else?> <img class="user_pic" src="/img/noava.jpg" width="35" height="34"> <?endif?>
  <a href="$PROFILE_URL$" class="nic_user">$USERNAME$</a>
  <span class="time_comment">$DATE$ в $TIME$</span>
  </div>

  <div class="comment">$MESSAGE$$MODER_PANEL$</div>
  <?if($ANSWER_URL$)?><a href="$ANSWER_URL$" class="reply">ответить</a><?endif?>
  <div class="voices">
  <span>Голоса:</span>
  <div class="voice_bl plus">
  <span>$COMMENT_RATING$
  <div class="rt">
  <a class="gd" title="Хороший комментарии" href="$GOOD_COMMENT_URL$"></a>
  <a title="Плохой комментарий" class="bd" href="$BAD_COMMENT_URL$"></a>
  </div>
  </span>
  <i></i>
  </div>
  </div>

  </div>


2. Теперь необходимо в добавить стили. Переходим в таблицу стилей (CSS) (вашсайт.ру/panel/?a=tmpl;m=3;t=3) и в самый конец вставляем:
Код
.comments .comment_body.last {
  border-bottom: none;
}
.comments .comment_body,
.comments .reply_comment {
  margin-left: 45px;
  position: relative;
  padding-right: 55px;
  border-bottom: 1px dashed #c0c0c0;
  padding-bottom: 5px;
  margin-top: 7px;
}
.comments .comment_body .reply,
.comments .reply_comment .reply {
  display: inline-block;
  text-decoration: none;
  background: url(../img/reply_bg.png) 0px 10px no-repeat;
  color: #848484;
  font: 12px/22px "Open Sans";
  padding-left: 10px;
}
.comments .info {
  margin-bottom: 5px;
}
.comments .info img {
  position: absolute;
  top: 0px;
  left: -45px;
}
.comments .info .nic_user {
  text-decoration: underline;
  color: #40a2bb;
  font: 13px/15px "Open Sans";
}
.comments .info .time_comment {
  color: #848484;
  font: 11px/14px "Open Sans";
}
.comments .comment {
  font: 13px/16px "Open Sans";
  color: #454444;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #c0c0c0;
  padding: 5px 7px;
}
.comments .voices {
  width: 40px;
  float: right;
  position: absolute;
  top: -2px;
  right: 0px;
}
.comments .voices > span {
  font: 11px/14px "Open Sans";
  color: #848484;
}
.comments .voices .plus {
  background: #75b2c2;
}
.comments .voices .inert {
  background: #c0c2c2;
}
.comments .voices .voice_bl {
  border-radius: 4px;
  width: 40px;
  height: 40px;
  text-align: center;
  position: relative;
}
.comments .voices .voice_bl span {
  font: bold 15px/20px "Open Sans";
  color: #454444;
  display: inline-block;
  text-decoration: none;
  margin-top: 10px;
}
.comments .voices .voice_bl i {
  display: inline-block;
  text-decoration: none;
  background: url(../img/voice_arrow.png) no-repeat;
  width: 5px;
  height: 21px;
  float: right;
  margin: 9px 4px 0px -5px;
}
.comments .reply_comment {
  margin-left: 92px;
}
.comments .write_comment {
  border-top: 1px solid #c0c0c0;
}
.comments .write_comment .write_comment_body {
  margin-left: 65px;
  position: relative;
}
.comments .write_comment .write_comment_body img {
  position: absolute;
  top: 0px;
  left: -59px;
}
.comments .write_comment .write_comment_body textarea {
  height: 125px;
  border: 1px solid #dddddd;
  border-radius: 4px;
  font: italic 200 12px/14px "Open Sans";
  width: 98%;
  padding-left: 7px;
  outline: none;
  resize: none;
  padding-top: 10px;
}
.comments .write_comment .write_comment_body .wrap_textarea {
  position: relative;
  display: inline-block;
  width: 100%;
}
.comments .write_comment .write_comment_body .wrap_textarea:after {
  content: "";
  position: absolute;
  top: 13px;
  left: -10px;
  background: url(../img/arrow_textarea.png) no-repeat;
  width: 11px;
  height: 22px;
}
.comments .write_comment .comments_head {
  padding-bottom: 20px;
}
.comments .write_comment .comments_head span {
  background: url(../img/post_icos.png) -120px -1px;
}
.comments .write_comment .button_send {
  margin-top: 6px;
}
.comment_profile .write_comment {
  border-top: none;
  border-bottom: 1px dashed#c0c0c0;
  padding-bottom: 20px;
}

Добавил: Admin Просмотров: 1468 Категория: Интересные решения Комментарии
avatar
1
авчс
avatar
2
Нейтральный дизайн, может и пригодится, буду иметь ввиду.
avatar
3
Админ, а не поделитесь новым видом комментариев, который сейчас используется?? ))
avatar
0
4
Прямо как на сайте нет smile
Но скоро выложу новый вид комментариев, похожий как на сайте
Ждите)
avatar
5
ОК, буду ждать! smile
avatar
6
Оо
avatar