» »

Вид комментариев Talantlev для uCoz

Вид комментариев Talantlev для uCoz

Светлый вид комментариев на сайт системы uCoz, которое создано пользователем waak, где есть на каждый пост социальные кнопки. Сам он по своей конструкций простой, но все же есть большие отличие, это как рейтинг, где к примеру нет нуля, и если вы ставите плюс или минус, он появиться выше. Здесь немного от стандартного, как он шел по умолчанию немного изменил. А это добавил шрифтовые иконки, они и так были подключены, просто каждой функций их присвоил. Но и рейтинг цветной сделал, это зеленый и красный цвет, где ранее была под одной гаммой. И теперь уже совершенно по другому смотрится, но еще Avatar поставил стиль закругление углов, где стазу сделал круглыми, что потом сами пиксели можете выставить как вам удобнее.

Что по кнопки поделиться, то не стал искать какие-то оригинальные, а поставил от Яндекс, которые уже не первый год работают и доказали, что они полностью соответствуют и их по форме можно изменить, и здесь они отлично подошли. Вам только нужно нажать на надпись поделиться и показаться, на повторный клик они исчезают. Безусловно есть функция ответ на комментарий и там уже совершенно другие функций, что встречаю в первые, а это по рейтинг. Если вы вообще на каком – то посту ставите плюс или минус, то эти кнопки исчезают автоматически, так как нет не какой разницы на повторное голосование. И где вы только ставите и на том посту пропадают.

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

Так будет, если вы поставили Like / Dislike:

Светлые комментарий сайта uCoz

Это новый пост без его оценки:

Код на комментарий для сайта

Так визуально смотрится под адаптацию мобильную:

Адаптированный вид комментариев для сайта юкоз

Приступаем к установке:

Но как обычно подключим шрифтовые иконки, чтоб появились кнопки.

Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


Теперь идем в админ панель и полностью заменяем вид комментариев.

Код
<?if($LEVEL$>=1)?>  
<div class="wid-comm-bc otvet-com">  
  <div class="wid-comm-ava"><a href="$PROFILE_URL$"><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$"><?else?><img src="http://zornet.ru/Ajaxoskrip/Forma_skriptov/zZdU4oy.jpg"><?endif?></a></div>  
  <div class="wid-comm-inf">  
  <div class="wid-comm-us"><a href="$PROFILE_URL$">$USERNAME$ </a><?if($MODER_PANEL$)?>$MODER_PANEL$<?endif?></div>  
  <div class="wid-comm-text">  
  $MESSAGE$  
  </div>  
  <div class="wid-comm-fot">  
  <ul>  
  <li><i class="fa fa-calendar" aria-hidden="true"></i> $DATE$</li>  
  <?if($IS_OWN$)?><?else?><li><a href="$ANSWER_URL$"><i class="fa fa-sign-in" aria-hidden="true"></i> Ответить</a></li><?endif?>  
  </ul>  
  <span>  
   
<?if($BAD_COMMENT_URL$)?><a href="$BAD_COMMENT_URL$"><i class="fa fa-thumbs-down" aria-hidden="true"></i></a><?endif?>  
<?if($COMMENT_RATING$<0)?><b style="color:#FF2828;">$COMMENT_RATING$ <i class="fa fa-star" aria-hidden="true"></i></b><?else?>  
<?if($COMMENT_RATING$=0)?><b class="c_ziro">0</b><?else?><b class="c_plus">$COMMENT_RATING$ <i class="fa fa-star" aria-hidden="true"></i></b><?endif?><?endif?>  
<?if($GOOD_COMMENT_URL$)?><a href="$GOOD_COMMENT_URL$"><i class="fa fa-thumbs-up" aria-hidden="true"></i></a><?endif?>  
  </span>  
  <div id="clr"></div>  
  </div>  
  <div class="wid-comm-soc"></div>  
   
  </div>  
</div>  

<?else?>  

<div class="wid-comm-bc">  
  <div class="wid-comm-ava"><a href="$PROFILE_URL$"><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$"><?else?><img src="http://zornet.ru/Ajaxoskrip/Forma_skriptov/zZdU4oy.jpg"><?endif?></a></div>  
  <div class="wid-comm-inf">  
  <div class="wid-comm-us"><a href="$PROFILE_URL$"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> $USERNAME$ </a><span style="<?if($COMMENT_RATING$<0)?>color:#FF2828;<?endif?>">$COMMENT_RATING$ <i class="fa fa-star" aria-hidden="true"></i></span><?if($MODER_PANEL$)?>$MODER_PANEL$<?endif?></div>  
  <div class="wid-comm-text">  
  $MESSAGE$
  </div>  
  <div class="wid-comm-fot">  
  <ul>  
  <li><i class="fa fa-calendar" aria-hidden="true"></i> <font style="font-size:12px;">$DATE$</font></li>  
  <li><a href="javascript://" onclick="$('.wid-comm-soc$NUMBER$').slideToggle('slow');"> <i class="fa fa-random" aria-hidden="true"></i> Поделится</a> </li>  
  <?if($IS_OWN$)?><?else?><li> <a href="$ANSWER_URL$"><i class="fa fa-comments" aria-hidden="true"></i> Комментировать</a></li><?endif?>  
  </ul>  
  <span>  
<?if($BAD_COMMENT_URL$)?><a href="$BAD_COMMENT_URL$"><font style="font-size:17px;"><font color="red"><i class="fa fa-thumbs-down" aria-hidden="true"></i></font></font></a><?endif?>
   
<?if($GOOD_COMMENT_URL$)?><a href="$GOOD_COMMENT_URL$"><font style="font-size:17px;"><font color="#18741a"><i class="fa fa-thumbs-up" aria-hidden="true"></i></font></font></a><?endif?>
  </span>  
  <div id="clr"></div>  
  </div>  
  <div class="wid-comm-soc wid-comm-soc$NUMBER$">  
  <!-- uSocial --><br><script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
<script src="//yastatic.net/share2/share.js"></script>
<div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,twitter,lj" data-size="s"></div><!-- /uSocial -->  
  </div>  
  </div>  
</div>  
<?endif?>  
</div>


CSS:

Код
#clr {clear: both;}  
.wid-comm-bc {  
  background: #FFFFFF;  
  border-top: 1px solid #D8D8D8;  
  padding: 15px;  
  overflow: hidden;  
  position: relative;  
  margin-top: 0px;  
}  

.wid-comm-ava {  
  width: 60px;  
  height: 60px;  
  float: left;  
  overflow: hidden;  
  background: #FFF;  
}  
.wid-comm-ava img {  
  width: 50px;  
  height: 50px;  
  object-fit: cover;  
  border-radius: 50px;
  border: 3px solid #CACACA;
}  

.wid-comm-inf {  
  margin-left: 70px;  
}  

.wid-comm-us a {  
  font-size: 15px;  
  color: #6A6D72;  
  font-weight: 700;  
}  

.wid-comm-us span {  
  float: right;  
  color: #50B780;  
  font-size: 18px;  
}  

.wid-comm-text {  
  color: #6A6D72;  
  font-size: 12px;  
  line-height: 22px;  
  font-weight: 100;  
}  

.wid-comm-fot {  
  padding: 0px 0;  
}  
.wid-comm-fot ul {  
  list-style: none;  
  padding: 0px;  
}  
.wid-comm-fot ul li {  
  float: left;  
}  

.wid-comm-fot ul li a {  
  padding: 7px 10px;  
  font-size: 12px;  
  color: #626669;  
}  
.wid-comm-fot ul li a:hover {  
  color: #85A5B2;  
}  

.wid-comm-fot span {  
  float: right;  
  color: #878787!important;  
}  
.wid-comm-fot span i {margin: 0px 10px;}  

.otvet-com {  
  border-top: 1px solid #D7D7D7;  
  margin-top: 0px;  
  margin-left: 50px;  
}  

.wid-comm-soc {  
  display: none;  
}

На счет социальных закладок, то в коде находим uSocial - здесь скрипт закладок /uSocial и можете поставить свои, если вам нужен такой дизайн, который стоит сейчас, то идем на Яндекс поделиться и сами выставляем кнопки, которые вам нужны и потом заменяем.

Источник: Talantlev.ru
17.03.2017 Просмотров: 785 Комментарий: (8)

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

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

Комментарий: 8
Scheme
Scheme 17.03.2017 01:481
+1
Так же вижу в первые, дизайн не чем сейчас не отличается от других. а вот ответ на комментарий, здесь по другому, видать waak под свой сайт делал и получилось отлично.
waak
waak 17.03.2017 13:474
0
нет данный вид как и многие другие скрипты на моём сайте написаны по просьбе пользователей просьбу можно оставить в мастерской или на форуме на моём сайте
Kosten
Kosten 17.03.2017 14:235
0
waak, но многие в курсе, что у тебя уникальный материал, ты лучше скажи, как дизайн, немного изменен.
waak
waak 17.03.2017 14:336
0
Так как это не конкретный вопрос вот тебе не конкретный ответ
если нужно что то добавить или убрать то редактируй html если сменить цвет шрифт высоту ширину и т.д. то редактируй css код маленький и не сложный всё идёт по порядку первый код вид ответа второй вид простого комментария
Kosten
Kosten 17.03.2017 14:478
0
Это так то не вопрос, а как данность, а что оценить, это как просьба.
Scheme
Scheme 17.03.2017 14:437
0
Это хорошо, когда есть взаимодействие с пользователем.
tsakonter
tsakonter 17.03.2017 01:552
0
Социальные кнопки от Яндекс. считаю самыми стабильными. вот больше года поставил и не разу не замечал. чтоб сайт зависал из за них. Теперь на шрифтовых иконках можно красивый дизайн делать, смотрел на первоисточнике, и согласен, сильно этот изменен, и доработан. Не каждый день можно увидеть, чтоб в комментариях оператор MESSAGE стоял в коде дважды. Один идет на основной комментарий, второй на ответ, и там дизайн немного изменен и по тому же рейтинг, во общем понравился такой стиль.
Kosten
Kosten 17.03.2017 02:143
0
В комментариях отпишу, что этот вид материала адаптирован под мобильные устройства, проверял по этому методу, что видите на изображение.

avatar