ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Стильный дизайн информер комментарии для uCoz

Стильный дизайн информер комментарии для uCoz

Можно найти всякие скрипты на такую функцию, а это Стильный дизайн информер комментарии для uCoz, который очень грамотно выполнен по своей конфигураций. А это место под изображение пользователя в рамке круглой, которую вы можете вывести на любой оттенок. Устанавливается в простой блог, но с начало нужно сделать информер и туда поставить сам код, который идет со стилями. Можно просто скрипт поставить а вот стили прописать в CSS где по сути они должны.

Это просто легче будет как пример выставить тот оттенок рамки который вам нужен, по умолчанию идет белый, возможно так он впишется на вашем ресурсе. Ещё разок привет, дорогие гости и пользователи сайта. Я хочу предоставить вам возможность установить к себе на сайт стильный и более современный информер новые/последние комментарии на сайте.
Скрипт код 100% рабочий и вы его можете наблюдать у нас на сайте, точно такой же будет и у вас после установки.

И так для того что бы у вас был точно такой же информер последних комментариев как и у нас на сайте то вам нужно создать сам информер с такими параметрами

[ Комментарии · Материалы · Дата добавления материала 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?>/images/noavatar.gif<?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>
<style>
.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/Ajaxoskrip/Fyrkes/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/Ajaxoskrip/Fyrkes/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;}
</style>

Все, установка завершена и смотрим как он работает. Будет небольшая задержка, и потом уже выведит любой комментарий, который оставят как гости или пользователи сайта.

23 Сентября 2015 Просмотров: 5154 Комментариев: (66)

Поделиться в социальных сетях

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 66
Порядок вывода комментариев: RoM4Ik1636 07 Марта 2017 01:23⁵⁰ 0 Здравствуйте! Как сделать в нём, чтобы при нажатии на имя или на аватар пользователя, переходило на его профиль, а не на его страницу с которой он зарегался на сайте? То есть переходит на вк фейсбук и тд. Kosten 07 Марта 2017 10:24⁵¹ 0 Здесь даже и не скажу, но у мня такой же точно установлен, вот вам копирую его полностью, что здесь на сайте. Код <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/Ajaxoskrip/Forma_skriptov/zZdU4oy.jpg<?endif?>" width="64" alt="" /></a></div> <div class="web_now_body"> <div class="web_now_body_top"> <a href="$PROFILE_URL$" class="comm-user"><strong>$USERNAME$</strong></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: #6d6d6d;">$MESSAGE$</a> </div> </div> </div> </div> </div> elaim 01 Ноября 2017 23:41⁵³ 0 Как бы к этому информеру прокрутку прикрутить, как у этого скрипта http://zornet.ru/load....-0-3479 Подскажите пожалуйста! Kosten 01 Ноября 2017 23:48⁵⁴ 0 Недавно материал попадался такой, но посчитал его пока не актуальным, но как то реально делают. Просто не думаю, что на этот информер можно прикрутить, мне кажется его нужно немного переписывать под прокрутку. Kosten 01 Ноября 2017 23:50⁵⁵ 0 За эту функцию отвечает класс overflow:auto;, что возможно здесь прочтите, по ссылке перейдите, там по этой теме описано подробно. Сайт: htmlbook.ru/css/overflow elaim 01 Ноября 2017 23:59⁵⁶ 0 Ссылка не открывается (( 404 Not Found elaim 02 Ноября 2017 00:02⁵⁷ 0 Прошу прощения! Открылась. Спасибо, буду изучать )) Kosten 02 Ноября 2017 01:47⁵⁸ 0 Но если изучите, то плиз поделитесь в комментариях, как сделать, возможно кто то также хочет поставить. kravcov_stanislav 22 Ноября 2019 12:03⁶⁰ 0 При размещении в комменте картинки или видео - смещение всего блока комментария Kosten 22 Ноября 2019 19:07⁶¹ 0 Скрин можно посмотреть или также можно разместить все на форуме, где по теме для этого создать тему и все подробно описать. -SAM- 24 Ноября 2019 07:18⁶² +1 Надеюсь, что не делали в информере ограничение по длине сообщения? Если делали, то как уже говорил в комментариях к материалам таким - после подрезка может попасть на незакрытый тег html, соответственно нарушается структура разметки, отсюда может быть и смещение содержимого (как внутри контейнера, так и самого каркаса шаблона). И посмотреть как внешне блок выглядит, если в него поставить содержимое, которое по ширине больше, чем сам блок. Можно попробовать сделать ограничения, прописав там стили: Код .web_now_body_comment img {max-width:200px;max-height:200px} .web_now_body_comment blockquote, .web_now_body_comment iframe, .web_now_body_comment object, .web_now_body_comment embed {width:auto} Если же конфликт какой есть, то это уже смотреть ваш шаблон нужно, куда ставите (есть ли другие ошибки). UPD.: пожалуйста. Тот код, что скинули - тут не нужен (довеском идёт). Далее уже пошёл оффтоп, который не касается этого материала (и ваш сайт не видел никто, тему на форуме делайте и подобные вопросы задавайте там - будем вам после ответ). kravcov_stanislav 28 Ноября 2019 23:17⁶³ -1 -SAM- Спасибо, получилось! <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?>/avatar/noavatar.gif<?endif?>" width="37" alt="" /></a></div> <div class="web_now_body"> <div class="web_now_body_top"> <a href="$ENTRY_URL$" class="fa fa-arrow-circle-o-right pull-right"></a> $DATE$ \| $TIME$</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: #4D6D91;">$MESSAGE$</a> </div> </div> </div> </div> </div> <style> .web_now:nth-of-type(odd) .web_now_ava {float: right;} .circle {border-radius: 30%;} .web_now_ava {height: 37px;width: 37px;border: 2px solid #fff; box-shadow: 0px 0px 1px 1px #DDD;overflow: hidden;float: left;margin-top: 3px;} .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: 37px;width: 37px;border: 2px solid #fff;box-shadow: 0px 0px 1px 1px #DDD;overflow: hidden;float: left;margin-top: 3px;} .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: 50px;margin-top: 10px;} .web_now:nth-of-type(odd) .web_now_body {padding-right: 5px;margin-top: 10px;display: block;} .web_now_body_top {margin-bottom: 10px;padding:0 5px;line-height: 20px;} .web_now_body_top a.comm-user {color: #000;font-size: 12px;font-family: 'Roboto Medium';} .web_now_date {color: #000;float: right;font-size: 10px;margin-top: 2px;} .web_now_body_top a.fa {margin-left: -10px;font-size: 10px;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: #00ffff;font-size: 11px;line-height: 18px;z-index: 0;display: block;font-family: 'Exo 2', sans-serif;font-style: italic;font-weight: 1800;} .web_now_body_comment {max-height: 120px;overflow: hidden;} .web_now_body_comment a {color: #00ffff} .web_now:nth-of-type(even) .web_now_body .web_now_body_container span.comm_sprt{background: url(/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(/comm_sprt_r.png) no-repeat 0px 0px;width: 25px;height: 17px;display: block;position: absolute;right: -22px;top: 8px;} .web_now_body_comment img {max-width:100px;max-height:200px} .web_now_body_comment blockquote, .web_now_body_comment iframe, .web_now_body_comment object, .web_now_body_comment embed {width:100px;} .web_now:nth-of-type(odd) .web_now_ava {float: right;} .web_now:nth-of-type(odd) .web_now_body {margin-right: 45px;} </style> kravcov_stanislav 28 Ноября 2019 23:20⁶⁴ -1 На том же сайте чат, подскажите пож-та как можно реализовать чтобы при добавлении видео или картинки отображалось превью, а при клике - всплывающее окно. В блоке "видеоновости" что-то подобное есть... Kosten 29 Ноября 2019 01:03⁶⁵ 0 Видео не приходилось устанавливать в чат, но там есть BB коды, что думаю на простом стандартном должно по идее выводить ролики. Что по модальному окну, то нужно модал задействовать. -SAM- 12 Декабря 2019 00:04⁶⁶ 0 Вот расписал нужную инфу еще, чтобы кто не знал, то мог ознакомиться (для общего развития, так сказать). Вот еще: Код <div class="web_now_body_comment"><a href="$ENTRY_URL$" style="color: #aab2bd;">$MESSAGE$</a></div> Сделано инлайновым стилем, а можно сразу .web_now_body_comment > a {color: #aab2bd;} Но всё равно мне не ясно до конца, как можно избежать момента, когда кто-то метит текст своим цветом, то после оно и другим цветом в блоке информера шурует - портиться внешний вид сайта... попробовал сделать акцент на нужный цвет в стилях через !important, но не помогло. Вот еще стили для стилизации анкора. Ищем там .web_now_body_comment a {color: #3BAFDA} и делаем вместо него: .web_now_body_comment a.link {color: #3BAFDA} .web_now_body_comment > a.link:hover {color: #545251; text-decoration: underline;} .web_now_body_comment > a {color: #717070;font-family: 'Stolzl', sans-serif;} Если не хотите ссылки внутри самого коммента там метить отдельным цветом: .web_now_body_comment a.link {text-decoration: underline;} .web_now_body_comment > a {color: #717070;font-family: 'Stolzl', sans-serif;} или так (чтобы при наводке лишь цвет отдельный был - #3BAFDA или #545251): .web_now_body_comment a.link {text-decoration: underline;} .web_now_body_comment a.link:hover {color: #3BAFDA} .web_now_body_comment > a {color: #717070;font-family: 'Stolzl', sans-serif;} Если у кого-то подчеркивает всё сообщение комментария, то так исправить можно: .web_now_body_comment a.link {text-decoration: underline;} .web_now_body_comment a.link:hover {color: #3BAFDA} .web_now_body_comment > a {color: #717070;font-family: 'Stolzl', sans-serif; text-decoration: none;} .web_now_body_comment > a:hover {color: #5d5a5a;text-decoration: none;} Что касается font-family: 'Stolzl', sans-serif; - это на ZorNet решили таким шрифтом сделать, можете свой ставить или не ставить вообще. Цвета тоже под себя подбирайте.
« 1 2 3 4 5