Главная › Верстка

Статьи по теме: Верстка

Верстаем под drupal. Часть 2: Формы

11 марта - 25 недель 4 дня назад  |

С темизацией форм в drupal не очень всё хорошо. Например, расположить элементы какой-то формы в таблице для удобства тут нельзя. Вернее можно конечно используя в объвлении формы или в hook для неё параметры #suffix и #prefix, но это весьма неудобно. Поэтому лучше, конечно, сразу верстать в общем для drupal стиле. Ниже я покажу как примерно это всё выглядит.

В общем случае html формы выглядит примерно так:

<form>
  <div class="form-item">...</div>
  <div class="form-item">...</div>
  <div class="form-item">...</div>
  <input type="submit" id="edit-submit" class="form-submit" />
</form>

Т.е. все элементы формы (кроме кнопок) обрамляются дивами с классом form-item. Ниже привожу примеры таких элементов формы.

Строка для ввода текста. (<input type=»text» />)

<div class="form-item" id="edit-title-wrapper">
<label for="edit-title">Title:</label>
<input type="text" id="edit-title" class="form-text" />
</div>

Тут и далее id для элементов формы уникален. Поэтому если для какого-то элемента формы по любому надо прописать свои специфические стили, то можно для этого элемента добавить свой уникальный id. А программист в стилях уже заменит его на нужный id. Причём это касается и id для div.form-item и для самого элемента формы (input, select, textarea…)

Верстаем под drupal. Часть 1: основные элементы

11 марта - 25 недель 4 дня назад  |

Из-за некоторой специфики друпаля и необходимости быстро делать проекты и не тратить лишнее время на переделывание стандартных выводов некоторых элементов в drupal мы выставляем некоторые требования к вёрстке. Т.е. стандартные элементы сайта должны быть свёрстаны в стандартном для друпаля виде, что бы нам не надо было переделывать вывод этих элементов.

Меню

<div class="mymenuclass">
  <ul>
    <li class="leaf first"><a href="#">My account</a></li>
    <li class="expanded active-trail"><a href="#">Create content</a>
      <ul class="menu">
        <li class="leaf first active-trail"><a href="#" class="active">Page</a></li> <!-- текущая страница -->
        <li class="leaf last"><a href="#">Story</a></li>
      </ul>
    </li>
    <li class="collapsed"><a href="#">Administer</a></li>
    <li class="leaf last"><a href="#">Log out</a></li>
  </ul>
</div>

Лучше стараться даже ul меню обернуть еще в div и в css обращаться через него. Типа такого:

.mymenuclass {}
.mymenuclass UL{}
.mymenuclass UL LI{}
.mymenuclass UL LI A{}
.mymenuclass UL LI A:hover{}
.mymenuclass UL LI.active-trail {}
.mymenuclass UL LI.active-trail A{}

Пэйджер

<ul class="pager"><li class="pager-first first"><a href="#" class="active">Первая</a></li>
  <li class="pager-previous"><a href="#" class="active">предыдущая</a></li>
  <li class="pager-item"><a href="#" class="active">1</a></li>
  <li class="pager-current">2</li>
  <li class="pager-item"><a href="#" class="active">3</a></li>
  <li class="pager-next"><a href="#" class="active">следующая</a></li>
  <li class="pager-last last"><a href="#" class="active">последняя</a></li>
</ul>

Ищейка