При создании тем для Drupal многие сталкиваются с проблемой оформления страницы добавления (node/add) и редактирования мтериала (node/*/edit).
Я постараюсь рассказать вам как при помощи простой верстки можно это сделать.
Действительно, стандартные формы редактирования ноды в темах для Drupal выглядят не очень привлекательно. Попробуем изменить это.
Очень удобно, когда название поля находится слева от поля, а не сверху, как это по умолчанию в друпале.
Для этого нужно написать в .css следующий код:
.form-item label {
float: left;
margin-right: 10px;
}
И мы получим следующее преобразование:
margin-right: 10px; нужен для небольшого отступа от наименования поля, чтоб оно не слипалось с элементом формы. Форма выглядит акуратнее, когда все элементы формы находяться точно один под одним, для этого нужно для всех .form-item label задать одинаковую ширину. Эту ширину нужно подбирать в зависимости длины названий ваших полей. Например, в следующем примере я использовал ширину 195px:
.form-item label {
float: left;
margin-right: 10px;
width: 195px;
}
Для акуратности нужно сделать все элементы формы одинаковой длины. Вот селекторы, в которых нужно указать длину элементов:
.form-item select {...}
.form-item .form-text {...}
.form-item textarea {...}
.form-item .form-autocomplete {...} - тоже имеет класс .form-text
Помните при верстке, что select, и текстовое поле (input[type="text"]) может иметь в теме стиль max-width:95%, вы можете его перекрыть для удобности.
Для того чтобы значек обязательного поля( * ) отображался слева от поля, нужно прописать в css следующее:
.form-item label {
padding-left:10px;
position:relative;
}
float:left;
left:0;
margin-left:0;
position:absolute;
}
Если на вашей форме есть радтобатоны или чекбоксы, предидущий селектор css повлияет на их отображение. В этом случае нужно переопределить их стиль. В моем примере для того, чтобы радиобатоны "Сдам" "Сниму" выглядкли хорошо, я установил для их названий ширину 80px.
.form-radios label {
width:80px;
}
Label не обязательно должен быть выделен жырным шрифтом. Можно указать ему font-weight:normal;
Если у вас есть подписи(описание) к полям, лучше сделать их немного тусклее чем названия полей, это делается тут
.form-item .description{
color: #999;
}
Не бойтесь заклювать элементы в группы. Это тоже может сделать дизайн привлекательным.
Посмотрим на пример:
Для оформления групппы нужно указать стиль рамки
fieldset{
border: 1px solid #d9d9d9;
}
и стиль названия группы полей. Можно его их тусклее (например, color:#888;)
fieldset legend {
color:#888;
font-weight: normal;
padding: 0 5px;
}
Форма смотриться и читается хорошо, если на ней визуально выделено самое важное
Для более детального оформления страницы редактирования и добавления Node в темах для Drupal давате рассмотрим исходный код страницы редактирования и изучим, какие элементы верстки и какие артибуты нам для работы предоставляет Drupal.
Каждый элемент формы окружен <дивом> с классом "form-item" и унмкальным ID:
<div class="form-item" id="тут-id-элемента">.
Внутри есть <label> без атрибутов, в нем название поля и еще элемент формы (text, checkbox, textarea, select в зависимости от ваших настроек при создании полей) с классом "form-типэлемента" и уникальным ID.
<div class="form-item" id="edit-field-advert-region-value-wrapper">
<label for="edit-field-advert-region-value">
Район:<span class="form-required" title="Обязательное поле">*</span>
</label>
<select class="form-select required" id="edit-field-advert-region-value">
</div>
Вы всегда можете обратиться к любому элементу формы с помощью уникальных ID, которые предоставлены в теме Drupal.
Еще по теме оформления страницы редактирования и добавления Node могу посоветовать несколько полезных модулей:
- Node form columns - позволяет разбить форму Node на две колонки и футер? также модуль позволяет скрыть ненужные вам настройки ноды, например, "Настройку публикации", и т.п .
- Conditional fields - позволяет показывать и скрывать поля CCK при определенном выборе в других полях на форме.
