Вид комментариев и формы добавления для uCoz


Вид комментариев и формы добавления для uCoz

520
9.6 из 10
Проголосовало: 5






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

Данный вид состоит из красивой закруглённой аватарки и отходящего от авы в право блок со стрелочкой. А при ответе на комментарий аватарка уже выводится не будет, а будет выведен логин пользователя давший ответ уже с правой стороны ниже блока с комментарием от которого также будет отходить стрелочка.

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

Установка очень проста и не займёт много времени.

Установка

Заходим Управление дизайном » Редактирование шаблонов » Вид комментариев из заменяем весь код на этот:

Код

<?if($LEVEL$>=1)?>  
  <div id="vid_com_block_dop">  
  <div id="text_com_block_dop">  
  <div id="message_com">$MESSAGE$ </div>  
  <div id="ygolok2"></div>  
  </div>  
  <div id="inf_com_block_dop">  
  <ul>  
  <?if($ANSWER_URL$)?><li><a href="$ANSWER_URL$">Ответить</a></li><?endif?>  
  <li class="ss_otvet_com"><a href="$PROFILE_URL$">$DATE$ в $TIME$ $USERNAME$</a></li>  
  </ul>  
  <div class="clr"></div>  
  </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?>


Данный код ставим Управление дизайном » Редактирование шаблонов » Форма добавления комментариев вместо того что там есть:

Код

<div id="forma_com_block">  
  <div id="pole_komm">  
  <textarea name="message" id="message" placeholder="Добавить запись">$MESSAGE$</textarea>  
  </div>  
  <div id="">  
  <div id="com_mini_prof">  
  <div id="ava_com"><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$"><?else?><img src="Ссылка на картинку нет аватара"><?endif?></div>  
  <div id="inf_user_com">  
  <b>Ещё инфа о нём</b>  
  </div>  
  <div class="clr"></div>  
  </div>  
  <div id="c_komm"><input class="c_komm" id="addcBut" type="submit" name="submit" value="Добавить" /></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("../img/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("../img/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;  
  }


Внимание
Не забудьте сменить в первом и втором коде строчку "Ссылка на картинку нет аватара"

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

Теперь скачаем архив и загрузим пару картинок в папку img
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://boba.ucoz.com/
  • Всего комментариев: 2

Вовчик
0
Вовчик написал: Написано 19 Марта 2016 в 09:29
Комментарий №2
это точно happy

Вовчик
0
Вовчик написал: Написано 19 Марта 2016 в 09:28
Комментарий №1
да

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 8
    Гостей: 8
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: