[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форма добавления комментарий для uCoz
Sherzod_230688Дата: Shanba, 05.04.2014, 12:57 | Сообщение # 1
Майор
Группа: Sayt Prezidenti ( SP)
Сообщений: 4702
Статус: Оффлайн

Новая форма добавления комментарий добралась до нашего сайта. Скрипт выглядит просто удивительно с точки зрения функционала и конечно же немаловажно - дизайна. Форма добавления комментарий uCoz истользует скрипт выложенный мною ранее - Панель bb кодов для uCoz. Скрипт формы добавления комментарий выполнен в серых тонах. И еще не много о скрипте uCoz: автор скрипта, он же RuleZ-DM, постарался еще над одним моментом - ввод капчи, он сделал удобнее и лучше для восприятия.
  Шаг 1 - Установка HTML
Устанавливаем html каркас формы добавления комментарий uCoz, для этого идём в П.У - Дизайн - Управление дизайном - Комментарии - Форма добавления комментариев, удаляем старый код и устанавливаем новый:

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

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

   <div class="menu_n">   
   <a href="#" ><img alt="" src="http://wallaby.ucoz.ru/images_site/smail.gif"></a>   
   <div class="dd_menu">   
   <span class="dd_ugol1"></span>   
   <script type="text/javascript" src="http://wallaby.ucoz.ru/js/smile.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>   
   <!-- /Конец тегов форма комментарий -->


  Шаг 2 - Установка CSS
Заходим в П.У - Дизайн - Управление дизайном(CSS) и в самый низ вставляем стиль для формы добавления комментарий:

Код
/* Форма комментарий   
   ------------------------------------------*/   
   #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://wallaby.ucoz.ru/_ph/1/2/387435688.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);}


SEV.UZ
 
  • Страница 1 из 1
  • 1
Поиск: