Информер для вывода комментариев сайта uCoz
 | |
| Очередной материал для вывода комментариев через информер ресурса, где пользователь оставляет пост и он потом появляется в блоке сайта. Сделан он для того, чтоб бы быть всегда в курсе, где оставили комментарий, чтоб как можно быстро ответить на его. Также против спама, так как если нет его, то возможно спам останется не замечен для администраций сайта. Но здесь безусловно сделан для мониторинга и с ним прекрасно работать. Он выводит Avatar пользователя и название материала, что можно по одному клику перейти. Но также само описание, что пишут, где по прочтению можно понять, нужно отвечать или нет. Место под изображение будет круглым и с ним рядом дата, когда был оставлен комментарий и потом уже название идет. Но, а сам пост, будет в светло-синей обводе, но это все можно изменить по стилям, что идут. Устанавливая его на тестовый сайт, то заметил, если название материала большое, то оно просто не влазит и идет в 2 ряда, что не корректно смотрится. Но здесь можно TITLE уменьшить, как сам комментарий, что по нему где в коде установлен оператор, где сами ставите значение, сколько знаков выводить. А что по названию, не стал делать, если сам нужно, то в этой статье все написано, как уменьшить по знакам, и тогда безусловно корректно все будет визуально смотреться на сайте. Так на источнике он расположен, это темный фон.  Это уже на тестовом сайте, на светлом, просто проверяя сделал как раз на название большое.  На счет адаптивности, то здесь все нормально, под каждую ширину он определятся.  Приступаем к установке: Нужно зайти в админ панель и проследовать в раздел информер и там создать с такими параметрами. Сколько выводить, сами решайте, здесь выставлено 3 поста. [ Комментарии · Материалы · Дата добавления материала D · Материалы: 3 · Колонки: 1 ] Код <div class="chat-site"> <li> <a href="$PROFILE_URL$"><div class="chat-site-img"><img src="$USER_AVATAR_URL$" border="0"></div></a> <div class="chat-site-detali">$DATE$</div> <a href="$ENTRY_URL$">$ENTRY_TITLE$</a> <p><?if(len($MESSAGE$)>231)?><?substr($MESSAGE$,0,231)?>.....<?else?>$MESSAGE$<?endif?> </p> </li> </div> CSS: Код .chat-site {border-bottom: 1px solid #E0E9F0; font-family: 'PT Sans'; padding-bottom: 15px; padding-top: 3px; background-color: #fff;} .chat-site:last-child { border-bottom: 0; } .chat-site li {list-style: none;} .chat-site a {font-size: 12px; color: #2F2F2F; font-weight: bold;} .chat-site-detali {padding-top: 4px; color: #999999; font-size: 9px; display: inline-block;} .chat-site-img img {float: left; border-radius: 50px; width: 35px; height: 35px; margin-right: 4px; margin-left: 2px;} .chat-site p {-webkit-margin-before: 0; -webkit-margin-after: 0; font-size: 11px; background-color: #E6F2F7; display: -webkit-box; padding: 3px; border-radius: 3px; margin-right: 3px; margin-top: 3px;} Также его можно в самом коде переделать и выводить по другому, или где комментарий, то фон изменить, это что качается под какой дизайн ставить. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 21 | |
Цитата Kosten () Но это понятно, что попадется, не сегодня, так завтра, ты если знаешь, подскажи плиз, как правильно сделать, чтоб все по зеленому проезжали, как смайлы или ссылки.  1. Снять ограничение, количество символов в сообщении для вывода комментариев. Код <p><?if(len($MESSAGE$)>231)?><?substr($MESSAGE$,0,231)?>.....<?else?>$MESSAGE$<?endif?> </p> 2. Задать высоту height: Это вообще то мини чат, а вы его в Информер для вывода комментариев переименовали, вот он http://zornet.ru/load/stilnyj_vid_mini_chata_na_sajt_ucoz/81-1-0-7191 Вот рабочий информер как на вашем сайте стоит. В этой теме http://zornet.ru/load....-0-5801 ВСЁ РАСКРЫТО ЧТО И КАК. Код <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/Fresa/AB/avatar.png<?endif?>" width="64" alt="" /></a></div> <div class="web_now_body"> <div class="web_now_body_top"> <a href="$PROFILE_URL$" 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$">$MESSAGE$</a> </div> </div> </div> </div> </div> Код .circle{border-radius:50%} .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:5px; padding:0 2px; line-height:22px} .web_now_body_top a.comm-user{ color:#515151; font-size:12px; font-family:'Roboto Medium'} .web_now_date{ color:#515151; float:right; font-size:8px; margin-top:3px} .web_now_body_top a.fa{ margin-left:-13px; font-size:15px; opacity:0; visibility:hidden; transition:all 0.3s ease 0s; color:#d8d8d8; margin-top:3px} .web_now_body_top a.fa:hover{ color:#e63a1a} .web_now:hover .web_now_body_top a.fa{ margin-left:12px; display:block; transition:all 0.3s ease 0s; opacity:1; visibility:visible; margin-top:7px} .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:hover .web_now_body_container{ box-shadow:rgba(105, 105, 105, 0.09) 0px 0px 8px; border-radius:5px} .web_now:hover .web_now_body_mess{ color:#656D78} .web_now_body_comment{ height: auto;width: 100%; overflow:hidden; padding-left: 2px} .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/Fresa/AB/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/Fresa/AB/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 2 » | |
