Помощь начинающим веб
разработчикам

Темизация формы поиска в Drupal 7. Файл template.php.

08.11.2012

При создании шаблонов под Drupal, возникают моменты при которых не всегда хватает голого CSS для подгона того или иного элемента под дизайн сайта. В такие моменты нам на помощь приходит, как вы наверное уже догадались файл template.php – он переопределяет стандартные функции Drupal под конкретные шаблоны. Как работать с данным файлом – я покажу вам на конкретном примере.

Допустим у нас стоит задача вписать в текстовое поле формы поиска некий текст, который будет исчезать после того, как мы сделает активным данное поле. Ну и заменим кнопку «Поиск» на своё изображение. Думаю задача понятна и на многих сайтах её не раз проделывали, замечу только, что для подобных действий знание php вам необходимо. Приступим, для начала нам необходимо создать файл в корне нашего шаблона

template.php

Не забываем только про кодировку – UTF-8. По умолчанию наша форма поиска выглядит на сайте вот так

Теперь давайте изменим её, открываем файл template.php и вписываем вот такую конструкцию

/*Перекрываем форму поиска */
function idTheme_form_alter(&$form, &$form_state, $form_id) {

  if ($form_id == 'search_block_form') {

    $deftext = t('Поиск по сайту');
    $form['search_block_form']['#title'] = t(' '); 
    $form['search_block_form']['#title_display'] = 'invisible'; 
    $form['search_block_form']['#size'] = 24;  
    $form['search_block_form']['#default_value'] = $deftext; 
    $form['actions']['submit']['#value'] = t('Найти'); 


    $form['search_block_form']['#attributes']['onblur'] = "if (this.value == '') {this.value = '".$deftext."';}";
    $form['search_block_form']['#attributes']['onfocus'] = "if (this.value == '".$deftext."') {this.value = '';}";
  }
}

Вместо «idTheme» вы должны вписать название своего шаблона, у меня это выглядит вот так

Сохраняем и смотрим на результат

Видим, что текст у нас появился в поле поиска, который так же исчезает, как мы делаем активным данное поле. Теперь нам необходимо изменить кнопку «Найти» на изображение, для этого нам потребуется вот такая конструкция

$form['actions']['submit'] = array('#type' => 'image_button', '#src' => base_path() . path_to_theme() . '/images/search.png');

Как вы могли заметить путь картинки указан относительно шаблона, т.е. картинку мне необходимо скопировать в папку «images», которая находится в корне шаблона. Дописываем эту конструкцию к уже имеющиеся, в результате ваш код должен выглядеть вот так

/*Перекрываем форму поиска */
function idTheme_form_alter(&$form, &$form_state, $form_id) {

  if ($form_id == 'search_block_form') {

    $deftext = t('Поиск по сайту');
    $form['search_block_form']['#title'] = t(' '); 
    $form['search_block_form']['#title_display'] = 'invisible'; 
    $form['search_block_form']['#size'] = 24;  
    $form['search_block_form']['#default_value'] = $deftext; 
    $form['actions']['submit']['#value'] = t('Найти'); 

	$form['actions']['submit'] = array('#type' => 'image_button', '#src' => base_path() . path_to_theme() . '/images/search.png'); 
    $form['search_block_form']['#attributes']['onblur'] = "if (this.value == '') {this.value = '".$deftext."';}";
    $form['search_block_form']['#attributes']['onfocus'] = "if (this.value == '".$deftext."') {this.value = '';}";
  }
}

Сохраняем и смотрим на результат

Как видим, всё у на работает. Осталось только для полной красоты подправить стили.

Узнавай о новых статьях сайта - первым. Просто подпишись на рассылку.

Комментарии (72)

Profile picture for user Юрий
Kobalerro
21.11.2012

Ищу решение проблемы со стилем кнопки поиска. Используется стандартный поиск drupal. Текстовое поле берет стиль с шаблона, а кнопка отказывается. Чего только не пробовал все напрасно.

Profile picture for user pantey
pantey
22.11.2012

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

Profile picture for user Юрий
Kobalerro
22.11.2012

Drupal 7. А вот с шаблоном сложнее в нете его нет. Генерированный в artister 4. В нем и проблема, когда пытаюсь что внести в template.php, выскакивает белая страница с сообщением об ошибке.

Profile picture for user pantey
pantey
22.11.2012

без просмотра кода вряд ли чем смогу вам помочь. Если хотите скиньте папку с шаблоном мне на почту - я посмотрю. Почта в шапке есть.

Profile picture for user Юрий
Rig
13.12.2012

Можете подсказать, как убрать рамку в форме вода текста в поиске. Сайт ya-studio.ru Свойство border:none; убирает во всех браузерах кроме хрома. В хроме остается серая рамка.

Profile picture for user pantey
pantey
13.12.2012

убирается вот так

input[type="text"]:focus{
outline:none;
}
Profile picture for user Юрий
Никита
15.12.2012

При создании файла template.php (Drupal 7) никаких изменений не происходит(((

Profile picture for user pantey
pantey
15.12.2012

Так после создания файла необходимо пересохранить шаблон и очистить кеш сайта!

Profile picture for user Юрий
Никита
16.12.2012

Дак само собой делал я это.....

Profile picture for user Юрий
Никита
16.12.2012

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

Profile picture for user Юрий
Никита
16.12.2012

Самое смешное заключается в том, что когда отключаю тему, удаляю ее из папки themes - она один фиг остается "жить" в "отключенных"....

Profile picture for user pantey
pantey
17.12.2012

а в какую папку вы сохраняете вашу тему? тема должна находится по пути

название_вашего_сайта/sites/all/themes
Profile picture for user Юрий
guy
16.12.2012

"Осталось только подправить стили"
Можно ли подробнее об этом? скопировал из modules/search файл "search-block-form.tpl.php" - размер формы сразу уменьшился (до этого строка таблицы в которой была расположена форма растягивалась по высоте). а вот стиль самого поля найти ну никак не получается((

Profile picture for user pantey
pantey
17.12.2012

вы переопределили вывод блока формы, скопировав данный файл себе в шаблон. Теперь откройте его и посмотрите, что в нем находится. Думаю id или классы стилей в нём прописаны. Можете заменить на свои и использовать по умолчанию. В стилях своего шаблона накидывайте что вам необходимо. и Firebug вам в помощь!

Profile picture for user Юрий
guy
17.12.2012

Да, но там 2 класса, которые не смог найти. И еще: никак не могу найти файл в котором находится сама эта форма с кнопкой, чтоб там кое что изменить

Profile picture for user pantey
pantey
17.12.2012

самый простой вариант, это посмотреть Firebug,ом классы которые формируют вывод, - добавить эти классы в свои стилевые таблицы и накидать стили которые вам необходимы, по API стили будут цепляться из выбранного вами шаблона. И было бы намного легче, если бы вы описали свою проблему более подробно, что есть сейчас, и что необходимо сделать. А то так я долго могу гадать.

Profile picture for user Юрий
Romeo
27.12.2012

Нужный код, но как прицепить класс к картинке? штобы править её, никак не получается, класс назначаю но он применяется ко всей форме поиска.

Profile picture for user pantey
pantey
27.12.2012

Не обязательно добавлять свой класс для картинки, можете использовать существующий. По умолчанию блок поиска имеет id

form #search-block-form

Если вы даже просто запишите

form #search-block-form img{
border:5px solid #ff0000;
}

то увидите, что картинка получила бордюр в 5px. А дальше пишите стили какие нужны вам.

Profile picture for user Юрий
Romeo
27.12.2012

Да по теории картинка должна реагировать, но так как это не картинка а кнопка (image-button) она на такое не реагирует.
Есть id по умолчанию (edit-submit) но тогда и другие кнопки изменяются.
Через template.php всячески пробовал привязать класс [#attributes] ноль эмоций.

Что еще можно испробовать?

Profile picture for user pantey
pantey
27.12.2012

Тогда вот так

form #search-block-form .form-actions input{
border:5px solid #ff0000;
}

должно работать!

Profile picture for user Юрий
Romeo
27.12.2012

Большое спасибо, Вам и вашему ресурсу, успехов и процветания в Новом году!!!
Все работает, спасибо!

Profile picture for user Юрий
1541
28.12.2012

День добрый, а как перекрыть стандартный шаблон всех кнопок на сайте? Использую AT-AdaptiveThemes Core.
На данный момент на сайте выводятся стандартные кнопки везде где они должны быть.

Profile picture for user pantey
pantey
28.12.2012

попробуйте через стили

.form-submit{

}
Profile picture for user Юрий
Гость
28.12.2012

Спасибо, помогло. Ситуацию такую поймал. Стоит по умолчанию тема AT но включена так же Kickstart. И некоторые регионы из нее видны в панели управления блоками, но не отображаются при помещении в них любого блока. Что тут может быть?

Profile picture for user pantey
pantey
28.12.2012

По идеи, регионы из стороннего включенного шаблона не должны отображаться в панели управления блоками. Вывод блоков в регионы доступен, если шаблон стоит по умолчанию.Т.е. вы не можете использовать регионы одного шаблона, в другом. Скорее словили какой то баг. Отключите Kickstart и посмотрите на результат, будут ли теперь отображаться регионы.

Profile picture for user Юрий
Гость
29.12.2012

Не показываются. Но наверное какой то баг точно. Т.к. у меня не показываются в режиме просмотра регионов некоторые регионы. например левый сайдбар. хотя я выбрал в настройках именно лайаут с двумя сайдбарами...

Profile picture for user Юрий
chedia
03.03.2013

Спасибо, помогло, но если зайти не под админом, поиска вообще нет div пустой, а в админке всё отлично, drupal 7 темы zen 5

Profile picture for user pantey
pantey
03.03.2013

в настройках укажи для каких ролей разрешен поиск!

Profile picture for user Юрий
chedia
03.03.2013

В настройках видимости блока?
если да,то во вкладке роль выбирал всех, во вкладке пользователи тоже всё пробовал, всё равно div пустой.

Profile picture for user Юрий
chedia
03.03.2013

Спасибо разобрался

Profile picture for user Юрий
Ruslan
04.05.2013

Здравстуйте!
Помоги пожалуйста, у меня не работает поиск
Я в файле .info создал блок, привязал его, сделал вывод на главной странице
в файле template.php прописал так как вы писали, сохранил кеш сменил шайблон, но все равно не работает
Что может быть?

Profile picture for user pantey
pantey
10.05.2013

эээ, сменил шаблон!!! После внесения изменения в файле template.php необходимо очистить кеш сайта и при необходимости пересохранить шаблон!

Profile picture for user Юрий
Артур
15.05.2013

Подскажите пожалуйста а как сделать чтоб картинка менялась при наведении. Это ведь тоже в template.php прописывается.

Profile picture for user Юрий
Артур
21.05.2013

Я имею ввиду как сделать чтоб кнопка поиска менялась при наведении. Через стили поменять у меня не получается.

Profile picture for user pantey
pantey
21.05.2013

а что именно не получается? давайте ссылку на сайт!

Profile picture for user Юрий
Кирилл
24.05.2013

От Благодарствую, а можно ли сделать чтоб при наведении менялся цвет кнопки? желательно средствами css? так будет проще)

Profile picture for user pantey
pantey
24.05.2013

выше уже про это писали. Скидывайте ваш HTML код формы с поиском, тогда я вам точно напишу полный путь для смены. А так примерно вот так

id_формы id_кнопки:hover{
background-color:#cc0000;
}
Profile picture for user Юрий
OK
25.07.2013

Подскажите, как вообще удалить кнопку? Чтобы поиск запускался просто по энтеру?
И как вставить форму поиска справа от логотипа?

Profile picture for user pantey
pantey
25.07.2013

можно через CSS, что - то вроде этого

id_button{
display:none
}

Вставка справа от логотипа - смотрите ваш файл pagr.tp.php, размечайте регион и выводите.

Profile picture for user Юрий
Zorn
29.07.2013

Доброго времени суток!
В сабтеме AT наблюдается странная странная картина, из всех свойств меняется только размер окна ввода текста. А в на странице совсем другие атрибуты вылазят...

Profile picture for user Юрий
Zorn
29.07.2013

Не знаю влияет ли это, но мой блок поиска (стандартный) обернут в мини-панель...

Profile picture for user Юрий
Zorn
30.07.2013

когда в функцию t(' '); передаются кириллица - и происходит подобное. Почему - пока не разобрался

Profile picture for user Юрий
Алексей
01.10.2013

Здравствуйте! А как убрать фон у поля, чтобы он стал прозрачным, а под ним был мой бэкграунд?

Profile picture for user pantey
pantey
03.10.2013

в стилях вашего шаблона переписать background для вашего поля. Drupal за основу берет стили шаблона, а не системные.

Profile picture for user Юрий
Алексей
03.10.2013

Да вот не удается, не хочет он его менять и кнопка почему-то относительно поля кривая и никак не дается выстроить в одну линию.

Profile picture for user pantey
pantey
04.10.2013

давайте ссылку где посмотреть или код!

Profile picture for user Юрий
Алексей
05.10.2013

Спасибо, за ответ. Я код взял отсюда: http://www.drupal.ru/node/75763
Опубликовано Stan.Ezersky в Пт, 29/06/2012 - 09:52., но по-моему он не сильно отличается, хотя я не понимаю php.
Вставил в template.php, закоментировав старый, в моей шкуре уже, есть такой файл. Затем начал ковырять css. Я не могу понять как управлять этим полем, пробовал много вариантов. Вот что сейчас:

#block-search-form {
display:block;
position: absolute;
top: 24.5em;
right: -1em;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
width: 300px;
height:50px;
background-color: transparent;
background: transparent url('/sites/all/themes/framework/images/searchback.png') no-repeat -20% center;
}

/*Cвойства кнопки*/
#block-search-form #edit-submit {
margin: 15px 1px 1px 1px;
}

/*Cвойства формы*/
.search-form {
background-color: transparent;
margin: 15px 1px 1px 1px;
color:#fff;
}

Сайт: 7birds.ru. Мысль такая, что выдавленная плашка должна быть всем фоном, а на ней фиолетовая кнопочка и еле заметное или прозрачное с окантовкой поле для ввода.

Profile picture for user pantey
pantey
11.10.2013

Вся проблема у вас с CSS, для чего вы перекрывали всю форму поиска не понятно.

Profile picture for user Юрий
Алексей
11.10.2013

Полагаю, что так и есть. А как сделать то что я хочу?

Profile picture for user Юрий
alex
25.10.2013

спасибо за урок

Добавить комментарий

- Оповестить о новом комментарии.
- Все комментарии
- Только мои комментарии