Оформление формы поиска в Drupal

Оформление формы поиска в Drupal

В последнее время занимаюсь версткой тем для Drupal 5.7. Хочу поделиться способом, с помощью которого я оформила формы поиска (ну и, само собой, увековечить для себя).

Что нужно:

  1. Полностью графическая форма: поле и кнопка в виде изображений.
  2. Надписи на кнопке быть не должно ни в одном браузере.
  3. В поле поиска уже вставлено слово (в нашем случае "Поиск...").
  4. Чтобы при нажатии на кнопку все работало, а не открывалась белая страница.

Сначала переопределим функцию вывода формы в файле темы template.php:

<?php
/*
* Переопределение формы поиска
*/
function phptemplate_search_theme_form($form) {
 
$form['search_theme_form_keys']['#value'] = 'Поиск...';
 
$form['submit']['#theme'] = 'button';
 
$form['submit']['#button_type'] = 'image';
 
$form['submit']['#value'] = '';
 
$form['submit']['#attributes'] = array(
/*К сожалению, атрибут scr я не смогла заставить работать, то есть строчка ниже написана просто для порядка, но не для работы*/
   
'src' => base_path() . path_to_theme() . '/images/but-search.png',
   
'alt' => t("search"),
   
'title' => t("Нажмите чтобы начать поиск")
  );
  return
'<div id="search" class="container-inline">'. drupal_render($form) .'</div>';
}
?>

Хочу рассказать, как я нашла этот код и как догадалась его поменять для своих целей.
Сначала был поиск. Чтение drupal.org и drupal.ru. Я поняла что дело надо будет иметь с функцией phptemplate_search_theme_form и так как вставка кода с этих сайтов убирала стили, которые я определила для своей формы, я решила найти первоисточник, а наибыстрейший способ сделать это - пойти на http://api.drupal.org/ и набрать в поле поиска интересующую функцию. Так я вышла на страницу http://api.drupal.org/api/function/theme_search_theme_form/5, и все стало ясно - сниппеты, которые я вставляла в template.php, не содержали <div id="search" class="container-inline">, поэтому мои стили не подходили для них.

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

$form['submit']['#button_type'] = 'image';

определяет тип кнопки для поля с именем (name) submit. Тогда чтобы мне переопределить value для моего поля с именем search_theme_form_keys, нужно добавить строку

$form['search_theme_form_keys']['#value'] = 'Поиск...';

Вот так я докопалась до истины. Теперь у меня есть опыт в переопределении вывода форм в Drupal!

Теперь самое интересное - стили CSS.

Эти стили определяют форму, у которой поле и кнопка соединены вместе и визуально кнопка - продолжение поля.

А вот стили для кнопки, находящейся отдельно от текстового поля:

На всякий случай, если стили не работают в IE - нужно убрать все русские комментарии из CSS файла.

Вот и все. Когда сайты будут готовы, я дам ссылки на просмотр этих форм вживую)))