Создание чистого CSS-шаблона для Joomla 1.5 — часть 2.2

Предыдущие статьи:
Создаем шаблон Joomlа по стандартам — часть 1
Создаем шаблон Joomlа по стандартам — часть 1 (продолжение)
Создание чистого CSS-шаблона для Joomla 1.5 — часть 2.1

CSS для Joomla

Хотя Joomla 1.5 имеет функциональность для переопределения с помощью шаблонов того, что отображается ядром, ее вывод по умолчанию все еще использует множество таблиц для отображения контента в основном теле страницы. Наряду с этими таблицами, для изменения стилей страницы дизайнеру доступны некоторые заранее заданные CSS-классы. По результатам небольшого исследования, проведенного членами сообщества, мы составили таблицу, которая содержит текущий перечень этих классов. Обратите внимание, что список не содержит базовые элементы страниц, такие как H1, H2, p, ul, a, form и т.д.

CSS-стили, унаследованные в версии 1.5 от версии 1.0

article_separator adminform author bannerfooter bannergroup bannerheader banneritem blog blog_more blogsection breadcrumbs button buttonheading clr componentheading content_email content_rating content_vote contentdescription contentheading contentpagetitlw

contentpane contentpaneopen contenttoc createdate created-date date input inputbox intro latestnews loclink mainlevel message metadata modifydate module moduletable mosimage mosimage_caption mostread newsfeed

outline pagenav pagenav_next pagenav_prev pagenavbar pagenavcounter pathway pollstableborder read search searchintro sections sectiontable_footer sectiontableentry sectiontablefooter sectiontableheader small smalldark sublevel title wrapper

Многие классы, которые вы видите в этой таблице, имеют более специфичные CSS-стили. Обычно, более специфичное правило имеет преимущество перед менее специфичным правилом.

Например:

a {color:blue;} a:link {color:red;}
.contentheading {color:blue;}
div.contentheading {color:red;}

Цвет ссылки и цвет .contentheading будет красным, так как это правило более специфично (поскольку .contentheading находится внутри <div>)

В случае шаблонов Joomla вы часто увидите использование более специфичных правил. Это часто случается, когда класс применятся к таблице. Вот еще примеры:

.moduletable
table.moduletable

.moduletable это класс для блока <div>, в котором содержится модуль. table.moduletable всего лишь определяет стиль для таблицы с заданным классом class=«moduletable».
.moduletable определяет стиль не зависимо от того, к какому элементу этот класс относится.

a.contentpagetitle:link
.contentpagetitle a:link

a.contentpagetitle:link применяет стиль к любому тегу «a», являющемуся ссылкой, для которого задан класс .contentpagetitle.
.contentpagetitle a:link применяет стиль ко всем ссылкам внутри элемента, для которого задан класс .contentpagetitle.

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

Вот несколько ссылок на сайты, на которых специфичность обсуждается в деталях:

• www.htmldog.com/guides/cssadvanced/specificity
• www.meyerweb.com/eric/css/link-specificity.html
• www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

В настоящий момент наш шаблон использует несколько таблиц. Как было отмечено ранее, это замедляет отображение страниц и усложняет их дальнейшую модификацию. Для того, чтобы уменьшить количество таблиц, получаемых при выводе модулей, мы должны использовать параметр style при вызове jdoc:include.

Что необходимо знать

Joomla будет выводит конкретные, заранее заданные элементы, id и классы непосредственно в коде страницы. Этого можно избежать, если мы хотим перейти к дизайну с использованием CSS.

Модули и шаблоны

При вызове модуля в index.php можно использовать некоторые опции, чтобы задать, как он будет отображаться. Синтакс следующий:

<jdoc:include type="modules" name="LOCATION" style="OPTION" />

Параметр style не обязательный, его варианты задаются в templates/system/html/modules.php. В настоящий момент файл modules.php по умолчанию содержит следующие варианты:

OPTION=«table» (отображение по умолчанию) модули отображаются в колонке таблицы. Вот пример такого отображения:

 <table cellpadding="0" cellspacing="0" class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
 <?php if ($module->showtitle != 0) : ?>
  <tr>
   <th valign="top">
    <?php echo $module->title; ?>
   </th>
  </tr>
 <?php endif; ?>
  <tr>
   <td>
    <?php echo $module->content; ?>
   </td>
  </tr>
  </table>

OPTION=«horz» заставляет модули отображаться горизонтально. Каждый модуль выводится в ячейке таблицы. Пример отображения:

 <table cellspacing="1" cellpadding="0" border="0" width="100%">
  <tr>
   <td valign="top">
    <?php modChrome_table($module, $params, $attribs); ?>
   </td>
  </tr>
 </table>

OPTION=«xhtml» заставляет модули отображаться в блоках div. Пример отображения:

  <div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
  <?php if ($module->showtitle != 0) : ?>
   <h3><?php echo $module->title; ?></h3>
  <?php endif; ?>
   <?php echo $module->content; ?>
  </div>

OPTION=«rounded» заставляет модули отображаться в формате, который позволяет создавать растягиваемые скругленные углы. Если задан этот вариант style, то имя блока div изменяется с «moduletable» на «module». Пример отображения:

  <div class="module<?php echo $params->get('moduleclass_sfx'); ?>">
   <div>
    <div>
     <div>
      <?php if ($module->showtitle != 0) : ?>
       <h3><?php echo $module->title; ?></h3>
      <?php endif; ?>
     <?php echo $module->content; ?>
     </div>
    </div>
   </div>
  </div>

OPTION=«none» заставляет модули отображаться в «сыром» виде, не содержащем элементы или заголовки. Вот пример:

 echo $module->content;

Как вы видите, опции с использованием CSS (xhtml и rounded) более линейны в коде, что облегчает применение стилей к веб-страницам. Я не рекомендую использовать опции table (по умолчанию) или horz, если только это не абсолютно необходимо.

А вот теперь по-настоящему хороший момент!

Если вы посмотрите файл modules.php, вы увидите все варианты опций, которые существуют для модулей. Но можно легко создать свой вариант, это часть новых мощных возможностей шаблонизации в версии 1.5. Мы рассмотрим эту тему в нашей следующей главе о переопределении шаблонов.

Для разработки нашего шаблона мы зададим всем нашим модулям style=«xhtml»:

<body>
<div id="wrap">
  <div id="header">
    <div class="inside">
        <h1><?php echo $mainframe->getCfg('sitename');?></h1>
      <jdoc:include type="modules" name="top" style="xhtml" />
    </div>
  </div>
  <div id="sidebar">
    <div class="inside">
      <jdoc:include type="modules" name="left" style="xhtml" />
    </div>
  </div>
  <div id="content">
    <div class="inside">
      <jdoc:include type="module" name="breadcrumbs" style="none" />
      <jdoc:include type="component" />     </div>
  </div>
  <div id="sidebar-2">
    <div class="inside">
      <jdoc:include type="modules" name="right" style="xhtml" />
    </div>
  </div>
  <div id="footer">
    <div class="inside">
      <jdoc:include type="modules" name="footer" style="xhtml" />
    </div>
  </div>
<!--end of wrap-->
</body>

Заметьте, что мы не можем задавать эти стили в <jdoc:include type=«component» />, поскольку это не модуль.

Что необходимо знать

В версии 1.5 вывод модулей можно полностью кастомизировать, или вы можете использовать встроенный вывод. Все эти варианты называются «module chrome».

Мы также поместили заголовок сайта в теги <H1>. Это более семантически корректно и поможет с SEO. Еще мы уберем подложку из блоков div разметки.

А также добавим немного CSS для задания стилей рамок и подложки для заголовков модулей.

Наш CSS теперь выглядит следующим образом:

* {
margin:0;
padding:0;
}

h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin:0.5em 0;
}

li,dd {
margin-left:1em;
}

fieldset {
padding:.5em;
}

body {
font-size:76%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
margin:1em 0;
}

#wrap {
border:1px solid #999;
}

#header {
border-bottom:1px solid #999;
}

#footer {
border-top:1px solid #999;
}

a {
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

h1,.componentheading {
font-size:1.7em;
}

h2,.contentheading {
font-size:1.5em;
}

h3 {
font-size:1.3em;
}

h4 {
font-size:1.2em;
}

h5 {
font-size:1.1em;
}

h6 {
font-size:1em;
font-weight:700;
}

#footer,.small,.createdate,.modifydate,.mosimage_caption {
font:0.8em Arial,Helvetica,sans-serif;
color:#999;
}

.moduletable {
margin-bottom:1em;
border:1px #CCC solid;
padding:0 10px;
}

.moduletable h3 {
background:#666;
color:#fff;
text-align:center;
font-size:1.1em;
margin:0 -10px 0.5em;
padding:0.25em 0;
}

Примечание
Некоторые меню при установке по умолчанию имеют суффикс _menu в свойствах модуля. Для того, чтобы все работало правильно, я удалил этот параметр.

CSS с текстом теперь выдает следующий результат: Базовый шаблон с использованием стилей для заголовков модулей

Продолжение здесь