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

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

102017-05-23524724Денис Абдуллин

На нашем сайте вид комментариев вливается в общий стиль сайта, хотя в основе своей позаимствован со старой версии TJournal. Устанавливается этот вид комментариев на uCoz как и всегда очень просто – заменой и добавлением нужного кода.

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

Установка

Управление дизайном - Вид комментариев. Замените код:

Код
<div class="comment_over">
<div class="comment">
<div class="comment_avatar"><a href="$PROFILE_URL$"><img src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>https://yraaa.ru/images/noavatar.gif<?endif?>" width="64" alt="" /></a></div>
<div class="comment_message">
<div class="comment_top"><?if($USERNAME$)?><a href="$PROFILE_URL$">$NAME$</a><?else?>$NAME$<?endif?> <span class="comm_time">$DATE$ в $TIME$<?if($ENTRY_URL$)?> / <a href="$ENTRY_URL$">Материал</a><?endif?></span>$MODER_PANEL$</div>
<div class="comment_message_in">$MESSAGE$</div>
<?if($ANSWER_URL$)?><div class="comment_answer_button"><a href="$ANSWER_URL$">Ответить</a></div><?endif?>
</div>
<div class="comment_rate">
<div class="c_rate_t">
<div class="c_rate_minus"><?if($BAD_COMMENT_URL$)?><a href="$BAD_COMMENT_URL$">-</a><?endif?></div>
<div class="c_rate_count"><?if($COMMENT_RATING$<0)?><div class="c_minus">$COMMENT_RATING$</div><?else?><?if($COMMENT_RATING$=0)?><div class="c_ziro">0</div><?else?><div class="c_plus">$COMMENT_RATING$</div><?endif?><?endif?></div>
<div class="c_rate_plus"><?if($GOOD_COMMENT_URL$)?><a href="$GOOD_COMMENT_URL$">+</a><?endif?></div>
</div>
</div>
</div>
</div>

Вставьте ниже в Таблицу стилей (CSS):

Код
.comment_over {margin-top:20px;padding-bottom:15px;border-bottom:1px solid #dedede}
.comment {display:table;width:100%;}
.comment_avatar {display:table-cell;vertical-align:top;width:64px;padding-right:15px}
.comment_message {display:table-cell;vertical-align:top;text-align:left}
.comment_rate {display:table-cell;vertical-align:top;text-align:center;width:80px}
.comment_top {padding-top:2px;padding-bottom:7px;font-size:17px;line-height:20px}
.comment_top a {text-decoration:none;color:#6c6c6c}
.comment_top .comm_time {font-size:12px;color:#9c9c9c;display:inline-block;padding-left:10px}
.comment_message_in {font-size:15px}
.comment_over:hover .comment_answer_button a {display:inline-block}
.comment_over:hover .c_rate_plus a, .comment_over:hover .c_rate_minus a {display:block}
.comment_answer_button {margin-top:10px;height:24px}
.comment_answer_button a {display:none;color:#666;font-size:13px;text-decoration:none;background:#efefef;padding:3px 10px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px}
.comment_answer_button a:hover {color:#1d1d1d;text-decoration:none;background:#eaeaea;}
.c_minus, .c_ziro, .c_plus {width:38px;padding:3px 0px;font-size:13px;text-align:center;font-weight:bold;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px}
.c_minus {background:#ffcccc;color:#cc0000}
.c_ziro {background:#cccccc;color:#FFF}
.c_plus {background:#ccffcc;color:#009900}
.c_rate_t {display:table;height:24px}
.c_rate_plus {display:table-cell;vertical-align:top;width:22px;}
.c_rate_minus {display:table-cell;vertical-align:top;width:22px;}
.c_rate_count {display:table-cell;vertical-align:top;width:46px;padding-left:3px;text-align:center}
.c_rate_plus a {width:18px;height:18px;display:none;color:rgba(0,0,0,0);font-size:0px;background:url('https://yraaa.ru/files/like.png');margin-top:3px;opacity:0.5;position:absolute}
.c_rate_minus a {width:18px;height:18px;display:none;color:rgba(0,0,0,0);font-size:0px;background:url('https://yraaa.ru/files/unlike.png');margin-top:3px;margin-left:-5px;opacity:0.5;position:absolute}
.c_rate_plus a:hover, .c_rate_minus a:hover {opacity:1}

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


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (18)
Денис Дунаев 2016-02-03 в 22:09 / МатериалСпам
а как аватары закруглить как у вас?
-1
Виталий 2015-07-22 в 11:07 / МатериалСпам
Добрый день. Подскажите как сделать только вид оценок комментариев?
2
Вадим Гаринов 2015-06-09 в 14:29 / МатериалСпам
Отличный вид комментариев.
4
Philip Rybalka ✔ 2015-03-24 в 23:50 / Материал
хаха
-1
Антон Балаш 2015-03-25 в 14:35 / МатериалСпам
Денис, выложите пожалуйста персональную страницу пользователя как на Yraaa.ru
1
Николаич 2015-03-24 в 14:12 / МатериалСпам
Аякс окна еще выложите)
-2
Мистер-Х 2015-03-24 в 14:05 / МатериалСпам
Все нашел причину почему noavatar не показывал, забыл загрузить картинку себе на сайт.
-9
Отабек Юнусов 2015-03-24 в 09:26 / МатериалСпам
Есть не большая проблема, если пользователя ава не будит то место ава нечего не показывает.
-3
Dimas 2015-03-24 в 07:05 / МатериалСпам
я когда навожу на лайк, то не высвечиваются палец вверх и вниз, а только кнопка ответить. в чем может быть беда?!
1
Павел Новосёлов 2015-03-23 в 20:20 / МатериалСпам
Я так понимаю, раз ты потихонечку скидываешь свой дизайн, ты его сменишь?)
9
Danny Worsnop 2015-03-23 в 15:18 / МатериалСпам
По моему уже АМС не знает что выложить на сайт..
12
Марк 2015-03-25 в 23:56 / МатериалСпам
А дизайн вам весь сразу не выложить в формате шаблона? С конструктором.
3
Владимир 2015-03-26 в 00:25 / МатериалСпам
отличная идея
3
codY 2016-06-16 в 10:09 / МатериалСпам
Я закруглил вот зайди http://ddh.ucoz.site/news/turnirnaja_tablica_evro_2016/2016-06-12-41
-2
Igor Nikitin 2016-07-19 в 16:09 / МатериалСпам
;)
1
Sergey Karnaukhov 2016-11-12 в 18:32 / МатериалСпам
как добавить такие линии меж комментов?
1
Ильяс 2016-12-02 в 20:17 / МатериалСпам
Народ,я тут малость переделал данный вид,но не могу понять как установить равномерно отступы для плюса и минуса (пальцев), точнее понимаю, но видимо где то есть прокол в CSS. Если есть кто более понимает в CSS, прошу вашей помощи. http://prohazar.ru/publ/12/1-1-0-30#comments
0
Бобков 2017-01-29 в 15:22 / МатериалСпам
класс забрал))
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.