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

Светлый вид комментариев для uCoz от Boba

Светлый вид комментариев для uCoz от Boba
Всегда на сайте большое внимание уделяли вил комментариев, и здесь вам хочется предложить один из них, который вы можете поменять и убрать стандартный. Красиво сделан вид комментариев для uCoz под светлый дизайн сайта. Выводит Avarat пользователя, также отлично работает ответ на комментарий и показывает время. Как видим что у него ava находиться в закругленной форме, что подойдет как угловому ресурсу иди где они закругленны. Сделано так, что сам обвод просматривается хороши, где вы пишите. Также идет с ним форма добавление, которую раньше была размещена.
Материал полностью проверен и протестирован и ошибок в нем не находиться. По умолчанию есть точно такой корд от автора, но там когда отвечаешь на комментарий другого, то просто появляется пост, без изображение, в нашем случай он доработан и теперь все как нужно сделано.

Установка:

Но это админ панель и там комментарий ищем и открываем и меняем полностью код.

Код
<div id="vid_com_block">  
  <div id="ava_com_block">  
  <div id="ava_com_img"><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$"><?else?><img src="http://zornet.ru/Ajaxoskrip/Forma_skriptov/zZdU4oy.jpg"><?endif?></div>  
  <div id="username_com"><a href="$PROFILE_URL$">$USERNAME$</a></div>  
  </div>  
  <div id="text_com_block">  
  <div id="ygolok"></div>  
  <div id="message_com"> $MESSAGE$</div>  
  <div id="inf_com_block">  
  <ul>  
  <li>$DATE$ в $TIME$</li>  
  <?if($ANSWER_URL$)?><li class="ss_otvet_com"><a href="$ANSWER_URL$">Ответить</a></li><?endif?>  
  </ul>  
  <div class="clr"></div>  
  </div>  
  </div>  
  <div class="clr"></div>  

  </div>


Теперь идем в CSS чтоб поставить стили, здесь хочу отметить, там же стили и на форму добавление, что указал с статье.

Код
#vid_com_block {  
  margin: 15px 0;  
  }  
  #ava_com_block {  
  width: 90px;  
  float: left;  
  overflow: hidden;  
  }  
  #ava_com_img {  
  margin: 0 auto;  
  width: 50px;  
  height: 50px;  
  overflow: hidden;  
  border-radius: 50%;  
  -webkit-border-radius: 50%;  
  -moz-border-radius: 50%;  
  -o-border-radius: 50%;  
  background: #E6E9E8;  
  }  
  #ava_com_img img {  
  width: 50px;  
  height: 50px;  
  object-fit: cover;  
  }  
  #username_com {  

  }  
  #username_com a {  
  display: block;  
  font:12px Arial, Tahoma, sans-serif;  
  color: #004A78;  
  padding: 5px 0px;  
  text-align: center;  
  text-decoration: none;  
  }  
  #text_com_block {  
  margin-left: 90px;  
  border: 3px solid #eeeeee;  
  border-radius: 5px;  
  -webkit-border-radius: 5px;  
  -moz-border-radius: 5px;  
  -o-border-radius: 5px;  
  padding: 15px;  
  }  

  #ygolok {  
  position: absolute;  
  margin-left: -35px;  
  background: #FFF url("http://zornet.ru/SKRIPT/Grazyga/ygolok.png") no-repeat center center;  
  width: 20px;  
  height: 20px;  
  }  

  #message_com {  
  font:13px Arial, Tahoma, sans-serif;  
  color: #333;  
  }  

  #inf_com_block {  

  }  
  #inf_com_block ul {  
  list-style: none;  
  margin: 0;  
  padding: 0;  
  }  
  #inf_com_block ul li {  
  float: left;  
  color: #999999;  
  font:12px Arial, Tahoma, sans-serif;  
  padding: 10px 0px 0px;  
  }  
  #inf_com_block ul li a {  
  text-decoration: none;  
  display: block;  
  color: #999999;  
  font:12px Arial, Tahoma, sans-serif;  

  }  
  #inf_com_block ul li a:hover {  
  color: #C61E1E;  
  }  
  #inf_com_block ul li.ss_otvet_com {  
  float: right;  
  }  

  #vid_com_block_dop {  
  margin: 10px 0;  
  margin-left: 70px;  
  }  

  #text_com_block_dop {  
  position: relative;  
  border: 3px solid #eeeeee;  
  border-radius: 5px;  
  -webkit-border-radius: 5px;  
  -moz-border-radius: 5px;  
  -o-border-radius: 5px;  
  padding: 15px;  
  }  
  #ygolok2 {  
  position: absolute;  
  margin-top: 15px;  
  background: #FFF url("http://zornet.ru/SKRIPT/Grazyga/ygolok2.png") no-repeat center center;  
  width: 20px;  
  height: 20px;  
  right:10px;  
  }  

  #inf_com_block_dop {  
  padding-top: 10px;  
  margin: 0px 0 20px;  
  }  
  #inf_com_block_dop ul {  
  list-style: none;  
  margin: 0;  
  padding: 0;  
  }  
  #inf_com_block_dop ul li {  
  float: left;  
  color: #999999;  
  font:12px Arial, Tahoma, sans-serif;  
  padding: 10px 0px 0px;  
  }  
  #inf_com_block_dop ul li a {  
  text-decoration: none;  
  display: block;  
  color: #999999;  
  font:12px Arial, Tahoma, sans-serif;  

  }  
  #inf_com_block_dop ul li a:hover {  
  color: #C61E1E;  
  }  
  #inf_com_block_dop ul li.ss_otvet_com {  
  float: right;  
  }  

  #forma_com_block {  
  margin: 10px;  
  background: #F5F5F5;  
  padding: 20px;  
  }  

  #pole_komm textarea {  
  width: 100%;  
  height: 80px;  
  border: 1px solid #CDCDCD;  
  padding: 10px;  
  resize: vertical;  
  }  

  #com_mini_prof {  
  float: left;  
  width: 200px;  
  padding: 5px;  
  }  
  #ava_com {  
  width: 50px;  
  height: 50px;  
  float: left;  
  overflow: hidden;  
  }  
  #ava_com img {  
  width: 50px;  
  height: 50px;  
  object-fit: cover;  
  }  
  #inf_user_com {  
  margin-left: 70px;  
  background: #FFF;  
  height: 30px;  
  padding: 10px;  
  }  
  #inf_user_com a {  
  color: #094F73;  
  display: block;  
  font:14px Arial, Tahoma, sans-serif;  
  text-decoration: none;  
  }  
  #inf_user_com b {  
  color: #999999;  
  display: block;  
  font:12px normal Arial, Tahoma, sans-serif;  
  }  
  #c_komm {  
  float: right;  
  padding: 5px 0;  
  }  

  .c_komm {  
  background: #6EBE34;  
  border: none;  
  color: #FFF;  
  cursor: pointer;  
  line-height: 50px;  
  padding: 0 20px;  
  }  

  .com-order-block {  
  display: none;  
  }  

  .clr {  
  clear: both;  
  }


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

Источник: boba.ucoz.com
18 Марта 2016 Просмотров: 1729 Комментариев: (14)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

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

Комментарии: 11
waak
waak 18 Марта 2016 20:351
+4
Зачем вы сделали это? Вы понимаете что вы сейчас просто много лишнего кода предлагаете пользователям и при этом говорите что вы до работали данный вид
Чтобы получить такой вид комментариев достаточно вот этого кода
Код
<div id="vid_com_block">  
  <div id="ava_com_block">  
  <div id="ava_com_img"><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$"><?else?><img src="http://zornet.ru/Ajaxoskrip/Forma_skriptov/zZdU4oy.jpg"><?endif?></div>  
  <div id="username_com"><a href="$PROFILE_URL$">$USERNAME$</a></div>  
  </div>  
  <div id="text_com_block">  
  <div id="ygolok"></div>  
  <div id="message_com"> $MESSAGE$</div>  
  <div id="inf_com_block">  
  <ul>  
  <li>$DATE$ в $TIME$</li>  
  <?if($ANSWER_URL$)?><li class="ss_otvet_com"><a href="$ANSWER_URL$">Ответить</a></li><?endif?>  
  </ul>  
  <div class="clr"></div>  
  </div>  
  </div>  
  <div class="clr"></div>  
  </div>  


И код который ставиться в таблицу стилей
Kosten
Kosten 18 Марта 2016 20:392
0
waak, извини, просил тебя, как автор доработай, не знаю, ты наотрез отказался, не понимаю почему до сих пор, теперь взял и довел, не думаю что ты что то хотел с этого поиметь, так как сейчас прописал, можно было сразу подсказать.
Kosten
Kosten 18 Марта 2016 20:413
0
Код проверил, что предоставил waak, все отлично работает.

Kosten
Kosten 18 Марта 2016 20:494
0
Код полностью изменил и поставил от автора.

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

Код
<?if($LEVEL$>=1)?>  
  <div id="vid_com_block">  
  <div id="ava_com_block">  
  <div id="ava_com_img"><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$"><?else?><img src="http://zornet.ru/Ajaxoskrip/Forma_skriptov/zZdU4oy.jpg"><?endif?></div>  
  <div id="username_com"><a href="$PROFILE_URL$">$USERNAME$</a></div>  
  </div>  
  <div id="text_com_block">  
  <div id="ygolok"></div>  
  <div id="message_com"> $MESSAGE$</div>  
  <div id="inf_com_block">  
  <ul>  
  <li>$DATE$ в $TIME$</li>  
  <?if($ANSWER_URL$)?><li class="ss_otvet_com"><a href="$ANSWER_URL$">Ответить</a></li><?endif?>  
  </ul>  
  <div class="clr"></div>  
  </div>  
  </div>  
  <div class="clr"></div>  
  </div>  
  <?else?>  
  <div id="vid_com_block">  
  <div id="ava_com_block">  
  <div id="ava_com_img"><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$"><?else?><img src="Ссылка на картинку нет аватара"><?endif?></div>  
  <div id="username_com"><a href="$PROFILE_URL$">$USERNAME$</a></div>  
  </div>  
  <div id="text_com_block">  
  <div id="ygolok"></div>  
  <div id="message_com"> $MESSAGE$</div>  
  <div id="inf_com_block">  
  <ul>  
  <li>$DATE$ в $TIME$</li>  
  <?if($ANSWER_URL$)?><li class="ss_otvet_com"><a href="$ANSWER_URL$">Ответить</a></li><?endif?>  
  </ul>  
  <div class="clr"></div>  
  </div>  
  </div>  
  <div class="clr"></div>  
  </div>  

  <?endif?>
Сафрон
Сафрон 18 Марта 2016 20:575
0
Хотел по темнее сделать, чтоб ярче видно было, но там ссылка, костен ты фотошоп что то понимаешь, сне надо темнее сделать, так красиво смотрится, и форму добавление поменяю, автору респект.
Kosten
Kosten 18 Марта 2016 21:188
0
Сафрон, нормально все смотрится, но зачем делать то, что уже сделано. Постараюсь что то сделать на фотошоп, но не гарантирую что получиться, так как потом нужно обвод подводить под то что нарисовано.
Scheme
Scheme 18 Марта 2016 21:016
0
Комментарий нормально, не думаю нужно что то добавлять как тени, а вот форме добавление, можно ссылку на изображение добавить, но кому как.
Kosten
Kosten 18 Марта 2016 21:199
0
Но где то есть на сайте форма добавление, там и под ссылки и под изображение, найдите его и вытащите код который отвечает за это.
Kosten
Kosten 18 Марта 2016 21:167
0
Но друг друга не правильно поняли, как говориться, лучше позже чем не когда, большое спасибо.
Сафрон
Сафрон 18 Марта 2016 21:2810
0
Все не нужно, делал по другому, клевый вид, и для меня понятный.
1 2 »
Войдите:
avatar