» »

Информер комментарий с эффектом на uCoz


Информер комментарий с эффектом на uCoz

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

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

Давайте посмотрим как он будет стоять по умолчанию.

Информер для комментариев на сайт

Теперь так будет выглядеть при наведение курсора.

Вывод комментариев на сайте uCoz

Установка:

Но прежде создаем информер с параметрами и ставим скрипт:

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

Код
<li><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$" class="avatar" height="45" width="45"><?else?><img src="/.s/img/icon/social/noavatar.png" class="avatar" height="45" width="45"/><?endif?><div>  
<span class="recent_comment_name">$USERNAME$</span> <span class="ctime">$DATE$</span></div><i class="fa fa-pencil" aria-hidden="true"></i> <a href="$ENTRY_URL$#comments" title="$USERNAME$ | $ENTRY_TITLE$">$MESSAGE$</a><div class="clear"></div></li>


CSS - или скачаете, они находятся в архиве:

Код
ul.clearlist {margin: 0; padding: 0; font-family: 'PT Sans';}
.clearlist li .avatar { float: left; margin-right: 5px; padding: 1px; border: 1px solid #ccc; border-radius: 50px;}
.clearlist li .recent_comment_name, .recent_comment_name a {color: #d15128; font-weight: 700; font-size: 13px; padding-top: 5px; display: inline-block;}
.clearlist li .ctime {color: #999; font-size: 10px; padding-left: 5px;}
.clearlist a { color: #A9953E; font-size: 15px;}
.clearlist a:hover { color: #3A413F; }
.clearlist li {padding: 5px 0; border-bottom: 1px dotted #CCC; background-size: 200.22% auto; -webkit-background-size: 200.22% auto; -moz-background-size: 200.22% auto; background-position: -0 0; background-image: linear-gradient(to right,rgba(255,255,255,0) 50%,#f9f9f9 50%); transition: background-position .5s ease-out; -webkit-transition: background-position .5s ease-out; white-space: nowrap; overflow: hidden; -webkit-mask: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0) 210px, rgba(0, 0, 0, 0));}
.clearlist li:hover {background-position: -99.99% 0;}
.clearlist i { color: #ccc;}


В нужное место на сайте

Код
<ul class="clearlist">  
$MYINF_номер информера$</ul>


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

PS - прилагается архив, где все продублировано в текстовом документе.

Источник: uconet.ru
08.10.2016 Загрузок: 6 Просмотров: 446 Комментарий: (21)

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

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

Комментарий: 21
FeStemBer
FeStemBer 08.10.2016 22:141
0
Здесь вижу комментарий, которые очень круто смотрятся, интересно как все сделано, что идет плавное удаление знаков.
Brung
Brung 08.10.2016 22:172
0
А, что на этом скрипте не заметил этот же эффект, но только там вид материалов.
FeStemBer
FeStemBer 08.10.2016 22:213
0
Brung, давай не сравнивать светлый дизайн с темным, хотя и на светлом тоже заметно, но здесь более качественно видно.
Angerfist
Angerfist 08.10.2016 23:1212
0
Comment has been deleted.
Kosten
Kosten 08.10.2016 23:2814
0
Все стили и коды по новому залил.
tsakonter
tsakonter 08.10.2016 22:224
0
К кнопка крестик, это удаляешь комментарий и другой появляется?
Сафрон
Сафрон 08.10.2016 22:265
+1
Чтоб удалить и сразу новый появился комментарий, но а точнее старый, не вижу логики в этом. Да так и не будет, просто скрипт должен быть на php чтоб так работала, больше всего для дизайн.
tsakonter
tsakonter 08.10.2016 22:307
0
Если для дизайн стоит, то мне так кажется не удачно выбрана кнопка.
Kosten
Kosten 08.10.2016 22:296
0
Нет не убирает комментарий, попробовал, только страницу вверх поднимает, можно думаю вообще убрать.
Kosten
Kosten 08.10.2016 22:338
+1
Здесь этот крестик кнопкой, можно заменить на более красивей, а точнее Font Awesome кнопки, и там можно выбрать какую поставить.
Tergran
Tergran 08.10.2016 22:489
0
Точно, красиво смотрится.
Советник
Советник 08.10.2016 22:5210
+1
Спасибо, отличный информер, то что как раз мне нужно.
Angerfist
Angerfist 08.10.2016 23:0811
0
Comment has been deleted.
Kosten
Kosten 08.10.2016 23:2313
0
Уберу просто все которые залил, но здесь подстраховался, можно скачать, в текстовом документе. А материал сейчас пере залью.
Kosten
Kosten 08.10.2016 23:3415
0
Блин, хоть не редактируй, смайлы лезут, и не чего не сделать.
FeStemBer
FeStemBer 10.10.2016 17:0616
0
Вот сделано, и видно что 2 строки, наверно нужно выставлять знаки и их количество.

Kosten
Kosten 10.10.2016 17:1317
0
Там видать просто написано в 2 строки, но все же видно, что не чего не попадает лишнего, а все в рамках блока.
ДимДимыч
ДимДимыч 29.10.2016 19:5118
0
Мне нравится этот информер, я даже вот на кино сайт сделал который на DLE находится kino-vor.ru, в правом блоке почти в низу можете посмотреть его в работе.
Kosten
Kosten 29.10.2016 20:0119
0
Здесь сделано круто, что название и описание пропадает плавно, а не тупо обрывается и робот его полностью читать будет.
FeStemBer
FeStemBer 29.10.2016 20:0620
0
ДимДимыч, а вообще как так возможно сделать, то там точно файл изображение идет, но больше удивляет, что второй прописью не идет и информер не слетает.
ДимДимыч
ДимДимыч 29.10.2016 20:0921
0
Чуток не пойму про что вы!
avatar