» »

Форма добавления комментарий без BB-кодов


Форма добавления комментарий без BB-кодов

На сайте системы uCoz идет по умолчанию форма добавление и ее можно сменить на визуальную, здесь же можно поставить без BB-кодов. Которая только будет служить для добавление постов под материал. Будет иметь avatar пользователя, который будет находится в низу под самой формой с левой стороны, а напротив ее с правой сама кнопка для отправление.

Смотрится такой вид безусловно оригинально, также в нем буде написано "Добавить запись" где вы начнете писать, и она сразу исчезнет. По началу она шла простой без функций, что пришлось добавить от стандартного, что при наведение появится темно прозрачное окно, где вы можете зайти с него в персональную страницу. Также если пользователь зашел по быстрой регистраций, то основном изображение не идет, то будет в таком случай показывать no ava.

А так все как обычно работать будет, если у вас на интернет ресурсе много комментируют, то не думаю что нужны там BB коды, а можно поставить эту форму.



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

В саму форму в админ панели меняем код.

Код
<div id="forma_com_block">  
  <div id="pole_komm">  
  <textarea name="message" id="message" placeholder="Добавить запись">$MESSAGE$</textarea>
  <div class="uComForm-inner"><span class="ucf-avatar uf-with-tooltip">
<?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$" alt="avatar" /><?else?><img src="http://zornet.ru/SKRIPT/Kransel/noavatar.png" alt="avatar" /><?endif?>
  <span class="uf-tooltip"><?if($PROFILE_URL$)?><a class="uf-tt-item" href="$PROFILE_URL$" target="_blank">Профиль</a><?else?><a class="uf-tt-item" href="#" target="_blank">Профиль</a><?endif?>
  <span class="uf-tt-hr"></span>
  </span>  
  </div>  
  <div id="">  
  <div id="com_mini_prof">  
  <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:

Код
#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: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 3px;
  border: 2px solid #B9B9B9;
}  
#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;  
}


PS - материал был взят на сайте talantlev.ru и немного доработан, также кто хочет может вывести смайлы, чтоб была одна надпись и по клику появлялось окно. Здесь сделано так, чтоб только одна рабочая функция была, а точнее прямая по своей работе, это добавить комментарий на сайте.
05.01.2017 Просмотров: 397 Комментарий: (5)

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

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

Комментарий: 5
Webmaster32
Webmaster32 05.01.2017 23:441
0
Чем то напоминает вид комментариев на DLE только без авы, только там в настройках можно установить.

Brung
Brung 05.01.2017 23:562
0
Но здесь видимо тоже аву можно убрать.
Webmaster32
Webmaster32 05.01.2017 23:593
0
По идее можно, только потом она совсем пустая будет
Kosten
Kosten 06.01.2017 00:084
0
Там вообще просто ава стояла, хотел убрать и оставить без нее. Но потом взял от стандартной, что идет системой и поставил, только выход сайта убрал и оставил профиль пользователя.

Больше подойдет под социальные проекты.
Kosten
Kosten 06.01.2017 22:105
0
Но можно убрать аву, просто не думаю что на блоге с avarat нужно делать, кто то и на сайте убирает, но кому нужно убрать и не знает, пишите, что нужно убрать, снесем так и быть.)
avatar