1. Главная
  2. Блоги
  3. Блог seaji

Темизируем формы

Главные вкладки

Аватар пользователя seaji seaji 19 апреля 2008 в 18:00

Привет всем!
Давно хотел выложить эту тему, но все руки не доходили. Толчком послужил этот пост: http://drupal.ru/node/14050
Кратко суть проблемы:
Друпал отлично темизируется через CSS благодаря тому, что отлично прописываются классы и ID различных блоков.
Но есть одно, большое "НО".
В Друпале, элемент формы имеет свое ID - это да, но он еще и оборачивается в 2-3 дива, которые не имеют отличий между собой.
Вот пример:

<div class="form-item">
 <label for="edit-taxonomy-tags-2">Ключевые слова: </label>
 <input type="text" maxlength="255" name="taxonomy[tags][2]" id="edit-taxonomy-tags-2"  size="60" value="" class="form-text form-autocomplete" />
 <div class="description">Укажите <strong>через запятую</strong> подходящие по смыслу рубрики. Они помогут в дальнейшем поиске материала другими людьми.</div>
</div>
<div class="form-item">
 <label for="edit-body">Текст: <span class="form-required" title="Это поле необходимо заполнить.">*</span></label>
 <textarea cols="60" rows="20" name="body" id="edit-body"  class="form-textarea resizable required  editor-textarea"></textarea>
</div>

Таким образом все блоки, содержащие элементы форм имеют один и тот же класс "form-item"
Если Вас эта задача поставила в тупик, то вот лекарство:

Прописываете в файле template.php вашей темы следующую функцию:

/**
* Return a themed form element.
*
* param element
* An associative array containing the properties of the element.
* Properties used: title, description, id, required
* param $value
* The form element's data.
* return
* A string representing the form element.
*/
function имя_вашей_темы_form_element($element, $value) {
$output = '

'."\n";
$required = !empty($element['#required']) ? '*' : '';

if (!empty($element['#title'])) {
$title = $element['#title'];
if (!empty($element['#id'])) {
$output .= ' '. t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."\n";
}
else {
$output .= ' '. t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."\n";
}
}

$output .= " $value\n";

if (!empty($element['#description'])) {
$output .= '

'. $element['#description'] ."

\n";
}

$output .= "

\n";

return $output;
}
?>

Что делает эта функция?
Она подставляет ID элемента формы как класс дива, который его оборачивает.
Результат (с сокращениями):

<div class="form-item edit-taxonomy-tags-2">
 <input type="text" id="edit-taxonomy-tags-2" />
</div>
<div class="form-item edit-body">
 <textarea name="body" id="edit-body" ></textarea>
</div>

Ну а дальше CSS вам в руки Lol
Примерчик темизации формы для комментариев можно посмотреть хотя бы здесь:
http://videotech.spb.ru/news/novyi_konkurent_dlya_blu-ray

ВложениеРазмер
Иконка изображения 2008-04-19_180030.gif6.52 КБ

Комментарии

Аватар пользователя seaji seaji 19 апреля 2008 в 20:43

О, меня "подшили", приятно.
Буду рад если мое решение окажется полезным.
Кстати, поле "домашняя страница" на моей форме для комментария я убрал с помощью CSS.

Аватар пользователя kiev1 kiev1 14 мая 2008 в 7:10

а нельзя как-то сделать что бы формы можно было темизировать так-же просто как шаблон CCK - то есть отдельным файлом шаблонов?

Аватар пользователя seaji seaji 2 июня 2008 в 12:41

Не знаю Sad
Видимо такого способа нет.
Краем уха слышал, что бывают темизирующие функции, но сам таковых не видел и не писал.

Аватар пользователя neochief neochief 2 июня 2008 в 14:29
<?php
function phptemplate_node_form($form) {
  switch ($form['#node']->type) {
    case 'story':
     return _phptemplate_callback('node-story-edit', array('form' => $form));
    default:
     return theme_node_form($form);
  }
}
?>

создаем node-story-edit.tpl.php и в нем что угодно дальше (для начала <?php print(drupal_render($form)); ?>)

Аватар пользователя DDDDD099 DDDDD099 30 июня 2011 в 16:49

Подскажите почему хром не видит div.node-form {border:1px}- не оборачивает форму рамкой, хотя остальные браузеры это делают. Понимаю - гдето что-то упустил - не могу найти.

Аватар пользователя DDDDD099 DDDDD099 30 июня 2011 в 18:09

Прописано полностью - я для краткости чтоб суть вопроса изложить. Посмотрел фаербаг - хром не хочет подсвечивать div начиная с region и все вложенные в него дивы вместе с формой (подсвечивает только полоску над формой не включая саму форму). В фаерфоксе все работает. Чтото упустил непойму что.