Размещение формы поиска на сайте ^#2073

Служба технической поддержки не предоставляет консультаций по редактированию шаблонов.

При необходимости Вы можете разместить на своем сайте (например, в "шапке", в "подвале" или в каком-либо из меню сайта: верхнем или боковом) форму поиска по сайту.

Для того чтобы самостоятельно разместить форму поиска на сайте, Вам необходимо получить расширенные права доступа к системе управления. Получить их Вы можете самостоятельно, следуя инструкции по ссылке.

После того как расширенные права доступа получены, можно приступать к работе.

Рассмотрим весь процесс размещения формы на примере верхнего меню.

Прежде всего определитесь, в каком месте сайта Вы бы хотели разместить форму поиска. В нашем примере - это верхнее меню.

Затем найдите нужное Вам место в коде страницы. Для этого, находясь на странице, нажмите F12 (в большинстве браузеров) в открывшейся рабочей области нажмите на иконку с изображением лупы или иным способом перейдите к выделению нужного элемента.

Выделите на странице то место, где Вы хотите разместить форму поиска. Обратите внимание - это место будет отмечено и в коде рабочей области ниже (в нашем случае это строка "<ul class="nav-top">).

Перейдите к разделу "Настройки" - "Шаблоны и файлы".

Выберите и откройте для редактирования нужный Вам шаблон. В нашем случае - это "_Главная. Верх".

Найдите в открывшемся шаблоне то место, которые Вы отмечали в шаге 2 (у нас это строка <ul class="nav-top">). И над этой строкой вставьте следующий код:

<form id="form" class="search" name="poisk" method="get" action="/search">

<input type="search" value="Поиск по сайту" onfocus="this.value=this.value=='Поиск по сайту'?'':this.value;" onblur="this.value=this.value==''?'Поиск по сайту':this.value;" name="search">

<input type="submit" value="">

</form>

Сохраните изменения в шаблоне.

Можете перейти на сайт и посмотреть, что у Вас получилось. Должна отобразиться форма поиска. 

Теперь необходимо выровнять форму и загрузить иконку для кнопки.

Вернитесь в раздел "Шаблоны и файлы" системы управления и перейдите к "Файлам" дизайна.

Далее Вам будет необходимо найти нужный файл стиля, это может быть: styles.less, styles.less.css или же styles.css. Найти нужный файл Вы можете в папке "images" или же в отдельной папке "css".

• Выберите styles.less и откройте для редактирования, если дата его изменения позднее, чем дата styles.less.css.

• Или же откройте для редактирования styles.less.css - если именно он был изменен позднее.

• Если же ни того, ни другого файла в папках нет - откройте для редактирования файл styles.css.

В открывшемся файле вставьте стили для формы.

.search {

height:26px;

width:212px;

background:#ffffff;

-webkit-border-radius:3px;

-moz-border-radius:3px;

border-radius:3px;

margin:4px 17px 0;

float:right;

}

.search input[type="search"]::-webkit-search-cancel-button { display:none; }

.search input[type="search"] {

float:left;

height:26px;

width:170px;

margin:0;

padding:0 0 0 10px;

border:none;

font:normal 12px Arial;

line-height:26px;

color:#afaeae;

background:none;

outline:none;

-webkit-appearance:none;

-moz-appearance:none;

}

.search input[type="submit"] {

float:right;

height:26px;

width:22px;

margin:0 8px 0 0;

padding:0;

border:none;

background:url(../search-but.png) center center no-repeat;

cursor:pointer;

}

Обратите внимание!

• Вы можете изменять значения в стилях, если хотите отредактировать длину и отступы формы.

И сохраните изменения в файле.

Теперь снова откройте раздел "Шаблоны и файлы" системы управления и перейдите к "Файлам" дизайна, а затем в папку "Images".

Нажмите на кнопку "Обзор" и выберите файл с иконкой для кнопки поиска (его мы предлагаем Вам скачать по следующей ссылке - при необходимости Вы можете использовать и свое изображение).

И нажмите на кнопку загрузки.

Перейдите на сайт. Форма поиска должна иметь примерно следующий вид.

Обратите внимание!

• Если иконка с изображением лупы не отображается - откройте файл стиля (Шаг 10) и в строке "background:url(../search-but.png) center center no-repeat;" укажите в скобках точный адрес до загруженного изображения с иконкой (Шаг 12). Строка должна принять примерно следующий вид "background:url(http://site/d/123456/t/search-but.png) center center no-repeat;" (курсивом выделен пример URL - в Вашем случае вместо него должен быть указан url загруженной Вами иконки).
• Для корректной работы поиска в Вашей системе управления должна быть создана страница вида "Поиск" с адресом "/search".

• Данная инструкция является примером реализации описанного функционала. Показанные в инструкции результаты могут отличаться от реальных по причине специфики шаблонов конкретного сайта или иных технических нюансов.