Красивая форма добавления комментария


Красивая форма добавления комментария

4383
8.6 из 10
Проголосовало: 6





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

Установка

HTML
Вставляем данный html код в форму добавления комментариев

Code
<!-- Начало тегов форма комментарий -->  
  <div id="forma_comment">  

  <?if($BBCODES$)?>  
  <div id="comment_panel">  

  <div class="menu_n">  
  <a href="#" ><img alt="" src="http://webo4ka.ru/Ucoz6/smailFormaDobavleniiKomment.gif"></a>  
  <div class="dd_menu">  
  <span class="dd_ugol1"></span>  
  <script type="text/javascript" src="http://webo4ka.ru/Ucoz6/smileFormaDobavleniiKomment.js"></script>  
  </div>  
  </div>  

  <div id="panel_bb">  
  <a href="javascript://" onclick="simpletag('b')" title="Жирный">B</a>  
  <a href="javascript://" onclick="simpletag('i')" title="Курсив" class="panel_i" >i</a>  
  <a href="javascript://" onclick="tag_url('message','')" title="Добавить ссылку">http:</a>  
  <a href="javascript://" onclick="tag_image()" title="Добавить Картинку">img</a>  
  <a href="javascript://" onclick="simpletag('quote')" title="Цитата">Цитата</a>  
  <a href="javascript://" onclick="simpletag('code')" title="Вставить html-css код" class="panel_code" >Сode</a>  
  <a href="javascript://" class="panel_close" onclick="closeall('message','');" title="Закрыть все BB-коды">Close-BB</a>  
  <a href="javascript://" onclick="window.open('/index/17','bbcodes','scrollbars=1,width=550,height=450,left=0,top=0');" class="panel_info" >Справка</a>  
  $BBCODES$  
  </div>  

  </div>  
  <?endif?>  

  <textarea style="height:80px;" rows="8" name="message" id="message" cols="50">$MESSAGE$</textarea>  

  <?if(!$USER_LOGGED_IN$)?>  
  <input class="comm_input left" type="text" name="name" value="Имя" onclick="if (this.value=='Имя'){this.value='';}" size="30" maxlength="60">  
  <input class="comm_input right" type="text" name="email" value="E-mail" onclick="if (this.value=='E-mail'){this.value='';}" size="30" maxlength="60">  
  <?endif?>  
  <?if($ERROR$)?><div id="panel_error">$ERROR$</div><?endif?>  
  <div id="panel_bottom">  
  $SECURITY_CODE$  
  <input type="submit" class="kn_dobavit" name="submit" value="Добавить комментарий">  
  </div>  
  </div>  
  <!-- /Конец тегов форма комментарий -->


CSS

А это вставляем в файл стилей вашего сайта

Code
/* Форма комментарий  
  ------------------------------------------*/  
  #forma_comment {  
  float:left;  
  width:540px;  
  background:#fff;  
  padding: 15px 30px 15px 30px;  
  }  

  .comm_input {  
  color:#999;  
  padding:5px;  
  width:245px;  
  background: #f9f9f9;  
  border: 1px solid #E0E0E0;  
  margin: 10px 0px 10px 0px;  
  }  

  .comm_input:focus,  
  #forma_comment textarea:focus {  
  box-shadow:inset 0px 1px 3px #c3c3c3!important;  
  -webkit-box-shadow:inset 0px 1px 3px #c3c3c3!important;  
  -moz-box-shadow:inset 0px 1px 3px #c3c3c3!important;  
  }  

  #forma_comment textarea {  
  margin:0;  
  float:left;  
  color:#555;  
  padding:10px;  
  background:#f9f9f9;  
  width:518px!important;  
  border:1px solid #E0E0E0;  
  border-top:none;  
  }  

  #panel_error {  
  float:left;  
  width:100%;  
  text-align:center;  
  margin: 5px 0px 10px 0px;  
  font: 12px Verdana,Arial,Helvetica, sans-serif; color:#c71a1a;  
  }  

  #panel_bottom {  
  float:left;  
  width:100%;  
  }  

  #ckcomm_dobavit {  
  float:right;  
  background:#dfdfdf;  
  padding:4px;  
  }  

  .left {float:left;}  
  .right {float:right;}  

  /* Вид Панели BB-кодов  
  ------------------------------------------*/  
  #comment_panel {  
  float:left;  
  width:530px;  
  padding: 5px 5px 5px 5px;  
  background:#E0E0E0;  
  }  

  #comment_panel .codeButtons{  
  display:none;  
  }  

  #panel_bb {  
  float:left;  
  width:500px;  
  }  

  #panel_bb a:link,  
  #panel_bb a:visited {  
  float:left;  
  padding: 3px 10px 4px 10px;  
  margin: 0px 5px 0px 0px;  
  background:#F6F6F6;  
  cursor:pointer;  
  border:1px solid #B2B2B2;  
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
  font: 10px Verdana,Arial,Helvetica, sans-serif; color:#555; text-shadow: 1px 1px 1px #fff;  
  }  

  #panel_bb a:hover {background:#fff;}  

  .panel_i {font-style:italic!important; }  
  .panel_u {text-decoration: underline!important; }  
  .panel_info {float:right!important; margin: 0px!important;}  

  .menu_n {  
  float:left;  
  display:block;  
  position:relative;  
  margin: 2px 5px 0px 0px;  
  }  

  .dd_ugol1,  
  .dd_menu {width:240px;}  

  .dd_menu {  
  float:left;  
  padding:5px;  
  left:-999em;  
  z-index:998;  
  background:#fff;  
  position:absolute;  
  border:1px solid #999;  
  margin: 0px 0px 0px -5px;  
  -moz-border-radius:5px 5px 5px 5px;  
  -webkit-border-radius:5px 5px 5px 5px;  
  border-radius:5px 5px 5px 5px;  
  box-shadow: 0px 0px 5px #999;  
  }  

  .menu_n:hover .dd_menu{  
  right:auto;  
  left:0px;  
  top:30px;  
  }  

  .dd_ugol1 {  
  float:left;  
  height:25px;  
  top:-25px;  
  left:4px;  
  position:absolute;  
  background:url(http://webo4ka.ru/Ucoz6/387435688FormaDobavleniiKomment.png) no-repeat left bottom;  
  }  

  /* Разбор палётов (КАПЧА)  
  ------------------------------------------*/  
  #panel_bottom img {  
  display:none;  
  }  

  #secuImgC {  
  margin:0!important;  
  float:left!important;  
  display:inline!important;  
  border: 1px solid #E0E0E0!important;  
  }  

  .securityCode {  
  color:#777!important;  
  margin:0!important;  
  float:left!important;  
  height:25px!important;  
  padding: 5px 5px 5px 5px!important;  
  background:#f9f9f9!important;  
  border: 1px solid #E0E0E0!important;  
  border-right:none!important;  
  }  

  /* - добавляем внутреннюю тень поля */  
  .securityCode:focus {  
  box-shadow:inset 0px 1px 3px #c3c3c3!important;  
  -webkit-box-shadow:inset 0px 1px 3px #c3c3c3!important;  
  -moz-box-shadow:inset 0px 1px 3px #c3c3c3!important;  
  }  

  /* - кнопка добавить комментарий */  
  .kn_dobavit {  
  font:11px Verdana,Arial,Helvetica, sans-serif;  
  text-shadow: 1px 1px 1px #333;  
  float:right!important;  
  color:#fff!important;  
  margin:0!important;  
  height:37px!important;  
  cursor:pointer;  
  padding: 0px 10px 0px 10px!important;  
  background:#535B64!important;  
  border: 4px solid #DFDFDF!important;  
  }  

  .kn_dobavit:hover {  
  background:#3E444B!important;  
  }  

  #forma_comment a:hover img {filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; filter: alpha(opacity=50);}
Автор публикации: Загрузка
Загрузка
Ferest, это его n материал
Источник: http://center-dm.ru
  • Всего комментариев: 7

Vladislav
0
Vladislav написал: Написано 19 Января 2013 в 01:31
Комментарий №6
вот что-то не то с ним. Не заполнено поле "Комментарий" появляется каждый раз и только после 2 нажатия добавить сообщение, оно публикуется. кто-то знает как выйти из ситуации?

Ferest
0
Ferest написал: Написано 16 Апреля 2013 в 23:55
Комментарий №7
У меня всё нормально, тестил на трех сайта dry dry

SKILL_-1
0
SKILL_-1 написал: Написано 01 Октября 2012 в 17:57
Комментарий №4
Спасибо!

Handyman
0
Handyman написал: Написано 01 Октября 2012 в 16:59
Комментарий №2
Мало смайлов(

Вовчик
0
Вовчик написал: Написано 01 Октября 2012 в 17:01
Комментарий №3
а разве запрещено добавлять самому смайлы?

alpengolt
0
alpengolt написал: Написано 01 Октября 2012 в 22:15
Комментарий №5
источник исправь на [удалено]

SKILL_-1
+1
SKILL_-1 написал: Написано 30 Сентября 2012 в 22:09
Комментарий №1
А Есть Отдельно Такой вывод смайлов Как На скрине?

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