вРазные полезности

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

 
По дизайну проста и красива форма добавление комментариев. Просто решил поменять на своем сайте этот скрипт и начал искать в интернете. На мое удивление не одного полноценного скрипта не нашел. Что оставалось делать, взял 2 одинаковых и отредактировал один полностью рабочий код. Что удобно в этом добавлений? Это его CSS, так что можно подогнать под размеры сайта и по дизайну. Вот хочу представить который сейчас стоит на сайте. По длине и ширине сделал как считал нужным. Но блеск красок не добавлял. Хотя как писал это можно сделать в стилях.
Установка:

Код
Думаю надо с начало поменять сам код в комментариях. Идем в админ панель в форму добавления комментариев. Все убираем от туда и вставляем этот код.
<div id=»forma_comment_vnu»>  
  <?if(!$USER_LOGGED_IN$)?>  
  <div class=»pola_comment» id=»mar_l»><div>Имя <span>*</span>:</div><input class=»comm_p» type=»text» name=»name» value=»$NAME$» size=»30″ maxlength=»60″></div>  
  <div class=»pola_comment»><div>Email <span>*</span>:</div><input class=»comm_p» type=»text» name=»email» value=»$EMAIL$» size=»30″ maxlength=»60″></div>  
  <?endif?>  
  <div id=»forma_comment_panel»>  
  <?if($BBCODES$)?>  
  <div id=»panel_bb»>  
  <a class=»panel_b» onclick=»simpletag(‘b’)» title=»Жирный»></a>  
  <a class=»panel_i» onclick=»simpletag(‘i’)» title=»Курсив»></a>  
  <a class=»panel_u» onclick=»simpletag(‘u’)» title=»Подчеркнутый»></a>  
  <a class=»panel_url» onclick=»tag_url(‘message’,»)» title=»Добавить ссылку»></a>  
  <a class=»panel_email» onclick=»tag_email(‘message’,»)» title=»Добавить E-mail «></a>  
  <a class=»panel_image» onclick=»tag_image()» title=»Добавить Картинку»></a>  
  <a class=»panel_citata» onclick=»simpletag(‘quote’)» title=»Цитата»></a>  
  <a class=»panel_code» onclick=»simpletag(‘code’)» title=»Вставить html-css код»></a>  
  <a class=»panel_hide» onclick=»simpletag(‘b’)» title=»Спрятать под hide»></a>  
  <a class=»panel_list» onclick=»tag_list()» title=»Вставить Список»></a>  
  <a class=»panel_l» onclick=»simpletag(‘l’)» title=»По левому краю»></a>  
  <a class=»panel_c» onclick=»simpletag(‘c’)» title=»По центру»></a>  
  <a class=»panel_r» onclick=»simpletag(‘r’)» title=»По правому краю»></a>  
  <a class=»panel_hr» onclick=»add_code(‘[hr]’,’message’)» title=»[hr] — Линия»></a>  
  <a class=»panel_close» onclick=»closeall(‘message’,»);» title=»Закрыть все BB-коды»></a>  
  <a class=»panel_info» onclick=»window.open(‘/index/17′,’bbcodes’,’scrollbars=1,width=550,height=450,left=0,top=0’);» title=»Справка по BB-кодам»></a>  
  $BBCODES$  
  </div>  
  <?else?>  
  <div id=»panel_bbt»></div>  
  <?endif?>  
  <div id=»panel_smail»>  
  <div class=»left transparency_i»>  
  <script type=»text/javascript»>function emoticon(code,nm)if (code != «»)var txtarea=document.getElementById(nm);code = ‘ ‘ + code + ‘ ‘;if (document.selection) txtarea.focus();var txtContent = txtarea.value;var str = document.selection.createRange();if (str.text == «»)str.text = code; else if (txtContent.indexOf(str.text) != -1)str.text = code + str.text; else txtarea.value = txtContent + code;}elsetxtarea.value = txtarea.value + code;}}</script>  
  <a href=»javascript://» rel=»nofollow» onclick=»emoticon(‘:laugh:’,’message’);return false;»><img alt=»» style=»margin:0;padding:0;border:0;» src=»http://s37.ucoz.net/sm/1/laugh.gif» title=»wacko» /></a>  
  <a href=»javascript://» rel=»nofollow» onclick=»emoticon(‘:v: ‘,’message’);return false;»><img alt=»» style=»margin:0;padding:0;border:0;» src=»http://s37.ucoz.net/sm/1/v.gif» title=»wacko» /></a>  
  <a href=»javascript://» rel=»nofollow» onclick=»emoticon(‘^_^’,’message’);return false;»><img alt=»» style=»margin:0;padding:0;border:0;» src=»http://s37.ucoz.net/sm/1/happy.gif» title=»wacko» /></a>  
  <a href=»javascript://» rel=»nofollow» onclick=»emoticon(‘:yes:’,’message’);return false;»><img alt=»» style=»margin:0;padding:0;border:0;» src=»http://s37.ucoz.net/sm/1/yes.gif» title=»wacko» /></a>  
  <a href=»javascript://» rel=»nofollow» onclick=»emoticon(»,’message’);return false;»><img alt=»» style=»margin:0;padding:0;border:0;» src=»http://s37.ucoz.net/sm/1/wacko.gif» title=»wacko» /></a>  
  <a href=»javascript://» rel=»nofollow» onclick=»emoticon(‘:no:’,’message’);return false;»><img alt=»» style=»margin:0;padding:0;border:0;» src=»http://s37.ucoz.net/sm/1/no.gif» title=»wacko» /></a>  
  <a href=»javascript://» rel=»nofollow» onclick=»emoticon(‘:online2long:’,’message’);return false;»><img alt=»» style=»margin:0;padding:0;border:0;» src=»http://s37.ucoz.net/sm/1/online2long.gif» title=»wacko» /></a>  
  <a href=»javascript://» rel=»nofollow» onclick=»emoticon(‘:fudge:’,’message’);return false;»><img alt=»» style=»margin:0;padding:0;border:0;» src=»http://s37.ucoz.net/sm/1/fudge.gif» title=»wacko» /></a>  
  <a href=»javascript://» rel=»nofollow» onclick=»emoticon(‘:(‘,’message’);return false;»><img alt=»» style=»margin:0;padding:0;border:0;» src=»http://s37.ucoz.net/sm/1/sad.gif» title=»wacko» /></a>  
  <a href=»javascript://» rel=»nofollow» onclick=»emoticon(‘:unsure:’,’message’);return false;»><img alt=»» style=»margin:0;padding:0;border:0;» src=»http://s37.ucoz.net/sm/1/unsure.gif» title=»wacko» /></a>  
  <a href=»javascript://» rel=»nofollow» onclick=»emoticon(‘B) ‘,’message’);return false;»><img alt=»» style=»margin:0;padding:0;border:0;» src=»http://s37.ucoz.net/sm/1/cool.gif» title=»wacko» /></a>  
  <a href=»javascript://» rel=»nofollow» onclick=»emoticon(»,’message’);return false;»><img alt=»» style=»margin:0;padding:0;border:0;» src=»http://s37.ucoz.net/sm/1/dry.gif» title=»wacko» /></a>  
  <a href=»javascript://» rel=»nofollow» onclick=»emoticon(‘:book: ‘,’message’);return false;»><img alt=»» style=»margin:0;padding:0;border:0;» src=»http://s37.ucoz.net/sm/1/book.gif» title=»wacko» /></a>  
  </div>  
  <p><a href=»javascript://» rel=»nofollow» onclick=»new _uWnd(‘Sml’,’ ‘,-250,-350,autosize:0,closeonesc:1,resize:0,url:’/index/35-1-0’);return false;»>Все смайлы</a><?if $USER_LOGGED_IN$?> <?else?> | <a href=»$REGISTER_LINK$»>Регистрация</a><?endif?></p>  
</div>  
  </div>  
  <textarea style=»height:105px;» rows=»8″ name=»message» id=»message» cols=»50″>$MESSAGE$</textarea>  
  <div id=»panel_bottom»>  
  <?if($ERROR$)?><div id=»panel_error»>$ERROR$</div> <?endif?>  
   
  <div class=»right»><input type=»submit» class=»knopka_comment_dm» name=»submit» value=»Добавить»></div>  
  </div>  
  </div>

Ну потом надо прописать стиль в CSS, можно в самом низу.

Код
/* Форма добавления комментарий  
  ——————————————*/  
  #forma_comment_vnu   
  overflow: hidden;  
  float:left;  
  width:587px;  
  background: #F6FBFC;  
  padding: 15px;  
  border: 1px solid #88CDDB;  
    
   
  .pola_comment   
  float:left;  
  overflow:hidden;  
  width:270px;  
  background:#00FF00;  
  margin-bottom: 10px;  
    
   
  .pola_comment div   
  float:left;  
  font:11px Verdana,Arial,sans-serif; font-weight: bold;  
  color:#53a0af; text-shadow: 1px 1px 1px #fff;  
  width:55px;  
  background:#dcedf0;  
  border:1px solid #c0dee7;  
  border-right:none;  
  padding: 5px 0px 5px 5px;  
  margin:0px;  
    
   
  .pola_comment input   
  float:left;  
  font:11px Verdana,Arial,sans-serif;  
  color:#555;  
  width:198px;  
  background: #fff;  
  border:1px solid #c0dee7;  
  border-left:none;  
  padding: 5px 5px;  
  margin:0px;  
    
   
  .pola_comment span   
  color:#c32020;  
    
   
  #mar_l   
  margin: 0px 30px 0px 0px;  
    
   
  #forma_comment_panel   
  float:left;  
  overflow:hidden;  
  width:100%;  
    
   
  #panel_smail   
  float:left;  
  width:575px;  
  background:#dcedf0;  
  padding: 4px 5px 4px 5px;  
  border-right: 1px solid #c0dee7;  
  border-left: 1px solid #c0dee7;  
    
   
  #panel_bottom   
  float:left;  
  width:585px;  
  background:#dcedf0;  
  padding: 1px 0px 1px 0px;  
  border-right: 1px solid #c0dee7;  
  border-left: 1px solid #c0dee7;  
  border-bottom: 1px solid #c0dee7;  
    
   
  #panel_smail p   
  float:right;  
  margin:0px;  
  padding: 7px 0px 0px 0px;  
    
   
  #forma_comment_vnu textarea   
  float:left;  
  font: 115%/1.5 Verdana,Arial,Helvetica, sans-serif; color:#555;  
  width:565px!important;
  height: 80px!important;  
  background: #fff;  
  padding: 5px 10px;  
  border:1px solid #c0dee7;  
  margin:0px;  
    
   
  .pola_comment input:focus,  
  #panel_bottom .securityCode:focus,  
  #forma_comment_vnu textarea:focus   
  box-shadow:inset 0px 1px 3px #bbb;  
  -webkit-box-shadow:inset 0px 1px 3px #bbb;  
  -moz-box-shadow:inset 0px 1px 3px #bbb;  
    
   
  #panel_bottom .securityCode  
  font: 18px Verdana,Arial,Helvetica, sans-serif!important; color:#555;  
  background:#fff;  
  border: 1px solid #c0dee7;  
  border-left: none;  
  padding: 6px 0px 5px 5px!important;  
  margin:0px;  
    
   
  #panel_error   
  float:left;  
  text-align:center;  
  font: 12px Verdana,Arial,Helvetica, sans-serif;  
  text-shadow: 1px 1px 1px #fff;  
  width:570px;  
  margin: 0px 0px 10px 0px;  
    
   
  #panel_bottom .left img  
  margin:0px;  
    
   
  .knopka_comment_dm   
  font: 13px Verdana,Arial,Helvetica, sans-serif!important; font-weight: bold;  
  color:#226891!important; text-shadow:1px 1px 1px #fff!important;  
  background:#afd5eb!important;  
  border:1px solid #84ABC2!important;  
  padding: 7px 8px!important;  
  margin-right: 5px!important;  
    
   
  .knopka_comment_dm:hover   
  background:#c9e6f7!important;  
    
  /* ————————————— */  
   
  /* Вид Панели BB-кодов  
  ——————————————*/  
  #panel_bb   
  float:left;  
  width:100%;  
  height:22px;  
  background:url(http://www.center-dm.ru/ucoz/vid_bb/1/fon_panel_bb.gif);  
    
   
  #panel_bbt   
  float:left;  
  width:100%;  
  border-top: 1px solid #c0dee7;  
    
   
  #panel_bb .codeButtons   
  display:none  
    
   
  #panel_bb a   
  float:left;  
  display:block;  
  width:23px;  
  height:22px;  
  background:url(http://www.center-dm.ru/ucoz/vid_bb/1/knopki_bb.png)no-repeat;  
    
   
  #panel_bb a.panel_b background-position:0px 0px;   
  #panel_bb a:hover.panel_b background-position:0px -22px;  
  #panel_bb a.panel_i background-position:0px -44px;  
  #panel_bb a:hover.panel_i background-position:0px -66px;  
  #panel_bb a.panel_u background-position:0px -88px;  
  #panel_bb a:hover.panel_u background-position:0px -110px;  
  #panel_bb a.panel_url background-position:0px -132px  
  #panel_bb a:hover.panel_url background-position:0px -154px;  
  #panel_bb a.panel_email background-position:0px -176px;  
  #panel_bb a:hover.panel_email background-position:0px -198px;  
  #panel_bb a.panel_image background-position:0px -220px;  
  #panel_bb a:hover.panel_image background-position:0px -242px;  
  #panel_bb a.panel_citata background-position:0px -264px;  
  #panel_bb a:hover.panel_citatabackground-position:0px -286px;  
  #panel_bb a.panel_code background-position:0px -308px;  
  #panel_bb a:hover.panel_code background-position:0px -330px;  
  #panel_bb a.panel_hide background-position:0px -352px;  
  #panel_bb a:hover.panel_hide background-position:0px -374px;  
  #panel_bb a.panel_list background-position:0px -396px;  
  #panel_bb a:hover.panel_list background-position:0px -418px;  
  #panel_bb a.panel_l background-position:0px -440px;  
  #panel_bb a:hover.panel_l background-position:0px -462px;  
  #panel_bb a.panel_c background-position:0px -484px;  
  #panel_bb a:hover.panel_c background-position:0px -506px;  
  #panel_bb a.panel_r background-position:0px -528px;  
  #panel_bb a:hover.panel_r background-position:0px -550px;  
  #panel_bb a.panel_hr background-position:0px -572px;  
  #panel_bb a:hover.panel_hr background-position:0px -594px;  
  #panel_bb a.panel_close background-position:0px -616px;  
  #panel_bb a:hover.panel_close background-position:0px -638px;  
  #panel_bb a.panel_info float:right; background-position:0px -660px;  
  #panel_bb a:hover.panel_info background-position:0px -682px;  
  /*——————————————*/  
   
  /* Дополнительно  
  ——————————————*/  
  .left float:left;  
  .right float:right;  
  .clear clear:left;  
   
  .transparency_i a:hover img   
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);  
  -moz-opacity: 0.5;  
  opacity: 0.5;  
  filter: alpha(opacity=50);  
    
  /*——————————————*/

На этом все!

источник: zornet.ru

Похожие посты