» »

Стандартный поиск на сайте для uCoz

Стандартный поиск на сайте для uCoz

Здесь преобразим стандартный поиск по сайту uCoz. Где закруглим углы у него и можно такой ставить в шапку или в любое место ресурса. Если вы только создали интернет ресурс, то основном поиск установлен на новых шаблон вверх сайта, по правую сторону. Вот с ним и работать будем. Это нужно найти оператор, что отвечает за вывод и убрать его и вместо его установить код, который представлен ниже. Есть у него эффект клика, это когда наводите на круглую кнопку, то она меняется в гамме.

Здесь проверяя его на тестовом сайте, а это сделать его по ширине и по разной длине и чтоб корректно смотрелся, то по умолчанию идут под него стили. Которые вы также можете регулировать, но и безусловно стили на дизайн, что также нужно будет установить в самый низ CSS сайта. Когда все поставите, то вам еще придется подогнать его под фон или блок в котором он будет установлен, но это уже делается в стилях. Если синий оттенок не подходит, то как уже было сказано, вы можете выставить, тот что нужен, и только одна ссылка в нем, которая отвечает за изображение, виде лупы в центре кнопки.

На светлом фоне:

Рабочий поиск по сайту

На темном фоне:

Сделать свой поиск по сайту uCoz

Приступаем к установке:

Убираем стандартный оператор и вместо его ставим код, или там где вам нужно.

Код
<?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;}

Здесь выставлено так, чтоб производился поиск по всем модулям, если у вас один подключен, то в коде его пропишите и будет искать только по этому каталогу.
04.04.2017 Просмотров: 581 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
tsakonter
tsakonter 04.04.2017 23:171
0
Как заметил, то вообще редко на новых шаблонах меняют поиск, есть даже сайты, где в блоке установлены и нормально все смотрится. Хотя сейчас представить, что в блоке отдельном под поиск.
Kosten
Kosten 04.04.2017 23:262
0
Это можно сказать условно, что стандартного, тоже можно красивый и стильный поиск сделать и не стоит искать.
Kolinkor
Kolinkor 05.04.2017 01:473
0
Почему решили, что стандартный, если написано, что выводит оператор.
Kosten
Kosten 05.04.2017 01:564
0
Решил потому, что этот поиск по сайту со стандартного ДимДимыч делал на одном сайте, потому его снял с него и разместил.
Kosten
Kosten 05.04.2017 02:125
0
Если у вас сайт еще с закругленными углами, вот на этом все подогнал под 5 пикселей, то такой по форме поиск как то впишется. А если поставить с углами, то все равно смотрится лучше и заметнее.

avatar