» »

Темный вид комментариев WebMaster на uCoz


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

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

На центральном перекрепленном изображение фон стоит, здесь мы чисто уже по стилям сделали темнее.

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

Установка:

Заходим в панель управление и вид материалов полностью меняем и ставим этот код.

Код
<div class="comment_inner <?if($COMMENT_RATING$ < -2)?>commret<?endif?>">  
<div class="comment_avatar"><?if($NAME$="Анонимно")?><img class="comment-soc" src="http://zornet.ru/Ajaxoskrip/Abaveg/tyn/an.png" title="Анонимный комментарий"><?endif?><?if($SOC_TYPE$)?><img class="comment-soc" src="http://webmaster-ucoz.ru/w-u/img/social/$SOC_TYPE$.png" title="<?if($SOC_TYPE$ = "uid")?>Комментарий оставлен через сайт<?endif?><?if($SOC_TYPE$ = "vk")?>Комментарий оставлен через ВКонтакте<?endif?><?if($SOC_TYPE$ = "fb")?>Комментарий оставлен через Facebook<?endif?><?if($SOC_TYPE$ = "tw")?>Комментарий оставлен через Twitter<?endif?><?if($SOC_TYPE$ = "gp")?>Комментарий оставлен через Google+<?endif?><?if($SOC_TYPE$ = "ok")?>Комментарий оставлен через Одноклассники<?endif?><?if($SOC_TYPE$ = "ya")?>Комментарий оставлен через Яндекс<?endif?>"><?endif?><?if($USER_AVATAR_URL$)?><?if($SOC_LINK$)?><a rel="nofollow" href="$SOC_LINK$" title="$USERNAME$"><img alt="$USERNAME$" src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?endif?>"></a><?else?><a rel="nofollow" href="$PROFILE_URL$" title="$USERNAME$"><img alt="$USERNAME$" src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?endif?>"></a><?endif?>  
<?else?><img alt="avatar" src="http://zornet.ru/Ajaxoskrip/Forma_skriptov/zZdU4oy.jpg"><?endif?>  
</div>  
<div class="comment_body">  
<div class="comment_title">  
<?if($USERNAME$)?><a href="$PROFILE_URL$"><span><?if($NAME$)?>$NAME$<?else?>Имя неизвестно<?endif?></span> <span style="color:#a9a9a9;font-size:12.5px">@$USERNAME$</span></a><?else?><?if($SOC_LINK$)?><a rel="nofollow" href="$SOC_LINK$"><span>$NAME$</span></a><?else?><span>$NAME$</span><?endif?><?endif?> <span class="timestaaamp comment_date"> $DATE$ $TIME$<a href="#ent$ID$" onclick="prompt('', location.protocol + '//' + location.hostname + location.pathname + '#comEnt$ID$'); if (document.getElementById('comEnt$ID$')){$('body').scrollTo( { top:$('#comEnt$ID$').offset().top-22, left:0}, 500 );return false;}" name="ent$ID$" style="color:#a9a9a9;font-size:12.5px"><b title="Номер комментария"><sup>$NUMBER$</sup></b></a></span>  
<div class="comment_moder">  
<?if($GOOD_COMMENT_URL$)?><a href="$GOOD_COMMENT_URL$"><img alt="" src="http://zornet.ru/Ajaxoskrip/Abaveg/tyn/ncBB9Lqei-1.png" title="Хороший комментарий" style="margin: 0 4px;vertical-align: middle;"></a><?endif?>  
<?if($COMMENT_RATING$<0)?><b style="color:red" title="Рейтинг комментария">$COMMENT_RATING$</b><?else?><?if($COMMENT_RATING$=0)?><b style="color:gray" title="Рейтинг комментария">0</b><?else?><b style="color:green" title="Рейтинг комментария">+$COMMENT_RATING$</b><?endif?><?endif?>  
<?if($BAD_COMMENT_URL$)?><a href="$BAD_COMMENT_URL$"><img alt="" src="http://zornet.ru/Ajaxoskrip/Abaveg/tyn/ncBB9Lqei-2.png" title="Плохой комментарий" style="margin: 0 1px;vertical-align: middle;"></a><?endif?>  
<?if($MODER_PANEL$)?>$MODER_PANEL$<?endif?>  
</div>  
</div>  
<div class="comment_message">$MESSAGE$</div>  
<div class="comment_addition">  
<?if($ENTRY_URL$)?><span class="comment_answer"><a href="$ENTRY_URL$">материал</a></span><?endif?>  
<span class="comment_answer">  
<?if($USER_LOGGED_IN$)?><?if($USERNAME$)?><?if($ANSWER_URL$)?><a href="javascript://" onclick="commNote.openwindow('<?substr($ANSWER_URL$,strrpos($ANSWER_URL$,'{url:')+6,strpos(substr($ANSWER_URL$,strrpos($ANSWER_URL$,'{url:')+7),'}'))?>', '$USERNAME$')">ответить</a><?endif?><?else?><?if($ANSWER_URL$)?><a href="$ANSWER_URL$" onmouseover="$(this).attr('onclick', $(this).attr('onclick').replace('resize:0', 'modal:true,autosize:1,notaskbar:1,fadetype:2,fadespeed:500,fadeclosetype:2,fadeclosespeed:500').replace('-570', '650').replace('-100', '280'))">ответить</a><?endif?><?endif?><?else?><?if($ANSWER_URL$)?><div class="uc-answer-link"><a href="$ANSWER_URL$" onmouseover="$(this).attr('onclick', $(this).attr('onclick').replace('resize:0', 'modal:true,autosize:1,notaskbar:1,fadetype:2,fadespeed:500,fadeclosetype:2,fadeclosespeed:500').replace('-570', '650').replace('-100', '280'))">ответить</a></div><?endif?><?endif?></span>  
</span>  
</div>  
</div></div>


Не куда не уходим и в самый низ, прописываем js и сохраняем.

Код
<script type="text/javascript" src="http://zornet.ru/Ajaxoskrip/Abaveg/tyn/comments_notes.js"></script>


Осталось поставить в CSS стили, можно в самый низ.

Код
.comment_inner{margin: 0px 12px;padding: 14px 0px;border-bottom: 1px solid #484848;}  
.comment_avatar{float: left; width: 70px; margin-right: 7px;position: relative;}  
.comment_avatar img{width:70px; height: 70px; margin: 3px 10px 0 0;-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}  
.comment-soc{width:29px!important; height:29px!important;border-radius: 0%!important;border:0px!important;}  
.comment-soc{position: absolute; right:-3px; top:-5px;}  
.ucf-avatar img{width:53px!important; height: 53px!important;-webkit-border-radius: 50%!important; -moz-border-radius: 50%!important; border-radius: 50%!important;}  
.comment_body{padding:0px; margin-left: 60px;}  
.comment_title a{text-decoration:none;color: #0078D7;padding-left:3px;font-size: 15px;font-weight:bold}  
.comment_message{padding: 19px 29px;color:#666; font-size: 15px;}  
.comment_message_otvet{padding: 0px 29px;color:#666; font-size: 15px;}  
.comment_avatar {display:table-cell;vertical-align:top;width:64px;padding-right:15px}  
.comment_avatar img {border: 2px solid #656565;}  
.comment_date{color: #a9a9a9; font: normal 11px/13px "Tahoma";}  
.comment_addition{padding: 0px 10px; font: bold 11px/13px "Arial","Tahoma";text-align: right;}  
.comment_moder{float:right;}  
.comment_answer a {background: #171717;color: #FFFFFF;border: 1px solid;border-color: #4C4A4A;line-height:13px;padding: 5px 10px;display: inline-block;border-radius: 30px;outline: none;font-size: 13px;font-family: 'Open Sans', sans-serif;text-decoration: none;}  
.comment_answer a:hover {background: #383434;border-color: #6F6B6B;color: #DCDCDC;text-decoration: none;}  
.comment_answer a:active {background: #a9a9a9; border-color: #a9a9a9; color: #ffffff;text-decoration: none;}


На этом вся установка, как заметели в стилях нет не одной ссылки.

Источник: WebMaster-uCoz.Ru
16.10.2016 Просмотров: 412 Комментарий: (7)

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

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

Комментарий: 7
Tergran
Tergran 16.10.2016 04:581
0
А на темном этот вид материала не чего смотрится, возможно даже ярче чем на светлом.
Сафрон
Сафрон 16.10.2016 05:012
+1
Но как без этого, если есть светлый, значит и темный скоро будет. Хотя поддерживаю Tergran, смотрится нормально, все понятно.
Kosten
Kosten 16.10.2016 05:033
0
Здесь немного только изменил, но сами кнопки в темный оттенок вывел и лайк поставил изображением. В интернете только большой по размерам один Like нашел, вот с него и сделал, уменьшил и покрасил. 41b
Советник
Советник 16.10.2016 05:134
0
Но а что тут делать, все было уже сделано, только стили поменял и на этом вся работа. А что на счет Like, то здесь мне более преемлено.
Kosten
Kosten 16.10.2016 05:175
0
Но хоть Like оценил, просто не хотел время терять и с этого сайта взять, но здесь они на светлом фоне. Не чего, думал в поиске их множество, но куда там, может не по тому запросу искал, сам думаю нормальные сделал, точнее доработал с одного, оставалось перевернуть один и выкрасить как нужно, здесь тоже не стал придумывать велосипед и покрасил все по стандарту.
Tergran
Tergran 17.10.2016 00:346
0
На сайте веб мастер вообще хороший дизайн, и в нем ошибок мало, просто администратор следит за ним, и иногда такие плюшки как свой материал выкладывает для пользователя.
Kosten
Kosten 17.10.2016 00:487
0
Но там не только от своего сайта скрипты хорошие, и другие есть, и демонстрация почти ко всем идет. Не зря же он неофициальный партнер системы uCoz, это уже о чем то говорит.
avatar