Кнопка поиска в 2.5.1

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО

Как сделать активной кнопку поиска (лупу) в ICMS 2.5.1

#1 5 мая 2016 в 10:33

Добрый день друзья! Подскажите пожалуйста, как сделать активной кнопку поиска (лупу) в виджете поиска на ICMS 2.5.1 В данный момент чтобы сработал поиск на сайте надо нажимать кнопку ENTER, а я хотел сделать чтобы поиск срабатывал при нажатии на лупу.

Спойлер

-1

#2 5 мая 2016 в 11:07

добавьте в форму поиска виджета кнопку сабмита, стилизуйте её как вам хочется (под лупу) и должно все работать 😉

<input type="submit" name="submit" value="" title="Найти">

#3 5 мая 2016 в 11:23

должно все работать
Val

Спасибо Валентин за подсказку, все работает, но это немного не то, что я хотел. Кнопка за пределами формы поиска (отдельно), я просто на других сайтах видел, лупа активная в форме поиска, как бы также сделать? scratch

Сейчас код такой для формы поиска.

Спойлер

<div class="widget_search">
    <form action="<?php echo href_to('search'); ?>" method="get">
        <?php echo html_input('text', 'q', '', array('placeholder'=>LANG_WD_SEARCH_QUERY_INPUT)); ?>
    </form>
</div>

а css стиль у формы поиска такой

Спойлер

.widget_search .input {
    width: 220px;
	line-height: 25px;
    box-shadow: 0 0 10px #ffffff;
    padding: 0 30px 0 11px;
	background: url("../images/search-glyph.png") no-repeat right center #FFF;
	font-size:15px;
	color: #34495e;
	vertical-align: top;
	border: solid 1px #d8d8d8;
	border-radius: 4px;
}

-1

Сегодня в 17:23

#4 5 мая 2016 в 21:16

Кнопка за пределами формы поиска (отдельно)
Андрей

Андрей, вы не внимательны smile

Я же написал что стили нам помогут! Например в вашем случае добавляем кнопку в виджет поиска:

<div class="widget_search">
    <form action="/search" method="get">
        <input type="text" class="input" name="q" value="" placeholder="Найти на сайте">
        <input type="submit" class="search_btn" name="submit" value="" title="Найти">
    </form>
</div>

затем прописываем стили для пимпы:

.search_btn {
    position: absolute;
    right: 0;
    top: 1px;
    width: 25px !important;
    height: 25px;
    background: url("../images/search-glyph.png") no-repeat right center transparent;
}

здесь мы переносим кнопку над полем и делаем ее прозрачной. Получается иллюзия что картинка находится в поле поиска и по ней можно щелкнуть)).

Другой вариант заключить поле поиска и кнопку внутри слоя (можно саму форму использовать как объединяющий слой) примерно так:

<form action="/search" method="get">
        <div class="stilizator">
                <input type="text" class="input" name="q" value="" placeholder="Найти на сайте">
                <input type="submit" class="search_btn" name="submit" value="" title="Найти">
        </div>
    </form>

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

p.s. Приведенные стили тестировались ограниченно, возможно необходима доработка, но метод 100% тот о котором вы спрашивали))

#5 5 мая 2016 в 21:24

Андрей, вы не внимательны
Val

Знаний нет hoho

, признаю, поэтому и спрашиваю scratch

Спасибо за помощь! Работает, со стилями только повозится надо.

-1

#6 5 мая 2016 в 22:08

Проблема решена!

-1

Как сделать так что бы пользов

Как занести вывести город в ша

Кнопка поиска в 2.5.1

Похожие темы

Что будет премиум-компонентом InstantVideo после 2020 года?

[ЕСТЬ РЕШЕНИЕ] Компонент поиск выводит только поиск по заголовкам новостей и страниц

Не работает карта сайта на 2ке

Status: 200 при сохранении настроек виджета

Кнопка редактировать профиль на аватарке приз 200р :-)

Кнопки html

InstantCMS Team

О проекте

Поддержка

Дополнения