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

07 мая 2008

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

Что нужно:

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

Сначала переопределим функцию вывода формы в файле темы 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.

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

Посмотреть стили CSS

/* Search Form Theming */
#search-theme-form {/*Общие свойства формы поиска, расположение на странице по отношению к остальным элементам*/
   display: block;
   position: relative;
   padding:240px 0 0 0;
   margin:0pt 34px 0px 0pt;
} 
#search {/*Общая длина формы (кнопка и поле, фон поля)*/
   padding:0;
   background:#000 url(images/bg-search.gif) no-repeat;
   height:20px;
   width:209px;
   text-align: left;
} 
#search .form-item{
   margin:0;
   padding:0;
}
#search-theme-form div {
   margin-right: 0;
   padding-right: 0;
}
#search #edit-search-theme-form-keys {/*Определяет свойства формы, длина, шрифт, обязательно указать прозрачный фон, так как без него она станет белой*/
   border: none;
   background-color: transparent;
   width:141px;
   color:#777777;
   font-size:0.9em;
   padding:4px 6px 3px 6px;
}
#search #edit-submit {/*Это свойства кнопки*/
   background-color: transparent;
   border: none;
   background: transparent url(images/but-search.png) top right no-repeat;
   vertical-align: top;
   height: 20px;
   width:52px;
   cursor: hand;
   cursor: pointer;
   margin:0;
}

* html #search #edit-search-theme-form-keys{/*Хак для <IE6 - сдвигаем все вместе повыше*/ margin-top:-3px; padding:4px 6px 0px 6px; }

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

Посмотреть стили CSS

/* Search Form */
#search-theme-form {/*Общие свойства формы поиска, расположение на странице по отношению к остальным элементам*/
   display: block;
   position: relative;
   padding:0;
   margin:0pt 10pt 0 20px;
   float:right;
}
#search {/*Общая длина формы (кнопка и поле, фон поля)*/
   padding:0;
   background:#fff url(images/search_text.gif) no-repeat;
   height:20px;
   width:135px;
   text-aling:left;
   margin:0;
}
#search .form-item{
   margin:0;
   padding:0;
}
#search-theme-form div {
   margin:-2px 0 0;
   padding-right: 0;
}
#search #edit-search-theme-form-keys {/*Общие свойства формы поиска, расположение на странице по отношению к остальным элементам*/
   border: none;
   background-color: transparent;
   width:100px;
   color:#cc2127;
   font-size:0.9em;
   padding:4px 0 3px 6px;
   margin:0;
}
#search #edit-submit {/*Это свойства кнопки*/
   background-color: transparent;
   border: none;
   background:transparent url(images/search_btn.png) top right no-repeat;
   vertical-align:baseline;
   height: 18px;
   width:19px;
   cursor: hand;
   cursor: pointer;
   margin:0 0 0 6px;
}
*+html #search #edit-submit {/*Хак для IE7 - сдвигаем кнопку повыше*/
   vertical-align:top;
}

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

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

Гость

22 мар 2009 | 0:15

Молодца, доступно понятно и на личном опыте. РЕСПЕКТ

Гость

26 авг 2009 | 23:07

Отлично!!! Мне помогло для 5-ой версии, вот еще бы для 6-ой найти...

Гость

19 сен 2009 | 23:27

М-да!
Вот который день уже мучаюсь со смещением кнопки поиск в меню. Нужно сместить вправо. Далее как тут написано: убрать лишнее.
http://www.drupal.ru/node/34134#comment-181909

sa_bo_nim

17 окт 2009 | 14:07

Нашла очень хороший рецепт (делает именно input type="image") для Drupal6 здесь

Татьяна

20 Дек 2011 | 10:13

Подскажите, пожалуйста, как сделать чтоб форма поиска отображалась в одной строке с меню, как у вас на этом сайте? У меня Друпал 6.

sa_bo_nim

20 Дек 2011 | 11:25

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

Привожу кусок из page.tpl.php, выводящий серый блок на данном сайте:

<div id="navigation" class="menu <?php if ($primary_links) { print "withprimary"; } if ($secondary_links) { print " withsecondary"; } ?> ">
  <?php if ($search_box): print $search_box; endif; ?>
  <?php if ($primary_links): ?>
  <div id="primary" class="clear-block">
    <?php print theme('links', $primary_links); ?>
  </div>
  <?php endif; ?>
</div> <!-- /navigation -->

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

Посмотреть стили CSS

Посмотреть стили CSS

Комментировать

Новые описания

Свежие записи