Темизация формы авторизации в Drupal 7. Drupal 7 темизация форм
Темизация веб-формы в Drupal 7. Файл webform-tpl.php
Сегодня начнём изучение темизации веб-форм в Drupal 7, напомню, что самым популярным при создании своих веб-форм является модуль webform. Как создать свою веб-форму вы можете почитать вот здесь, на этом я останавливаться не буду. В качестве примера я буду использовать стандартный шаблон Drupal – Bartik, и создам форму из нескольких полей (2х текстовых полей, 1го поля с электронной почтой и 1го поля с текстовой областью), в результате данная форма у меня выглядит вот так
И имеет следующие настройки
Теперь приступим к самой темизации. Например давайте разместим данную форму в таблицу, в первой строке которого у нас будут находится поля с «Именем» и «Фамилией», во второй строке разместим поле «E-mail», ну а в третьей строке выведем поле «Текст сообщения». Приступим, первое что нам необходимо – это узнать id нашей формы, в моём случае моя форма имеет #360, свой id вы можете увидеть в адресной строке браузера при создании формы, либо через Firebug. Теперь переходим в корень вашего шаблона и создаём файл с именем
webform-form-idвашейформы.tpl.php
в моём случае файл будет иметь имя
и впишем первым делом в него вывод нашей таблицы
<table border="1">
<thead>
<tr>
<td>
<h4>наша тестовая форма</h4>
</td>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
И посмотрим на результат, не забудьте только про кодировку UTF-8 без BOM, и очистить кеш сайта, вот что в итоге у нас получается
Картина конечно не самая наглядная но тем не менее. Таблицу мы вывели, теперь осталось нам вывести лишь поля в каждую строчку таблицы. В webform поля выводятся из массива, как
<?php print drupal_render($form['submitted']);?>
Таким образом мы выведем все поля из данного массива, а нам же нужно каждое поле по отдельности, сложности с этим у вас не должно возникнуть, так как массив submitted является многомерным, и чтобы вытащить конкретное поле, нужно лишь дописать ключ данного поля и выглядеть запрос будет вот так
<?php print drupal_render($form['submitted']['ключ поля']);>
Ключом поля является машинное имя создаваемого поля, которое вы задаете при создании данного поля
В результате вывод поля «Имя» будет выглядеть, как
<?php print drupal_render($form['submitted']['imya']);?>
На странице это выглядит вот так
Теперь то же самое проделаем для всех остальных полей нашей формы, это вы сделаете самостоятельно, я лишь покажу как должно получиться у вас
и для красоты я добавил дополнительные столбцы в таблице, в результате мой код выглядит вот так
Как мы видим с поставленной задачей мы справились, осталось лишь вывести саму кнопку отправки формы, вывод производится как
<?php print drupal_render_children($form);?>
Выведем кнопку после таблицы, в результате конечный код моей формы выглядит так
Посмотрим результат,
Как мы видим, теперь у нас полноценная веб-форма, с полями и кнопкой отправки. Далее в уроках мы рассмотрим еще различные файлы модуля webform, которые упрощают стилизацию вывода практически каждого элемента формы, а пока на этом всё.
drupalfly.ru
Темизация формы логина в Drupal 7
Здравствуйте!Прошу посказать момент с темизацией формы входа. Уже несколько часов не могу понять, что не так. До этого с темизацией не работал, но обстоятельства вынудили взяться за это дело в кратчайшие сроки :)Пробовал разные способы, и с двойными дефисами, и чистить кеш, и в разных браузерах смотреть... Ничего не помогло. Подскажите, где косяк:
function sky_theme() { return array( 'color_scheme_form' => array( 'render element' => 'form', 'path' => drupal_get_path('theme', 'sky') . '/templates', 'template' => 'color-scheme-form', ), ); return array( 'user_login_form' => array( 'render element' => 'form', 'path' => drupal_get_path('theme', 'sky') . '/templates', 'template' => 'user-login-form', ), );}Вид файла:
<?phpfunction user_login_block($form) { $form['#action'] = url($_GET['q'], array('query' => drupal_get_destination())); $form['#id'] = 'user-login-form'; $form['#validate'] = user_login_default_validators(); $form['#submit'][] = 'user_login_submit'; $form['name'] = array('#type' => 'textfield', '#title' => t('Username2'), '#maxlength' => USERNAME_MAX_LENGTH, '#size' => 10, '#required' => TRUE, ); $form['pass'] = array('#type' => 'password', '#title' => t('Password'), '#maxlength' => 60, '#size' => 10, '#required' => TRUE, ); $form['actions'] = array('#type' => 'actions'); $form['actions']['submit'] = array('#type' => 'submit', '#value' => t('Log in'), ); $items = array(); if (variable_get('user_register', USER_REGISTER_VISITORS_ADMINISTRATIVE_APPROVAL)) { $items[] = l(t('Create new account'), 'user/register', array('attributes' => array('title' => t('Create a new user account.')))); } $items[] = l(t('Request new password'), 'user/password', array('attributes' => array('title' => t('Request new password via e-mail.')))); $form['links'] = array('#markup' => theme('item_list', array('items' => $items))); return $form;}?>О средстве темизации форм в Drupal 7
Добрый день.
Поделитесь, пожалуйста, опытом, есть ли способы темизации друпаловских форм, кроме классических (hook_form_alter, другие хуки, переопределение уже прописанных классов CSS и т.д.) ?
Например, недавно решал такую задачу.Есть готовая верстка сделанная верстальщиком, и нужно было, чтобы форма ввода комментария выглядела вот таким вот образом:
И вот для того, чтобы привести стандартную форму к такому виду, пришлось написать вот такой вот код
function music_preprocess_comment_wrapper(&$vars){ // Настройка формы добавления комментария // Обрамляем всю форму ввода комментария $vars['content']['comment_form']['#prefix'] = ''; // Добавляем классы для формы ввода комментария $vars['content']['comment_form']['#attributes'] = array( 'class' => array('form','form_standard', 'form_comment'), ); // Настройка поля ввода текста комментария $vars['content']['comment_form']['comment_body']['#prefix'] = 'Вот так сверстал верстальщик:
div> form> ul> li>textarea placeholder="Ваш комментарий">textarea>li> li> span>input type="submit" value="Добавить">span>li> ul> form> div>
А вот так получилось в итоге:
div> form action="/comment/reply/4" method="post" accept-charset="UTF-8"> div> ul> li> div> div> div> div> label for="edit-comment-body-und-0-value">Comment span title="Это поле обязательно для заполнения.">*span>label> textarea placeholder="Ваш комментарий" name="comment_body[und][0][value]" cols="60" rows="1">textarea> div> div> div> div> li> input type="hidden" name="form_build_id" value="form-IMbWa6LBhg4aO-nLOSYy9UKWWglyI6vWUYtlCK6FR0I" /> input type="hidden" name="form_token" value="tLm1DJdighyhjN7fMBsLoyEE0pecvW_mdifiX3MZzEU" /> input type="hidden" name="form_id" value="comment_node_notice_form" /> li> div> span> input type="submit" name="op" value="Добавить" /> span> div> li> ul> div> form>div>
Так вот, хочу спросить, есть ли визуальные средства, которые позволяли бы без потери функционала генерировать код форм без всяких друпаловских врапперов и т.д. ?То есть, чтобы код был как можно более приближен к коду ручной верстки.
drupal.ru
Темизация формы авторизации в Drupal 7
Темизация формы авторизации в Drupal 7 мне была необходима для расположения формы авторизации в шапке сайта. Искал очень долго решение, оно оказалось простым. Для этого нужно создать файл в папке с вашей темой c названием
block--user--login.tpl.php.Далее нужно разместить следующий код:
<form accept-charset="UTF-8" method="post" action="/node?destination=node"> <div > <div > <div> <div>Логин</div> <div> <input type="text" name="name"> <div> <a href="/user/register">Регистрация</a> </div> </div> </div> <div> <div>Пароль</div><br/> <div> <input type="password" name="pass"> <input type="hidden" value="" name="form_build_id"> <input type="hidden" value="user_login_block" name="form_id"> <div> <a href="/user/password">Забыли пароль?</a> <input type="submit" value="Войти" name="op"> </div> </div> </div> <div></div> </div> </div> </form>В панели администратора у блока «Вход в систему» нужно будет выбрать существующий регион в котором будет размещаться форма.
У меня получилась такая форма.
