» »

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

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

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

Есть там одна ссылка на изображение, просто снял со своего сайта и поставил, вы можете найти что то по оригинальнее и поставить, но изначально узнайте размеры кнопки. То что он полностью рабочий, то проверен на тестовом сайте. Также у него идут стили, и если ставить на фон интернет ресурса, то нужно его подогнать по оттенку. Можно вообще сделать так. что как будто он углублен, это визуально смотреться будет. Также сделать красивый обвод под один или два пикселя, вообщем здесь вы сами можете его преобразить, чтоб влился в портал как родной.

Так он будет по умолчанию:

Элегантная форма поиска для сайта на uCoz

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

Для начало закинем стили в CSS и здесь можно в самый низ.

Код
input[type=search] {  
  background: #ededed url(http://zornet.ru/Ajaxoskrip/Forma_knopk/ZR/GpxWt03.png) no-repeat 9px center;  
  border: solid 1px #ccc;  
  padding: 9px 10px 9px 32px;  
  width: 250px;  
   
  -webkit-border-radius: 10em;  
  -moz-border-radius: 10em;  
  border-radius: 10em;  
   
  -webkit-transition: all .5s;  
  -moz-transition: all .5s;  
  transition: all .5s;


Потом находим место, для установке, где будет он, лучше на видном месте и устанавливаем код.

Код
<?if($SEARCH_FORM$)?><form class="inputbox" action="/search/" method="get">  
  <input required="required" name="q" autocomplete="off" minlength="3" placeholder="Поиск" type="search">  
</form>  
<?endif?>

Если у вас стандартный шаблон, а там основном идет вверх сайта, то вам только нужно убрать оператор и скопировать код, без операторов, что в начале и в конце идут и установить, и потом по стилям настроить.
04.04.2017 Просмотров: 424 Комментарий: (7)

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

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

Комментарий: 7
Kolinkor
Kolinkor 04.04.2017 20:531
0
Если на светлый ставить, то 1 пиксель обвода, и как здесь на сайте в низ добавить тень, но обвод делать не такой яркий.
Kosten
Kosten 04.04.2017 21:032
0
На светлом согласен, что можно так сделать, в описание имел виду, если на фоне, который светлый или немного темнее, то можно стилями поиграть. Если кому нужно, то вот тень в низу элемента можно поставить, как здесь на поиске, или в персональной странице на кнопке отправить сообщение.

Код
box-shadow: 0px 4px 10px rgba(148, 148, 148, 0.31), 0px 10px 30px -15px rgba(0, 0, 0, 0);
Maryges
Maryges 04.04.2017 21:103
0
Здесь все на любителя, просто с оригинального поиска, можно также сделать красивый и закруглить углы, кому как говориться.
Maryges
Maryges 04.04.2017 21:414
0
Нашел один поиск по сайту, он стандартный, постараюсь разместить, только проверить бы как.
Kosten
Kosten 04.04.2017 21:505
0
Проверить не проблема, главное, чтоб работал, так сказать искал что нужно.
Kolinkor
Kolinkor 05.04.2017 01:596
0
Если на один модуль, то все правильно, его и выставить нужно, но почему не показано. За это отвечает "/search/" это пл всему сайту. Ставим /load/ что по каталогу файлов будет производиться поиск и так с другими, какой у вас подключен и если он только один, тот и выставляем.
Kosten
Kosten 05.04.2017 02:087
0
Можно поставить и по всему сайту и на одном модуле, все равно он будет выводить и искать только на нем.
avatar