Стандартный поиск на сайте для uCoz
 | |
| Здесь преобразим стандартный поиск по сайту uCoz. Где закруглим углы у него и можно такой ставить в шапку или в любое место ресурса. Если вы только создали интернет ресурс, то основном поиск установлен на новых шаблон вверх сайта, по правую сторону. Вот с ним и работать будем. Это нужно найти оператор, что отвечает за вывод и убрать его и вместо его установить код, который представлен ниже. Есть у него эффект клика, это когда наводите на круглую кнопку, то она меняется в гамме. Здесь проверяя его на тестовом сайте, а это сделать его по ширине и по разной длине и чтоб корректно смотрелся, то по умолчанию идут под него стили. Которые вы также можете регулировать, но и безусловно стили на дизайн, что также нужно будет установить в самый низ CSS сайта. Когда все поставите, то вам еще придется подогнать его под фон или блок в котором он будет установлен, но это уже делается в стилях. Если синий оттенок не подходит, то как уже было сказано, вы можете выставить, тот что нужен, и только одна ссылка в нем, которая отвечает за изображение, виде лупы в центре кнопки. На светлом фоне:  На темном фоне:  Приступаем к установке: Убираем стандартный оператор и вместо его ставим код, или там где вам нужно. Код <?if($SEARCH_FORM$)?> <form class="searchForm" onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/"> <input type="text" name="q" value="Поиск по сайту..." onfocus="if (value == 'Поиск по сайту...') {value = ''}" onblur="if (value == '') {value = 'Поиск по сайту...'}"> <button type="submit" class="aicon-search"></button> <input type="hidden" name="t" value="0"> </form> <?endif?> Это стили в CSS: Код .search_bl {float: left; padding: 0px 20px; } .searchForm {border: 1px solid #e2e2e2;border-radius: 50px;position: relative;width: 275px;overflow: hidden;background: #fafafa;} .searchForm input[type="text"]{border: 0; width: 85%;line-height: 38px; height: 38px;padding-left: 15px; color: #a9a9ae; background: transparent; font-size: 14px;} .searchForm button[type="submit"] {cursor: pointer;width: 38px;height: 38px;position: absolute;right: 0;top: 0;border-radius: 50%;border: 0;background: #0EA7DF url(http://zornet.ru/CSS-ZORNET/Abvan/sch.png) 50% 50% no-repeat;color: #3a3535;font-size: 18px;transition: all 0.3s cubic-bezier(0.25, 0.1, 0.12, 1.04) 0s;} .searchForm button[type="submit"]:hover {color: #fff;background: #fd8d09;} .searchForm button[type="submit"]:hover {color: #fff;background: #1b7da0 url(http://zornet.ru/CSS-ZORNET/Abvan/sch.png) 50% 50% no-repeat;} Здесь выставлено так, чтоб производился поиск по всем модулям, если у вас один подключен, то в коде его пропишите и будет искать только по этому каталогу. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 11 | |
|
| |
