• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Информер на вывод новых комментарии uCoz
Информер на вывод новых комментарии uCoz
Kosten
Среда, 24 Мая 2017 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
Много есть такого типа кодов, но этот информер по своему оригинален и безусловно красиво смотрится на сайте. Картинки пользователей, которые оставили комментарий, будут выводиться на главную страницу. И здесь его эффективность очень большая, можно следить за всем, сто написали.

Но также хочется обратить внимание на его дизайн, который вы сами можете под свои стили настроить. А это сколько знаков выводить и какой будет обвод у него, так как Avf находиться не стандартно а в кругу, что и смотрится совершенно по другому. Он полностью проверен и работает отлично, только оставил комментарий и через какое то время, а это небольшое он выводиться.



Установка:

С начало заходим в админ панель и там в раздел информер и нам нужно создать, название можно любое поставить и параметры у него будут такие.

[ Комментарии · Материалы · Дата добавления материала D · Материалы: 5 · Колонки: 1 ]

Когда создали, вам нужно все убрать что там есть и поставить этот код.

Код
<div class="web_now clearfix">  
<div class="web_now_ava circle">  
<a href="$PROFILE_URL$"><img src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>http://zornet.ru/zorner_ru_1/Ven/avatar.png<?endif?>" width="64" alt="" /></a></div>  
<div class="web_now_body">  
<div class="web_now_body_top">  
<a href="$PROFILE_URL$" target="_blank" class="comm-user">$USERNAME$</a>  
<a href="$ENTRY_URL$" class="fa fa-arrow-circle-o-right pull-right"></a>  
<span class="web_now_date">$DATE$ - $TIME$</span> </div>  
<div class="web_now_body_container">  
<span class="comm_sprt"></span>  
<div class="web_now_body_mess shadow">  
<div class="web_now_body_comment"><a href="$ENTRY_URL$"style="color: #aab2bd;">$MESSAGE$</a> </div>  
</div>  
</div>  
</div>  
</div>


CSS

Код
.web_now:nth-of-type(odd) .web_now_ava {float: right;}  
.circle {border-radius: 50%;}  
.web_now_ava {height: 57px;width: 57px;border: 4px solid #fff; box-shadow: 0px 0px 1px 1px #DDD;overflow: hidden;float: left;margin-top: 5px;}  
.web_now_ava img {width: 110%;min-height: 112%; margin-top: -3px;margin-left: -2px;}  
.web_now {position: relative;display: block;margin-bottom: 15px;}  
.web_now_ava {height: 57px;width: 57px;border: 4px solid #fff;box-shadow: 0px 0px 1px 1px #DDD;overflow: hidden;float: left;margin-top: 5px;}  
.web_now_ava img {width: 110%;min-height: 112%;margin-top: -3px;margin-left: 0px;}  
.web_now:nth-of-type(even)  
.web_now_body {margin-left: 75px;margin-top: 12px;}  
.web_now:nth-of-type(odd)  
.web_now_body {padding-right: 5px;margin-top: 12px;display: block;}  
.web_now_body_top {margin-bottom: 8px;padding:0 5px;line-height: 22px;}  
.web_now_body_top a.comm-user {color: #aab2bd;font-size: 14px;font-family: 'Roboto Medium';}  
.web_now_date {color: #bfbfbf;float: right;font-size: 10px;margin-top: 2px;}  
.web_now_body_top a.fa {margin-left: -14px;font-size: 16px;opacity: 0;visibility: hidden;transition:all 0.3s ease 0s;color: #d8d8d8;margin-top: 5px;}  
.web_now_body_top a.fa:hover {color: #5bc4f3;}  
.web_now_body_container {position: relative;}  
.web_now_body_mess {background: #fff;border: 1px solid rgba(196, 196, 196, 0.47);border-radius: 5px;padding: 8px 12px 10px;color: #959595;font-size: 12px;line-height: 18px;z-index: 0;display: block;font-family: 'Exo 2', sans-serif;font-style: italic;font-weight: 300;}  
.web_now_body_comment {max-height: 55px;overflow: hidden;}  
.web_now_body_comment a {color: #3BAFDA}  
.web_now:nth-of-type(even) .web_now_body .web_now_body_container span.comm_sprt{background: url(http://zornet.ru/zorner_ru_1/Ven/comm_sprt_l.png) no-repeat 0px 0px;width: 25px;height: 17px;display: block;position: absolute;left: -8px;top: 8px;}  
.web_now:nth-of-type(odd) .web_now_body .web_now_body_container span.comm_sprt{background: url(http://zornet.ru/zorner_ru_1/Ven/comm_sprt_r.png) no-repeat 0px 0px;width: 25px;height: 17px;display: block;position: absolute;right: -22px;top: 8px;}  
.web_now:nth-of-type(odd) .web_now_ava {float: right;}  
.web_now:nth-of-type(odd) .web_now_body {margin-right: 70px;}


Как заметили, стили идут вместе с кодом, и если вы что то будете в дизайне менять, то только там и не где не нужно регулировать.

Комментарий к этому информер:

1. Его на много не сделаешь, максимум 3-5 комментариев, но по сути больше и не нужно. А так очень оригинально сделан с круглым обводом, который можно подогнать по цветовой гамме.

2. Не чего особенного не вижу кроме дизайна, информера код можно сказать идентичен другим на такую работу. Только вот комментарий сами красиво выводятся и поставить к примеру на фиксированную ширину каркаса, как то не могу себе представить.

3. Но думаю по лучше в плане дизайна идет, чем стальные, которые подчеркивают и делят сами комментарий. А здесь есть ава и от нее идет комент и все очень понятно, и думаю если покопаться в стилях его можно сделать на темный фон сайта.

4. Интересно а можно отдельно страницу комментариев сделать? и из страницы комментариев сделать последние добавленные комментарии?

5. А для чего нужна отдельная страница? Так как комментарий выводят только в двух случаях, чтоб пользователь видел и администрация могла все мониторить.

6. Вообще то этот информер и ставят на главную страницу, это можно сказать для большинства информации.

7. И администраций легче узнать и увидеть школоду, которая совершенно не по теме написало свою чушь.

8. Не только администраций, у них есть для этого админ панель и посмотреть все комментарий пользователей, хотя можно и на самом сайте. Это для того, какая тема обсуждается, а значит она актуальная или наоборот.

9. Так если заметить и по ходить по сайтам, то на многих такой скрипт стоит и не кому не мешает. К примеру ты отписал и тебе не нужно заглядывать каждый раз, отписали тебе ответ, а просто посмотреть не заходя в материал.

10. Попробовал сделать квадратное окно, только получается уменьшить сам круг.

Ваш информер не совсем правильно работает видите класс

Код
<a href="$ENTRY_URL$" class="fa fa-arrow-circle-o-right pull-right"></a>


у вас не полные стили к этому классу.

Вот рабочий информер код



CSS:

Прикрепления: 5330819.png (54.1 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Информер на вывод новых комментарии uCoz
  • Страница 1 из 1
  • 1
Поиск: