Требование к верстке под Drupal 7

published 04 December 2011

Классы у тега <body>

front - главная страница
logined-in - залогиный юзер
toolbar - включенный тулбар
not-front - не главная
page-node-47 - номер ноды
node-type-article - тип ноды

есть возможность вставить какие-то свои.

Toolbar

Дабы не портить админку, не допускать у элементов на сайте z-index более 500, иначе переписывать стили для toolbar

Исключение циклических ссылок

  • лого на главной не должно быть ссылкой
  • активные ссылки должны быть в теге < span class=”current”> или <span class=”active”> (то есть самих ссылок быть не должно)

Меню

  • меню представляет собой список
  • у активных ссылок класс active (li), если дочерние элементы активны, то active-trail
  • ссылки можно обернуть

<ul class="menu">
  <li class="first leaf item-227">
       <a href="/">Главная</a>
  </li>
  <li class="leaf item-481">
    <a href="/katalog">Каталог</a>
  </li>
  <li class="leaf item-509">
    <a href="/gde_kupit" title="">Где купить</a>
  </li>
  <li class="leaf item-523"><div class="inner-li">
    <a href="/uslugi">Услуги</a>
  </li>
  <li class="expanded item-384 active-trail">
    <a href="/o_kompanii">О компании</a>
      <ul class="menu">
        <li class="first leaf item-538">
          <span class="active">Новости</span>
        </li>
        <li class="last item-539"><div class="inner-li">
           <a href="/o_kompanii/nagrady" title="">Награды</a>
        </li>
      </ul>
   </li>
</ul>

Заголовки блоков

В заголовках блока используеться <div class=”h2”>

Собственно сам блок

<div id="block-single-blog-recent" class="block block-single-blog contextual-links-region">
    <div class="h2">Recent blog posts</div> <!--заголовок-->
     <div class="content">
       <!-- тут сам контент -->
    </div>  
</div>

Pager

<div class="item-list">
  <ul class="pager">
    <li class="pager-item first"><span class="previues">&nbsp; ← &nbsp;</span></li>
    <li class="pager-current"><span>1</span></li>
    <li class="pager-item"><a href="/node?page=1" title="Go to page 2" class="active">2</a></li>
    <li class="pager-item"><a href="/node?page=2" title="Go to page 3" class="active">3</a></li>
    <li class="pager-item"><a href="/node?page=3" title="Go to page 4" class="active">4</a></li>
    <li class="pager-item"><a href="/node?page=4" title="Go to page 5" class="active">5</a></li>
    <li class="pager-item"><a href="/node?page=5" title="Go to page 6" class="active">6</a></li>
    <li class="pager-next last"><a href="/node?page=1" class="active"> → </a></li>
  </ul>
</div>