Оформление страницы редактирования и добавления Node

Оформление страницы редактирования и добавления Node

При создании тем для 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;
}
.form-required {

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.


Источник: http://drupaldecor.com

Добавить комментарий:
Имя:
E-mail:
2022 © Обсуждение Joomla и других CMS-систем управления сайтами  Правила | О проекте | Обратная связь