Joomla

Создаем шаблон Joomlа по стандартам
Šaltinis: http://habrahabr.ru/blogs/joomla_cms/41213/
Весной 2008 года в блоге Compass Designs был опубликован неплохой цикл статей о создании
«чистого» шаблона для Joomla 1.5 (под «чистым» в данном случае понимается шаблон, сверстанный по
современным стандартам, т.е. без использования таблиц и с грамотным применением каскадных таблиц
стилей). Первые две части цикла содержат в основном общие объяснения терминологии, советы по
организации разработки на локальном хосте и т.д., поэтому я решил опубликовать переводы только
основных 4-х статей, которые собственно и содержат небольшое руководство по созданию шаблона. Итак,
сегодня первая часть, содержащая основные сведения о построении шаблонов Joomla.
Создание простого пустого шаблона
Для того, чтобы понять, из чего состоит шаблон, мы начнем с рассмотрения пустого шаблона Joomla.
Файлы шаблона
Шаблон Joomla содержит некоторый набор файлов и директорий. Шаблоны должны быть размещены в
директории /templates/ установленного дистрибутива Joomla, каждый в собственной поддиректории. Т.е.,
если у нас установлены два шаблона, то директория /template/ выглядит примерно так:
/templates/element
/templates/voodoo
Обратите внимание, что название директории для шаблона должно совпадать с названием этого шаблона,
как в данном случае «element» и «voodoo». Как правило, названия чувствительны к регистру букв и не
должны содержать пробелы. Внутри директории шаблона находятся два ключевых файла:
/element/templateDetails.xml
/element/index.php
Имена этих файлов и их расположение должны быть в точности такими, поскольку именно так они
вызываются ядром Joomla.
Первый из них — это XML-файл шаблона
templateDetails.xml
Это файл мета-данных в XML-формате, сообщающий Joomla, какие другие файлы, включая файлы
изображений, нужны для отображения страницы, которая использует данный шаблон. Обратите внимание
на букву «D» в верхнем регистре. Также он сожержит информацию об авторе и копирайте. И наконец, он
используется при инсталляции шаблона в административном интерфейсе.
Второй файл — это основной движок шаблона:

index.php
Этот файл является самым важным. Он определяет визуальное расположение элементов сайта и сообщает
Joomla CMS, куда поместить различные компоненты и модули. Этот файл является комбинацией PHP и
(X)HTML.
Практически во всех шаблонах используются дополнительные файлы. Общепринято (хотя это и не является
требованием ядра) называть и размещать эти файлы следующим образом:
/element/template_thumbnail.png
/element/css/template.css
/element/images/logo.png
Это просто примеры. Ниже приведено описание каждого файла:
/element/template_thumbnail.png
Скриншот шаблона (обычно уменьшенный до 140 пикселей в ширину и 90 пикселей в высоту). После
Pasidaryk svetainę pats su Joomla - www. J OOM L A1 2 3. lt
установки шаблона, этот скриншот можно увидеть с помощью функции «Preview Image» в разделе
«Template Manager» административного интерфейса, а также в модуле выбора шаблона оформления в
публичной части (если этот модуль задействован).
/element/css/template.css
Таблица стилей шаблона. Название директории устанавливается произвольно, но вы должны указать, путь
к этому файлу в index.php. Название файла тоже может быть любым. Обычно применяется указанные выше
название файла, но ниже вы увидите, что есть некоторые преимущества и у использования дополнительных
CSS-файлов.
/element/images/logo.png
Любые изображения, включенные в шаблон. Опять же, из организационных соображений, большинство

разработчиков размещают их в директории images. Мы указали картинку с названием logo.png в качестве
примера.
templateDetails.xml
templateDetails.xml должен содержать перечень всех файлов, содержащихся в шаблоне. Также он включает
информацию об авторе и копирайте. Часть этой информации можно увидеть в менеджере шаблонов в
административном интерфейсе Joomla. Ниже приведен пример XML-файла:
<?xml version="1.0" encoding="utf-8"?>

<install version="1.5" type="template">
<name>TemplateTutorial15</name>
<creationDate>August 2007</creationDate>
<author>Barrie North</author>
<copyright>GPL</copyright>
<authorEmail> compassdesigns@gmail.comThis e-mail address is being protected from spambots, you need JavaScript
enabled to view it </authorEmail>
<authorUrl>www.compassdesigns.net</authorUrl>
<version>1.0</version>
<description>First example template for Chapter 9 of the Joomla Book</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>js/somejsfile.js</filename>
<filename>images/threecol-l.gif</filename>
<filename>images/threecol-r.gif</filename>
<filename>css/customize.css</filename>
<filename>css/layout.css</filename>
<filename>css/template_css.css</filename>
</files>
<positions>
<position>user1</position>
<position>top</position>
<position>left</position>
<position>banner</position>
<position>right</position>
<position>footer</position>
</positions>
<params>
<param name="colorVariation" type="list" default="white" label="Color Variation" description="Color variation to use">
<option value="blue">Blue</option>
<option value="red">Red</option>
</param>
</params>
</install>
Поясним отдельные строки:
<install version="1.5" type="template">

Содержимое XML-документа — это инструкции для инсталлятора в административном интерфейсе Joomla.
Опция type=«template» сообщает инсталлятору, что мы устанавливаем шаблон, предназначенный для
Joomla версии 1.5.
<name>TemplateTutorial15</name>
Определяет название шаблона. Это имя также будет использовано при создании поддиректории шаблона в
директории templates. Если вы устанавливаете шаблон вручную, то вы должны создать поддиректорию с
названием, идентичным названию шаблона.
<creationDate>August 2007</creationDate>
Дата создания шаблона. Это поле задается в свободном формате и может быть любой строкой типа «May
2005», «08-June-1978», «01/01/2004» и т.д.
<author>Barrie North</author>
Имя автора шаблона (вероятно, ваше имя).
<copyright>GPL</copyright>
Информация о копирайте. Руководство по лицензированию для разработчиков и дизайнеров вы можете

найти в форумах Joomla.
<authorEmail>author@somedomain.com</authorEmail>
E-mail для связи с автором шаблона.
<authorUrl>www.compassdesigns.net</authorUrl>
Адрес сайта автора.
<version>1.0</version>
Версия шаблона.
<files></files>
Различные файлы, используемые в шаблоне.
Файлы, используемые в шаблоне, заключаются в теги <filename>:
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>js/somejsfile.js</filename>
<filename>images/threecol-l.gif</filename>
<filename>images/threecol-r.gif</filename>
<filename>css/customize.css</filename>
<filename>css/layout.css</filename>
<filename>css/template_css.css</filename>
</files>
Секция «files» содержит все основные файлы типа PHP-скриптов или изображений для превью шаблона.
Каждый файл перечисляется в этой секции внутри тегов <filename> и </filename>. Также здесь
указываются дополнительные файлы, например JavaScript-файлы, используемые в шаблоне.
Файлы картинок, используемых в шаблоне, также перечисляются в секции «files». Опять же, каждый файл
заключается в теги <filename> и </filename>. Пути к файлам указываеются относительно корневой
директории шаблона. Например, если шаблон находится в директории 'YourTemplate', а все картинки
находстя в поддиректории 'images', то правильный путь к файлу будет:
<filename>images/my_image.jpg</filename>

Наконец, в секции files перечисляются все файлы стилей, используемые в шаблоне. И снова, имя файла
заключается в теги <filename> и </filename>, а путь файла указывается относительно корневой папки
шаблона.
<positions></positions>
Позиции модулей, используемые в шаблоне.
<params></params>
Описывает параметры, которые могут задаваться для различных функций шаблона, например, для
изменения его цвета.
index.php
Чем на самом деле является файл index.php? Это комбинация (X)HTML и PHP, которая определяет все
необходимое для отображения элементов страницы.
Сначала посмотрим на элемент, который крайне важен для создания валидных шаблонов — DOCTYPE в
верхней части файла index.php. Этот фрагмент кода отображается в верхней части всех веб-страниц. На
страницах нашего шаблона мы видим следующее:
<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
Первое строчка на PHP предназначена просто для того, чтобы убедиться, что к файлу не обращаются
напрямую, из соображений безопасности.
DOCTYPE веб-страницы — это один из фундаментальных параметров, на основании которого браузер

решает, как ему отображать эту страницу, в частности, как браузеру интерпретировать CSS. Для лучшего
понимания приведем здесь хорошую цитату с сайта alistapart.com:
[Информация на сайте W3C о DOCTYPE] составлена гиками для гиков. И когда я говорю «гики», я не имею в
виду обычных профессионалов Веб, таких как я или вы. Я имею в виду тех гиков, которые заставляют нас
выглядеть как Бабушку в тот день, когда Она Впервые Получила E-mail.
В любом случае, вы можете использовать разные DOCTYPE. По существу, DOCTYPE говорит браузеру, как
интерпретировать страницу. С самого начала, когда появился Веб, разные браузеры имели разные уровни
поддержки CSS. Так, например, Internet Explorer не поймет команду «min-width», используемую для
установки минимальной ширины страницы. Для того, чтобы продублировать эффект, вам придется
использовать «хаки» в CSS.
Некоторые говорят, что обработка XHTML как text/html должна считаться «вредной». Если вы
действительно понимаете это утверждение, то вы находитесь далеко за пределами этого руководства. Вы
можете прочитать больше на эту тему по адресу hixie.ch/advocacy/xhtml. «Strict» означает, что HTML (или
XHTML) должен интерпретироваться в точности по стандартам. А «Transitional» в DOCTYPE означает, что на
странице дозволены определенные отступления от стандартов.
Чтобы усложнить картину, добавим, что существует еще так называемый режим «quirks» (специальных
ухищрений). Если DOCTYPE указан неверно, с неправильной датой, или вообще не указан, браузер
переходит в режим «quirks». На самом деле, это попытка обеспечения обратной совместимости, так,
например, Internet Explorer 6 будет интерпретировать страницу так, как это делал бы IE4.
К сожалению, люди иногда совершенно случайно переходят в режим «quirks». Обычно это происходит по
двум причинам:
• Они используют декларацию DOCTYPE, копируя ее непосредственно с сайта W3C, вследствие чего
конец ссылки выглядит как DTD/xhtml1-strict.dtd, в то время как это относительная ссылка на
сервере W3C. Вам нужно указывать путь полностью, как в примере, приведенном выше
• Фирма Microsoft разработала свой IE6 так, чтобы он выдавал валидные страницы, пребывая при
этом в режиме «quirks». Это обычно случается, когда «xml declaration» указывется до DOCTYPE.

Далее указывается следующее XML-выражение (после DOCTYPE):
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>" >
Пояснения насчет режима «quirks» в IE очень важны. В этой статье мы разрабатываем шаблон для IE6+,
следовательно мы должны быть уверены, что он работает в стандартном режиме. Это минимизирует
необходимость хаков, которые нам придется позже применить.
ПРИМЕЧАНИЕ
Создание страниц, соответствующих стандартам, когда вы видите «valid xhtml» в нижней части страницы,
не означает в действительности трудоемкой верстки или использования малопонятных тегов. Это просто
означает, что разрабатываемый вами код, соответствует заявленному DOCTYPE, и ничего более.
Разработка сайта по стандартам может быть описана одной фразой как «говори, что ты делаешь, а затем
делай то, что говоришь».
Ниже приведены несколько ссылок, которые помогут вам разобраться с параметром DOCTYPE и режимом
«quirks»:
o www.quirksmode.org/css/quirksmode.html
o www.alistapart.com/stories/doctype
o www.w3.org/QA/2002/04/Web-Quality
o http://forum.joomla.org/index.php/topic,7537.0.html
o http://forum.joomla.org/index.php/topic,6048.0.html
Что еще есть в файле index.php?

Посмотрите сначала на структуру заголовка. Мы хотим быть минималистичны, насколько это возможно, но
при этом иметь все необходимое для создания работающего сайта. Мы используем следующий заголовок:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>
Что все это означает?
Мы уже рассказывали о значении DOCTYPE в файле index.php. Фрагмент
<?php echo $this->language; ?>

извлекает установленный язык из глобальной конфигурации.
Следующий фрагмент включает дополнительную информацию для заголовка:
Это заголовочная информация, которая задана в глобальной конфигурации. Она включает в себя
следующие теги (в инсталляции по умолчанию):
<title>Welcome to the Frontpage</title>

<meta name="description" content="Joomla! - the dynamic portal engine and content management system" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="joomla, Joomla" />
<link href="/component/content/?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/component/content/?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<script type="text/javascript" src="http://localhost/Joomla-1.5RC2/media/system/js/mootools.js"></script>
<script type="text/javascript" src="http://localhost/Joomla-1.5RC2/media/system/js/caption.js"></script>
Большая часть этой информации генерируется «на лету» в соответствии с данными текущей страницы
(статьи). Она включает в себя ряд мета-тегов для favicon, адресов RSS-потоков и некоторых стандартных
JavaScript-файлов.
Последние строки в заголовке содержат ссылки на CSS-файлы шаблона:

Первые два файла — system.css and general.css содержат некоторые основные стили Joomla. Последний
содержит все стили шаблона и называется здесь template.css. Фрагмент кода PHP
<?php echo $this->template ?>
возвращает название текущего шаблона. Указание его именно таким образом, вместо реального пути,
делает код более переносимым. Когда вы создаете новый шаблон, вы можете просто скопировать его
(включая весь заголовок), не беспокоясь о внесении исправлений.
В заголовке может быть указано любое количество CSS-файлов, например, для условных стилей,
определяемых для разных браузеров. Например, следующий фрагмент определяет такую таблицу стилей
для IE6:

Следующий пример показывает, как могут использоваться параметры шаблона:
<link rel="stylesheet" href="/templates/<?php echo $this->template ?>/css/<?php echo $this->params->get('colorVariation');

?>.css" type="text/css" />
Пустое тело шаблона
Создание нашего первого шаблона будет очень-очень простым! Вы готовы?
Все, что необходимо, — это использовать выражения Joomla, которые добавят содержимое всех модулей в
основное тело страницы (mainbody):
<body>
<?php echo $mainframe->getCfg('sitename');?><br />
<jdoc:include type="module" name="breadcrumbs" />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />
</body>
В настоящий момент наш сайт не вылядит особенно впечатляюще (см. иллюстрацию)
Шаблон содержит следующие элементы, размещенные в логическом порядке:

• название сайта
• верхний модуль
• левые модули
• основной контент
• правые модули

Что необходимо знать
По существу, шаблон просто загружает модули Joomla и mainbody (компонент). Расположение элементов и
дизайн — это дело CSS, а не Joomla.
Нашей целью является как можно ближе приблизиться к семантической разметке. С точки зрения Web, это
означает, что страница может быть прочитана браузером, «пауком» поисковой системы или устройством
чтения с экрана. Семантическая разметка является краеугольным камнем доступности.
На самом деле, мы имеем здесь только некий потенциал для семантической разметки. Например, если
размещать случайные модули в случайных местах, то мы получим полную путаницу. Важным взглядом на
CMS-сайты является то, то шаблон ровно настолько хорош, насколько хорошо его наполнение контентом.
Именно поэтому так часто придираются к дизайнерам, пытаясь проверять их сайты на валидность.
Вы заметили, что мы впервые использовали набор команд, специфичных для Joomla:
<?php echo $mainframe->getCfg('sitename');?><br />

<jdoc:include type="module" name="breadcrumbs" />
PHP-выражение «echo» просто отображает строку из файла configuration.php. Здесь мы использовали

название сайта, но можно, например, отобразить и другие параметры:
The name of this site is <?php echo $mainframe->getCfg('sitename');?><br />

The administrator email is <?php echo $mainframe->getCfg('mailfrom');?><br />
This template is in the <?php echo $this->template?> directory<br />
The URL is <?php echo JURI::base();;?>
Выражение «jdoc» вставляет различные типы XHTML-вывода, как модулей, так и компонентов. Следующая
строка вставляет вывод компонента. Какой компонент будет использован, будет определяться ссылкой в
меню:
Достаточно интересно, вам кажется, что вывод компонента можно использовать несколько раз. Не уверен,
что вам захочется сделать это, но я говорю вам, что это может быть ошибкой.
Эта строка вставляет вывод всех модулей, заданных для места «right»:
На самом деле, полный синтаксис такой:
<jdoc:include type="modules" name="LOCATION" style="OPTION" />
Мы рассмотрим различные варианты опций для стилей в разделе о модулях позднее.
CSSTemplateTutorialStep1
В настоящий момент у нас получился совсем голый шаблон. Мы сделали инсталлируемый вариант,
который доступен в библиотеке Compass. Вы можете скачать его по ссылке:
www.compassdesigns.net/downloads/file/21-csstemplatetutorials1-4.html
Шаблон, созданный на шаге 1, состоит только из двух файлов, index.php и templateDetails.xml. Я убрал
ссылки на все остальные файлы, чтобы показать «голое» отображение, без CSS. На самом деле, это

хороший диагностический шаблон, который позволяет установить его и отслеживать ошибки, которые
возникают в компоненте или в модуле.
Использование CSS для создания бестабличного дизайна
Мы будем использовать чистый CSS при создании трехколоночного дизайна для шаблона Joomla. Этот
дизайн мы сделаем «резиновым». Существуют два типа дизайна веб-страницы: фиксированный и
растягиваемый («резиновый»), они зависят от того, как вы управляете шириной страницы.
Ширина страницы — это серьезный вопрос, поскольку существует множество разрешений экрана, при
которых пользователи просматривают веб-сайты. И хотя этот процент уменьшается, все равно около 17%
[примечание переводчика: видимо, на момент написания статьи] пользователей используют разрешение
800х600 пикселей. Основная часть пользователей — 79% используют 1024х768 и выше. Создание
«резинового» дизайна означает, что наиболее важная часть страницы не будет узенькой колонкой при
разрешении 1024, и в то же время будет видна на меньших по размеру мониторах.
В традиционном дизайне для разметки страницы используются таблицы. Они удобны, если вы хотите просто
установить ширину колонок в процентах, но они имеют ряд недостатков. Например, при использовании
таблиц сильно возрастает объем кода по сравнению с CSS-дизайном. Это приводит к увеличению времени
загрузки страниц (то, что пользователи не любят) и худшей их индексации в поисковых системах. Объем
кода увеличивается примерно в два раза, причем не только за счет HTML-разметки, но и за счет
специальных изображений в формате gif («spacer gifs»), используемых для фиксации ширины элементов
разметки.
Даже большие компании иногда попадают в ловушку таблиц, как это обсуждалось в недавних дебатах
насчет нового сайта disney.co.uk.
Существует множество проблем с сайтами, которые используют табличную разметку:

• Их трудно поддерживать. Для того, чтобы что-то изменить, вам необходимо понять, что делают все
эти табличные теги, такие как td/tr. В случае с CSS достаточно просмотреть несколько строк
• Контент не может быть упорядочен в соответствии с содержанием. Многие веб-пользователи не
видят страницы в браузере. Те, кто просматривает их текстовым браузером или устройством чтения
с экрана [примечание переводчика: screen reader — устройство, позволяющее переводить
содержимое в человеческую речь или шрифт Брайля для слепых], будут читать страницу от
верхнего левого до нижнего правого угла. Это означает, что первым делом они увидят верхнюю
часть страницы и левую колонку (для трехколоночного дизайна), еще до того, как дойдут до
средней колонки. CSS-дизайн позволяет упорядочить контент по содержанию, что означает
перераспределение кода и содержания страницы. Возможно, самый важный из посетителей — это
Google, который воспринимает страницу именно как устройство чтения с экрана.
Посмотрим на дизайн, использующий CSS. При использовании CSS вы можете позиционировать отдельные
элементы разными способами. Для быстрого ознакомления хорошим источником является Brainjar's CSS
Positioning.
Если вы новичок в CSS, вы можете прочитать одно из руководств по CSS для начинающих, например:
• Kevin Hale's An Overview of Current CSS Layout Techniques
• htmldog's CSS Beginner's Guide
• yourhtmlsource.com
В современном веб-дизайне используются каскадные таблицы стилей (CSS), а не таблицы, для

позиционирования элементов. Этому трудно научится, но это хорошая инвестиция. Существует множество
источников (не связанных с Joomla), которые помогут вам в этом.
Мы будем использовать свойство float для позиционирования контента. В первом приближении, шаблон
будет выглядеть примерно как на рисунке Базовый дизан шаблона. По-прежнему не очень впечатляет, но
мы рассмотрим подробнее, как реализованы его элементы.
CSS-стили здесь определены непосредственно в верхней части файла, чтобы легче было
продемонстрировать, что происходит, хотя обычно они должны быть в отдельном файле template.css.
Все содержится внутри элемента, названного #wrap. Он имеет «резиновую» ширину, которая изменяется от
760px до 960px.
На указанном рисунке для левой, средней и правой колонки заданы собственные элементы. Для каждого из
них заданы свойства float и значения ширины в процентах, которые в сумме дают 100%. Стиль «clear:both»
в подвале страницы говорит браузеру, чтобы он перестал применять свойство float и заставляет подвал
занимать всю ширину страницы. Когда мы будем создавать следующий шаблон, нам придется использовать
более продвинуту технику «clear».
Чтобы улучшить дизайн и дать немного свободного места для контента, нам нужно добавить промежутки
между колонками, обычно называемые «канавками». К сожалению, здесь есть одна проблема. Наверное, вы
знаете о том, что Internet Explorer не воспринимает CSS корректно. Загвоздка состоит в том, что он
высчитывает ширину по-другому. Мы можем решить эту проблему, не применяя свойства padding или
границы borders ни к чему, что имеет ширину. Чтобы получить нашу «канавку», мы добавляем еще один
элемент <div> внутри колонок.
В CSS мы добавляем:
.inside {padding:10px;}
В результате содержимое <body> для файла index.php будет следующим:
<body>
<div id="wrap">
<div id="header">
<div class="inside">
<?php echo $mainframe->getCfg('sitename');?>
</div>
</div>
<div id="sidebar">
</div>
</div>
<div id="content"> <div class="inside">
</div>
</div>
<div id="sidebar-2">
</div>
</div>
<div id="footer">
<div class="inside"> Powered by <a href="http://joomla.org">Joomla!</a>.
Valid <a href="http://validator.w3.org/check/referer">XHTML</a> and
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>. </div>
</div>
</div>

</body>
Наш файл template.css будет выглядеть следующим образом:
#wrap {
min-width:760px;
max-width:960px;
}
#content {
float:left;
width:60%;
overflow:hidden;
}
#footer {
clear:both;
}
.inside {
padding:10px;
}
#sidebar,#sidebar-2 {
float:left;
width:20%;
overflow:hidden;
}
Подсказка
Краткий CSS. Можно уменьшить количество CSS-кода, используя «стенографию». Одним из ее примеров
являются стили padding и margin, применяемые к элементу, когда
margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px;
можно заменить на
margin: 5px 10px;
Существуют краткие варианты для определения каждого из стилей. После того, как вы определили все
стили, заполните краткие версии и удалите все длинные. Например, для шрифтов синтаксис следующий:
font: font-size |font-style | font-variant | font-weight | line-height | font-family
Т.е. вместо того, чтобы использовать:
font-size:1em;
font-family:Arial,Helvetica,sans-serif;
font-style:italic;
font-weight:bold;
line-height:1.3em;
напишите так:
font:bold 1em/1.3em Arial,Helvetica,sans-serif italic;
Прочитать дополнительную информацию можно во «Введении в краткие свойства CSS»:

home.no.net/junjun/html/shorthand.html.
Наш простой дизайн — это хороший наглядный пример для изучения того, как использовать CSS с Joomla,
поскольку он демонстрирует два преимущества CSS перед табличными вариантами дизайна: меньшее
количество кода и простоту поддержки. Однако, он не является упорядоченным по содержанию. Для этого
нам нужно использовать более продвинутый дизайн, так называемый «вложенный float». Дизайн,
упорядоченный по содержанию, более пригоден для SEO нежели те варианты, когда важный контент
слишком поздно появляется в коде. Если смотреть с точки зрения сайта на Joomla, важным контентом
является все то, что предоставляется компонентом Jommla.
CSS по умолчанию
До сих пор мы рассматривали CSS только с точки зрения разметки, которая формирует плоскую страницу.
Давайте, добавим следующее:
body {
text-align:center;
}
#wrap {
min-width:760px;
max-width:960px;
width:auto !important;
text-align:left;
margin:0 auto;
}

#content {
float:left;
width:60%;
overflow:hidden;
}
#footer {
clear:both;
}
.inside {
padding:10px;
}
#sidebar,#sidebar-2 {
float:left;
width:20%;
overflow:hidden;
}
Мы выровняли страницу по центру, используя маленький хак. Это необходимо, поскольку Internet Explorer
интерпретирует CSS неправильно. Для браузера, который соответствует стандартам, вам было бы
достаточно сказать «margin:0 10%;», чтобы отцентировать страницу, однако IE не поймет этого, и мы
центрируем «текст» для всей страницы, а затем выравниваем его снова влево в каждой из колонок.
Для того, чтобы «отпраздновать» появление поддержки минимальной/максимальной ширины в IE7 (которой
не имеет IE6), мы можеем добавить соответствющие свойства. Но необходимо использовать небольшой хак,
поскольку IE6 этих свойств не поймет. Он проигнорирует выражение !important и отобразит старую ширину
960px.
Замечание:
Может показаться странным, что мы определяем ширину наших колонок в процентах, а затем помещаем
туда блоки div фиксированной ширины, однако таким образом мы добиваемся следующих вещей:
• «Резиновые» колонки внутри фиксированного контейнера делают шаблон очень гибким. Если мы
добавим кнопки, изменяющие ширину, нам нужно будет изменить только одно число.
• Если мы по-прежнему имеем максимальную ширину, так почему бы не сделать дизайн «совсем
резиновым»? Дело в том, что многие программы просмотра веб-сайтов имеют слишком широкие
экраны. Исследование юзабилити говорит нам, что строки текста более 900px трудны для чтения,
поскольку глазам приходится проходить слишком долгий путь до следующей строки. Ограничение
«резиновости» делает сайт более удобным в использовании и доступным.
Также мы добавили новый стиль для колонок: «overflow:hidden». Это позволит странице «разбиваться»
более правильно при уменьшении ширины.
В начале нашего CSS мы зададим некоторые общие стили, которые обычно называют «глобальный ресет»
(«global reset»):
*{
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 и padding, а затем всем блоковым элементам задан
единый margin снизу. Это обеспечивает большую предсказуемость в поведении браузеров. Вы можете
прочитать больше о «глобальном ресете» на clagnut.com или leftjustified.net.
Размер шрифта установлен в 76%. Это попытка достижения большей предсказуемости размеров шрифтов в
разных браузерах. Все размеры шрифтов после этого указаны в «em». Это означает, что страницы будут
обладать большей доступностью, так как пользователь сможет изменять размеры шрифтов на свое
усмотрение. Эта тема обсуждается подробнее в «Эксперименте с текстом» на сайте The Noodle Incident
Оуэна Бриггса.
Если бы мы добавили цвет подложки для контейнеров заголовка, боковых панелей и контента, мы бы
увидели примерно то, что изображено на рисунке Базовый шаблон с текстом.
Обратите внимание, что боковые колонки не доходят до подвала. Это происходит потому, что они
растягиваются вниз по содержащемуся в них контенту, а в белых областях справа и слева этого контента в
колонках уже нет.
Если бы мы имели шаблон, в котором белый цвет фона используется для всех трех колонок, это не было бы
проблемой. Мы будем использовать именно этот подход и создадим прямоугольные блоки для модулей.
Если бы мы захотели сделать колонки равной высоты с заданным цветом, или чтобы они содержали
прямоугольные блоки, нам бы пришлось использовать изображение для фона, которое мы бы растягивали
по вертикали. Эта техника называется «ложные колонки» и описана Дугласом Боуменом и Ериком Майером.
CSS для Joomla
Хотя Joomla 1.5 имеет функциональность для переопределения с помощью шаблонов того, что
отображается ядром, ее вывод по умолчанию все еще использует множество таблиц для отображения
контента в основном теле страницы. Наряду с этими таблицами, для изменения стилей страницы дизайнеру
доступны некоторые заранее заданные CSS-классы. По результатам небольшого исследования,
проведенного членами сообщества, мы составили таблицу, которая содержит текущий перечень этих
классов. Обратите внимание, что список не содержит базовые элементы страниц, такие как H1, H2, p, ul, a,
form и т.д.
CSS-стили, унаследованные в версии 1.5 от версии 1.0
article_separator contentpane outline

adminform contentpaneopen pagenav
author contenttoc pagenav_next
bannerfooter createdate pagenav_prev
bannergroup created-date pagenavbar
bannerheader date pagenavcounter
banneritem input pathway
blog inputbox pollstableborder
blog_more intro read
blogsection latestnews search
breadcrumbs loclink searchintro
button mainlevel sections
buttonheading message sectiontable_footer
clr metadata sectiontableentry
componentheading modifydate sectiontablefooter
content_email module sectiontableheader
content_rating moduletable small
content_vote mosimage smalldark
contentdescription mosimage_caption sublevel
contentheading mostread title
contentpagetitlw newsfeed 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'); ?>">

<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
</div>
OPTION=«rounded» заставляет модули отображаться в формате, который позволяет создавать

растягиваемые скругленные углы. Если задан этот вариант style, то имя блока div изменяется с
«moduletable» на «module». Пример отображения:
<div class="module<?php echo $params->get('moduleclass_sfx'); ?>">

<div>
<div>
<div>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
</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">
<h1><?php echo $mainframe->getCfg('sitename');?></h1>
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
</div>
<div id="sidebar">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<div id="content">
<jdoc:include type="module" name="breadcrumbs" style="none" />
<jdoc:include type="component" /> </div>
</div>
<div id="sidebar-2">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div>
<div id="footer">
<jdoc:include type="modules" name="footer" style="xhtml" />
</div>
</div>

</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 с текстом теперь выдает следующий результат: Базовый шаблон с использованием стилей для
заголовков модулей
меню в шаблонах
Мы знаем, что существует множество опций, которые определяют способ отображения меню.
И снова, использование CSS-списков вместо таблиц приводит к уменьшению объема кода и более легкой
разметке. После того, как мы настроили отображение всех меню в виде списков, у нас остается всего 12
таблиц (мы увидим, как убрать остальные, используя новую функциональность переопределения вывода в
версии 1.5). Помните, что опция «list» (список) есть только в новой версии 1.5, а «flat list» (плоский список)
пришла из версии 1.0, и ее использование не рекомендуется.
Списки также более хороши, чем таблицы, потому, что текстовые браузеры, устройства чтения с экрана,
браузеры, не поддерживающие CSS или браузеры, в которых отключен CSS, а также поисковые роботы
получат более удобный доступ к вашему контенту.
Еще одно из преимуществ использования CSS для меню — это то, что существует множество примеров на
сайтах CSS-разработчиков. Посмотрите на любой из них и узнайте, как это можно использовать.
Веб-страница на maxdesign.com [примечание переводчика: судя по всему, сейчас на этом сайте уже нечто
другое] предлагает выбор из более 30 меню, и все из них используют идентичный код. Это называется
Listamatic. Нам нужно внести небольшие изменения в код, чтобы адаптировать эти меню для Joomla:
Изначально используется следующий код:
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="/ #" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a xhref="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
Это означает, что существует внешний <div>, называемый «navcontainer», а для <ul> задан id=«navlist».
Чтобы повторить этот эффект в Joomla, нам нужен еще более внешний <div>.
Мы можем сделать это, используя суффиксы модулей. Если вы вспомните, вывод модуля в стиле XHTML
выглядит следующим образом:
<div class="moduletable">
<h3>modChrome_xhtml</h3>
modChrome_xhtml
</div>
Если мы зададим суффикс модуля, он будет добавлен к классу moduletable, примерно так:
<div class="moduletablesuffix">
<h3>modChrome_xhtml</h3>
modChrome_xhtml
</div>
Так что, беря меню из Listamatic, вам нужно заменить в CSS стиль класса «navcontainer» на
«moduletablesuffix».

Суффиксы модулей в некоторой степени стирают грань между дизайном и администрированием сайта.
Одной из задач дальнейшего развития ядра Joomla является четкое разграничение этих ролей. Нас это
касается в том плане, что функциональность суффиксов модулей может быть удалена из версий, которые
последуют за 1.5.
Использование суффикса класса модуля удобно. Оно позволяет создавать различные цветные блоки,
изменяя только суффикс класса модуля.
Лучше всего всегда использовать маркированный или плоский список для отображения меню. Тогда вы
сможете использовать многие бесплатные источники CSS-дизайна, доступные в сети.
Для нашего сайта мы будем использовать список Марка Ньюхауза. Наш CSS будет следующим:
.moduletablemenu {
color:#333;
margin-bottom:1em;
padding:0;
}
.moduletablemenu h3 {
background:#666;
color:#fff;
text-align:center;
font-size:1.1em;
border-bottom:1px solid #fff;
margin:0;
padding:0.25em 0;
}
.moduletablemenu ul {
list-style:none;
margin:0;
padding:0;
}
.moduletablemenu li {
border-bottom:1px solid #ccc;
margin:0;
}
.moduletablemenu li a {
display:block;
border-left:10px solid #333;
border-right:10px solid #9D9D9D;
background-color:#666;
color:#fff;
padding:3px 5px 3px 0.5em;
}
html>body .moduletablemenu li a {
width:auto;
}
.moduletablemenu li a:hover,a#active_menu:link,a#active_menu:visited {
border-left:10px solid #1c64d1;
border-right:10px solid #5ba3e0;
background-color:#2586d7;
color:#fff;
}
После этого мы должны добавить суффикс модуля «menu» (без знака подчеркивания в данном случае) ко
всем модулям меню, к которым мы хотим применить эти стили. В итоге получится меню, которое выглядит,
как показано на рисунке: Базовый шаблон с заданными стилями для меню
Подсказка:
Если вы пытаетесь заставить какое-то меню работать, используйте следующий полезный совет: создайте
пустую инсталляцию Joomla и посмотрите на код, который образует mainmenu. Скопируйте этот код в HTML-
редактор (например, Dreamweaver). Замените все ссылки на "#", и после этого вы можете применять CSS-
правила до тех пор, пока не добьетесь нужного эффекта. Код для создания меню следующий:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>
<body>
<div class="moduletable">
<h3>Main Menu</h3>
<ul class="mainmenu">
<li id="current" class="item1 active"><a href="#">Home</a></li>
<li class="item2"><a href="#">Joomla! Overview</a></li>
<li class="item3"><a href="#">What's New in 1.5?</a></li>
<li class="item4"><a href="#">Joomla! License</a></li>
<li class="item5"><a href="#">More about Joomla!</a></li>
<li class="item6"><a href="#">FAQ</a></li>
<li class="item7"><a href="#">The News</a></li>
<li class="item8"><a href="#">Web Links</a></li>
<li class="item9"><a href="#">News Feeds</a></li>
</ul>
</div>
</body>
</html>
CSS специально вставлен прямо в HTML-код, чтобы было удобнее редактировать.
Прячем колонки
До сих пор мы подразумевали, что наш дизайн будет всегда содержать три колонки, не зависимо от того,
содержат ли они какой-то контент. С точки зрения шаблона Joomla, это не очень удобно. В статическом
сайте контент никогда не изменяется, но мы хотим предоставить администраторам сайта возможность
размещать свой контент в любом месте, где они захотят, и чтобы не нужно было при этом заботиться о
редактировании CSS-разметки. Нам нужна возможность «выключать» колонку автоматически или
«свертывать» ее, если она не содержит контента.
При разработке движка шаблонов в Joomla 1.5 было сделано множество улучшений. Процитируем
непосредственно блог разработчиков Joomla:
Изменения в системе шаблонов в Joomla 1.5 можно разбить на две категории. Прежде всего, есть изменения в том, как
делались раньше некоторые вещи в Joomla 1.0, например новый способ загрузки модулей, а во вторых, было
добавлено много новых функций, например, параметры шаблонов.
mosCountModules
Функция mosCountModules заменена на функцию $this->countModules и в нее добавлена поддержка условий. Это
позволяет разработчикам легко подсчитать общее количество модулей в различных позициях шаблона с помощью
одной строки кода, например, $this->countModules('user1 + user2') возвратит общеее количество модулей в позициях
user1 и user2.

Дополнительная информация доступна в форуме Joomla.
Таким образом, типовое использование countModules будет:
<?php if($this->countModules('condition')) : ?>

do something
<?php else : ?>
do something else
<?php endif; ?>
Существуют 4 возможных условия. В качестве примера, давайте подсчитаем количество модулей на

предыдущем рисунке. Мы должны вставить этот код куда-нибудь в index.php:
left=<?php echo $this->countModules('left');?><br />

left and right=<?php echo $this->countModules('left and right');?><br />
left or right=<?php echo $this->countModules('left or right');?><br />
left + right=<?php echo $this->countModules('left + right');?>
• countModules('left'). Возваращает 4; слева размещены 4 модуля.

• countModules('left and right'). Возвращает 1; один модуль присутствует и в левой и в правой позиции.
• countModules('left or right'). Возвращает 1; один модуль присутствует в левой или в правой позиции.
• countModules('left + right'). Возвращает 7; подсчитывает все модули в левой и правой позиции
В этой ситуации нам нужна функция, которая позволят подсчитать модули, присутствующие в определенной
позиции. Например, если нет контента, опубликованного в правой колонке, мы можем скорректировать
размеры колонки, чтобы заполнить это пространство.
Существует несколько способов сделать это. Мы можем вставить условное выражение в body, чтобы не
отображать контент, и определить различные стили для контента в зависимости от того, в какой колонке он
находится. Для максимального удобства я определил несколько условных выражение в теге head, чтобы
варьировать некоторые CSS-стили:
<?php
if($this->countModules('left and right') == 0) $contentwidth = "100";
if($this->countModules('left or right') == 1) $contentwidth = "80";
if($this->countModules('left and right') == 1) $contentwidth = "60";
?>
Итак считаем:
• Если ничего нет слева или справа, имеем 100%
• Если что-то есть слева или справа, имеем 80%
• Если что-то есть и слева и справа, имеем 60%
После этого нужно изменить div для контента в index.php следующим образом:
<div id="content<?php echo $contentwidth; ?>">
При этом изменим CSS-разметку следующим образом:
#content60 {float:left;width:60%;overflow:hidden;}
Условное выражение PHP должно быть прописано в head сразу после появления ссылки на файл
template.css. Это связано с тем, что когда встречаются два одинаковых правила CSS, будет выполняться
последнее из них. Это можно было бы сделать в похожем стиле, используя выражение if при импорте CSS-
файла.

Подсказка:
При решении проблем с условными выражениями полезно бывает вставить такую строчку кода в index.php,
чтобы отображать значение переменной:
Ширина колонки контента: <?php echo $contentwidth; ?>%
Мы уже на полпути, но нам еще нужно очистить контейнеры div, в которых содержатся колонки.
Прячем код модулей
При создании «свертываемых» колонок хорошей практикой будет добиваться того, чтобы модули не
генерировались, если для них нет контента. Если этого не сделать, страницы будут иметь пустые
<div></div>, которые могут привести к кросс-браузерным проблемам.
Чтобы спрятать пустые <div>, используется следующее выражение:
<?php if($this->countModules('left')) : ?>

<div id="sidebar">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<?php endif; ?>
При использовании этого кода, если ничего не должно быть опубликовано слева, то и <div id=«sidebar»>
тоже не будет отображаться.
С использованием этих техник для левой и правой колонки наш index.php будет выглядеть следующим
образом. Мы также добавли include для модуля breadcrumbs, который отображает текущую страницу и путь
к ней по сайту. Обратите внимание, что он теперь также должен быть включен в index.php и опубликован в
виде модуля.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<?php if($this->countModules('left and right') == 0) $contentwidth = "100"; if($this->countModules('left or right') == 1)
$contentwidth = "80"; if($this->countModules('left and right') == 1) $contentwidth = "60"; ?>
</head>
<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>
<?php endif; ?>
<div id="content<?php echo $contentwidth; ?>"> <div class="inside">
<jdoc:include type="module" name="breadcrumbs" style="none" />
<jdoc:include type="component" /> </div>
</div>
<?php if($this->countModules('right')) : ?>
<div id="sidebar-2"> <div class="inside">
<jdoc:include type="modules" name="right" style="xhtml" /> </div>
</div>
<?php endif; ?>
<?php if($this->countModules('footer')) : ?>
<div id="footer"> <div class="inside">
<jdoc:include type="modules" name="footer" style="xhtml" /> </div>
</div>
<?php endif; ?>

</body>
</html>
Такие элементы, как колонки или позиции для модулей, могут быть скрыты (или свернуты), когда для них
нет контента. Это делаеся с помощью условных выражений PHP, которые свящываются с различными CSS-
стилями.
Я бы порекомендоавл немного другой способ отображения подвала. В том стиле, который

продемонстрирован здесь, он жестко прописан в файле index.php, что затрудяет внесение изменений. В
настоящий момент модуль «footer» в админстративном интерфейсе показывает копирайт Joomla и не может
быть легко изменен. Имеет смысл создать свой (X)HTML модуль, расположенный в позиции «footer», так,
чтобы адмнистратор сайта, мог его легко изменять. Если вы хотите отобразить свой собственный подвал, вы
просто отключаете отображение этого модуля и создаете свой модуль custom html на том языке, на котором
захотите.
В данном случае мы заменяем
<jdoc:include type="modules" name="footer" style="xhtml" />
на
<jdoc:include type="modules" name="bottom" style="xhtml" />
Мы также должны помнить, что нужно добавить эту позицию в файл templateDetails.xml.
Подсказка:
Есть ряд имен, связанных с модулями в Joomla: banner, left, right, user1, footer и т.д. Важно понимать, что
эти имена вовсе не отвечают за определенное местоположение. Вы можете разместить их в месте, которое
соответствует по значению своему имени, но это не обязательно.
Этот базовый пример демонстрирует основные принципы создания шаблона Joomla.
Теперь у нас есть базовый, но уже функциональный шаблон. Был добавлен простой текстовый
контент, но самое важное — это то, что мы создали чистый CSS-дизайн со «сворачиваемыми»
колонками. Я сделал инсталлируемый шаблон, который вы можете найти в нашей библиотеке
[примечание переводчика: все шаблоны из данного руководства доступны для скачивания по
ссылке: www.compassdesigns.net/downloads/file/21-csstemplatetutorials1-4.html].

Создаем настоящий шаблон Joomla 1.5
Первое, что нам понадобится для старта, — это дизайн, который ляжет в основу нашего шаблона. Мы будем
использовать для наших целей дизайн, любезно предоставленный Кейси Ли — ведущим дизайнером из
Joomlashack. Он называется «Bold» и вы можете увидеть его на рисунке:
Нарезка дизайна
Следующий шаг нашего процесса — это то, что называют «нарезкой». Нам нужно использовать
графический редактор, чтобы создать набор небольших изображений для нашего шаблона. Важно
учитывать то, как элементы будут масштабироваться в случае необходимости. (Я предпочитаю использовать
для этих целей Fireworks, считая, что он более приспособлен для веб-дизайна, нежели Photoshop, который
более удобен для создания печатной продукции).
Определение мест для модулей
В этом шаблоне будет несколько специальных мест для модулей, немного отличающихся от тех, что
присутствуют в стандартной установке Joomla. Чтобы быть уверенным, что модули в процессе работы над
шаблоном установлены корректно, убедитесь в наличии следующих мест:
• User1 — для модуля поиска
• User2 — для верхнего меню
• Top — для топ-новости или пользовательского HTML-модуля
Ничего другого не должно публиковаться на этих местах.
Заголовок
В изображении заголовка есть размытые полосы, которые мы хотели бы сохранить, поэтому мы

устанавливаем это изображение фоном, а также определяем цвет фона. В этом случае заголовок будет
масштабироваться по вертикали при необходимочти, например, при изменени размера шрифтов. Нам нужно
также задать белый цвет для всего, что будет появляться на темном фоне.
Также мы используем фоновое изображение для формы поиска. Мы должны быть уверены, что стиль
применяется к конкретному элементу input, поэтому используем CSS-уточнение. Я также указал абсолютное
позиционирование внутри относительно позиционированного элемента, чтобы разместить форму поиска в
нужном месте. Изображение не будет масштабироваться при изменении размера шрифта, поскольку мы не
размножаем его (no-repeat). Также потребуются дополнительные картинки для верха и низа поля ввода —
это еще одно упражнение для вас!
#header {
color:#fff;
background:#212121 url(../images/header.png) no-repeat;
position:relative;
}
#header h1 {
font-family:Arial, Helvetica, sans-serif small-caps;
font-variant:small-caps;
font-stretch:expanded;
padding-left:20px;
}
#header input {
background:url(../images/search.png) no-repeat;
border:0;
height:22px;
width:168px;
font:1em Arial, Helvetica, sans-serif;
padding:2px;
}
#header .search {
position:absolute;
top:20px;
right:20px;
}
Я не стал делать графический логотип, использовав обычный текст. Причина — поисковая оптимизация,
поскольку поисковые системы не умеют «читать» изображения. Можно, конечно, использовать модную
подмену изображения, но я оставляю это в качестве упражнения на ваше усмотрение.
Наш заголовок теперь выглядит следующим образом:
Далее нам нужно применить технику, используемую для отображения фона в растягивающейся колонке, так
называемые «раздвижные двери».
Фон для колонок
Напоминаю, что если мы задаем фон для колонки, колонка не заполняется цветом до самого низа. Это
происходит потому, что элемент div (в нашем случае sidebar и sidebar-2) имеет высоту только по своему
содержимому, а не удлиняется до размеров содержащего его элемента.
Нам нужно использовать технику, называемую «раздвигающиеся ложные колонки», когда вы по сути
создаете два широких изображения, которые сдвигаются поверх друг друга. Нам нужно создать два новых
контейнера для этих фоновых изображний. Мы бы могли использовать только #wrap, но я добавил
дополнительный контейнер для иллюстрации.
Полное описание используемой техники вы можете прочитать в этих руководствах:

• alistapart.com/articles/fauxcolumns/
• www.communitymx.com/content/article.cfm?page=1&cid=AFC58
В нашем случае, максимальная ширина составляет 960px, поэтому мы начинаем с изображения такой
ширины. Затем экспортируем два куска (я использовал один кусок, показывая/скрывая соответствующие
боковые части), один с общей шириной 960px и фоном слева 192px, и второй с общей шириной 960px и
фоном справа шириной 192px.

Подсказка:
Левому изображению нужно задать белый фон, а правому прозрачный фон. Я изменял цвет фона в
процессе экспорта изображений из исходного файла.
Откуда берутся 192px? Это 20% от 960px, поскольку наши колонки имеют ширину 20%. Мы используем
свойство background-position для позиционирования фоновых изображений. Поскольку мы применяем
сжатый формат CSS, то это является частью свойства background:
#leftfauxcol {
background:url(../images/leftslidingcolumn.png) 20% 0;
}
#rightfauxcol {
background:url(../images/rightslidingcolumn.png) 80% 0;
}
В нашем index.php мы просто добавили контейнеры внутри #wrap:
<div id="wrap">
<div id="leftfauxcol">
<?php endif; ?>
<div id="rightfauxcol">
<?php endif; ?>
<div id="header">
Также нужно добавить условные выражения для закрывающих тегов div:

</div>

<?php endif; ?>
</div>

<?php endif; ?>
Нам также нужно добавить фон для #footer и #bottom, иначе будет отображаться фон колонок:
#footer {
background:#212121;
color:#fff;
text-align:right;
clear:both;
}
#bottom {
background:#333;
color:#666;
padding:10px 50px;
}
Нам нужно очистить float, чтобы плавающие контейнеры (ложные колонки) растягивались до низа
страницы. Традиционный способ — это использование свойства after. Однако, с выходом IE7, этот метод
уже не работает. Нам нужно обеспечить совместимость очистки float в IE6 и IE7, и вот здесь начинаются
проблемы.
Существуют несколько решений, мы будем исполозовать способ «Float почти для всего».
Таким образом, мы добавляем clear:both в #footer и добавляем свойства float в ложные колонки. Нужно
добавить следующие стили в условный CSS-файл, который применяется только для IE6:
#leftfauxcol,#rightfauxcol,#footer {
float:left;
width:100%;
}
Нам нужно добавить несколько условных выражений в область head нашего файла index.php:


Гибкие модули
В нашем дизайне изначально присутствует большой блок для модулей. Мы не знаем заранее, какой высоты
будет требуемый текст. Чтобы решить эту проблему, мы помещаем выражение jdoc:include в контейнер и
указываем для него фон такого же цвета, как фоновое изображение. Это тот же вариант, который мы
использовали для заголовка:
<?php if($this->countModules('top')) : ?>

<div id="top">
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
</div>
<?php else : ?>
<div id="top"> </div>
<?php endif; ?>
Обратите внимание, что мы также используем условное выражение, чтобы в том случае, когда для места
Top нет контента, оранжевая подложка не отображалась. Тогда здесь будет только пустой контейнер,
содержащий маленькую часть фонового изображения, с вертикальным отступом 20px. Это сделано чисто
для эстетики.
Потребуется использовать CSS-уточнение, чтобы переопределить стили moduletable, которые мы прописали

ранее:
#top {
background:#ea6800 url(../images/teaser.png) no-repeat;
padding:10px;
}
#top .moduletable h3 {
color:#fff;
background:none;
text-align:left;
font:2.5em Arial, Helvetica, sans-serif normal;
font-stretch:expanded;
margin:0;
padding:0;
}
#top .moduletable {
font:bold 1em/1.2 Tahoma,Arial, Helvetica, sans-serif;
color:#fff;
border:0;
margin:0;
padding:0;
}
Теперь сфокусируемся на оформлении текста.
Оформление текста
Многие ссылки должны быть белыми, поэтому мы определим этот цвет глобально, а затем изменим его для
центральной колонки:

a:link,a:visited {
text-decoration:underline;
color:#fff;
}
a:hover {
}
#content60 a:link,#content60 a:visited,#content80 a:link,#content80 a:visited,#content100 a:link,#content100 a:visited {

color:#000;
}
В дизайне присутствует стилизованная кнопка. Мы используем для нее тонкий фрагмент, размноженный по
горизонтали:
.button {
border:#000 solid 1px;
background:#fff url(../images/buttonbackground.png) repeat-x;
height:25px;
cursor:hand;
margin:4px 0;
padding:0 4px;
}
Для таблиц, таких как FAQ, мы можем добавить фон, применяя то же изображение, что и для подзаголовка.
Повторное использование будет вполне «тематичным», к тому же это дает экономию на загрузке картинки и
ускоряет отображение страницы.
sectiontableheader {
background:url(../images/teaser.png);
color:#fff;
font:1.2em bold Arial, Helvetica, sans-serif;
padding:5px;
}
Модули потребуют достаточно простого переопределения и уточнения свойств margin и padding:
.moduletable {
margin-bottom:1em;
color:#fff;
font-size:1.1em;
}
.moduletable h3 {
font:1.3em Tahoma,Arial,Helvetica,sans-serif;
background:#000;
color:#ccc;
text-align:left;
margin:0 -10px;
padding:5px 10px;
}
Меню, как обычно, требуют достаточного большого количества стилей CSS. Здесь мы постараемся сделать
их настолько простыми, насколько это возможно. Мы вырежем небольшую картинку, которая будет
включать в себя как буллет, так и подчеркивание. Обратите внимание, что применение стилей
«включается» с помощью присвоения суффикса модуля «menu» любому списку ссылок, который мы хотим
оформить таким образом:
.moduletablemenu {
margin-bottom:1em;
}
.moduletablemenu h3 {
font:1.3em Tahoma,Arial,Helvetica,sans-serif;
background:#000;
color:#ccc;
text-align:left;
margin:0 -10px;
padding:5px 10px;
}
.moduletablemenu ul {
list-style:none;
margin:5px 0;
}
.moduletablemenu li {
background:url(../images/leftmenu.png) bottom left no-repeat;
height:24px;
font:14px Tahoma,Arial, Helvetica, sans-serif;
margin:10px 0;
padding:0 0 0 10px;
}
.moduletablemenu a:link,.moduletablemenu a:visited {

color:#fff;
display:block;
padding-left:5px;
}
.moduletablemenu a:hover {
color:#fff;
background:#ADADAD;
}
Последнее — это меню из ярлыков в правой верхней части. Как приверженцы доступности, мы должны
настроить его так, чтобы ярлыки масштабировались при изменении размера шрифтов. К счастью,
существует техника, которая позволяет это сделать, фактически, это снова те же «раздвижные двери»,
которые мы использовали для наших колонок!
Мы также попытаемся сделать небольшую оптимизацию скорости загрузки шаблона и будем использовать
одно и то же изображение для левой и правой стороны «дверей», а также состояния «включено» или
«выключено». Это называется «использовать спрайты».
Код CSS не очень сложный, мы только должны настроить вертикальную позициию фонового изображения
для состояния «включено»:
.moduletabletabs {
font:bold 1em Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.moduletabletabs ul {
list-style:none;
float:right;
background:#212121;
width:100%;
margin:0;
padding:0;
}
.moduletabletabs li {
float:right;
background:url(../images/tabs.png) no-repeat 0 -4px;
margin:0;
padding:0 0 0 12px;
}

.moduletabletabs a:link,.moduletabletabs a:visited {
float:left;
display:block;
color:#000;
background:url(../images/tabs.png) no-repeat 100% -4px;
margin:0;
padding:7px 18px 5px 9px;
}
.moduletabletabs #current {
background:url(../images/tabs.png) no-repeat 0 -84px;
}
.moduletabletabs #current a {
color:#fff;
background:url(../images/tabs.png) no-repeat 100% -84px;
}
Нам также нужно присвоить суффикс «tabs» для модуля, который мы используем для данного меню.
Если вы посмотрите на исходный дизайн, вы заметите, что изначально на ярлыках присутствовали иконки.
Поскольку мы уже используем два фоновых изображения, одно для элемента списка li, а второе для ссылки,
нам понадобился бы третий элемент, для которого мы прописали бы иконку в качестве фона. Вы можете
сделать это с помощью элемента span, но это уже продвинутое CSS-джиу-джитсу.
Я оставляю это в качестве домашнего задания.
Последнее, что осталось, это обновить файл templateDetails.xml. Он должен содержать список всех файлов
и изображений, используемых в шаблоне, так, чтобы он мог быть правильно проинсталлирован в виде zip-
архива. Для версии Joomla 1.0.X существует много инструментов, которые могут сделать это автоматически,
но для версии Joomla 1.5, на момент написания статьи, таких инструментов еще не было.
Наш окончательный шаблон будет выглядеть следующим образом:

Создание рабочего шаблона Joomla — это в большей степени вопрос графического дизайна и манипуляций
с CSS, нежели какого-то специфического «знания Joomla».
CSSTemplateTutorialStep3
Итак, у нас есть шаблон, сделанный на основе дизайна. В нем добавлено простое оформление шрифтов, но
более важно то, что мы создали чистый CSS-шаблон с динамически убирающимися колонками и приятным
меню из ярлыков. Я сделал инсталлируемый шаблон, который вы можете найти в нашей библиотеке
[примечание переводчика: все шаблоны из данного руководства доступны для скачивания по ссылке:
www.compassdesigns.net/downloads/file/21-csstemplatetutorials1-4.html].
Теперь, когда все базовые вещи сделаны, можно начать исследование некоторых более продвинутых
функций, доступных в шаблонах для Joomla 1.5.
Продвинутые возможности шаблонов
Joomla 1.5 предлагает ряд продвинутых функций шаблонов, которые существненно расширяют их
возможности. Мы уже видели один из примеров в этом цикле статей — возможность создания «chrome»,
или кастомизированного отображения модулей.
Давайте теперь рассмотрим следующие функции:

• Параметры шаблонов
• Переопределения шаблонов
Параметры шаблонов
В Joomla 1.5 добавлена новая возможность — параметры для шаблона. Это позволяет вам присваивать
значения переменным, передаваемым шаблону, в административном интерфейсе.
Мы можем использовать относительно простой вариант использования параметра в нашем шаблоне. В

файле templateDetails.xml добавьте следующее:
<params>
<param name="template_width" type="list" default="fluid" label="Template Width" description="Width style of the
template">
<option value="fluid">Fluid with maximum and minimum</option>
<option value="medium">Medium</option>
<option value="small">Small</option>
</param>
</params>
Вам также понадобится файл params.ini в папке шаблона. Он может быть пустым, но он необходим Joomla
для сохранения ваших настроек. Например, INI-файл для примера, приведенного выше, мог бы выглядеть
следующим образом:
template_width=2
Вы должны выставить права доступа на запись для того, чтобы сервер мог сохранять значения параметров.
Также необходимо добавить этот файл в список файлов в templateDetails.xml.
В Менеджере Шаблонов вы увидите опции для параметра, как это показано на рисунке:

Мы видим, что это простой список с тремя вариантами выбора:
<param name="template_width" type="radio" default="0" label="Template Width" description="Change width setting of

template">
<option value="0">800x600</option>
<option value="1">1024x756</option>
<option value="2">fluid (min/max with FF and IE7, 80% with IE6)</option>
</param>
После этого мы изменяем тег body в index.php на следующий:
<body class="width_<?php echo $this->params->get('template_width'); ?>">
И добавляем следующие строки в CSS-файл:
body.width_0 div#wrap {
width:760px;
}
width:960px;
}
min-width:760px;
max-width:960px;
width:auto !important;
}
#wrap {
text-align:left;
margin:0 auto;
}
Все это дает нам три варианта: фиксированная узкая страница, фиксированная широкая страница и
растягивающаяся страница.
Использование параметров шаблона — это возможность предоставить администратору сайта гибкость при
настройке почти любых элементов шаблона: ширина, цвет и т.д., все это контролируется с помощью
условных выражений PHP, устанавливающих CSS-стили.
Переопределение шаблонов
Пожалуй, наиболее мощная новая возможность в Joomla 1.5 — это возможность легкого переопределения
вывода ядра. Это делается с помощью новых файлов вывода (файлов шаблона), которые соответствуют
макетам отображений (views) компонентов и модулей. Joomla проверяет каждый раз, существует ли
соответствующий файл в папке шаблона, и если он есть, использует его для вывода вместо стандартного.
Структура переопределения
Все макеты отображения и шаблоны ядра находятся в папке /tmpl/. Расположение немного отличается для
компонентов и для модулей, поскольку модули, по сути, имеют только одно отображение. Например:
modules/mod_newsflash/tmpl/
modules/mod_poll/tmpl/
components/com_login/views/login/tmpl/
components/com_content/views/section/tmpl/
Базовая структура для всех компонентов и модулей — это Отображение>Макет>Шаблон
Ниже в таблице показаны некоторые примеры. Обратите внимание, что модули имеют только одно
отображение.

Отображение Макет Шаблоны
blog_item.php
Category Blog.php
blog_links.php
Category default.php default_items.php
default.php
(Newsflash module) horz.php _item.php
vert.php
Обычно существуют несколько файлов шаблонов, отвечающих за определенный макет. У этих файлов есть
общепринятое наименование:
Наименование файла Описание Пример
layoutname.php Основной шаблон макета blog.php
blog_item.php
layoutname_templatename.php Дочерний шаблон макета, вызываемый из основного
blog_links.php
_templatename.php Общий шаблон макета, используемый в разных макетах _item.php
Переопределение модулей
Каждый модуль содержит новую папку с названием tmpl, в которой находятся его шаблоны. Внутри нее
находятся PHP-файлы, который отвечают за вывод. Например:
/modules/mod_newsflash/tmpl/default.php
/modules/mod_newsflash/tmpl/horiz.php
/modules/mod_newsflash/tmpl/vert.php
/modules/mod_newsflash/tmpl/_item.php
Первые три файла — это три макета модуля Newsflash, которые используются в зависимости от того, какие
выбраны опции у модуля, а файл _item.php — это общий шаблон макета, который используется всеми тремя
вариантами. Внутри этого файла мы видим следующее:
<?php // no direct access defined('_JEXEC') or die('Restricted access'); ?>

<?php if ($params->get('item_title')) : ?>
<table class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>">

<tr>
<td class="contentheading<?php echo $params->get( 'moduleclass_sfx' ); ?>" width="100%"><?php if ($params-
>get('link_titles') && $item->linkOn != '') : ?>
<a href="<?php echo $item->linkOn;?>" class="contentpagetitle<?php echo $params->get( 'moduleclass_sfx' ); ?>"> <?php
echo $item->title;?> </a>
<?php else : ?>
<?php echo $item->title; ?>
<?php endif; ?>
</td>
</tr>
</table>
<?php endif; ?>
<?php if (!$params->get('intro_only')) : echo $item->afterDisplayTitle; endif; ?>
<?php echo $item->beforeDisplayContent; ?>
<table class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>">
<tr>
<td valign="top" colspan="2"><?php echo $item->text; ?></td>
</tr>
</table>
<?php if (isset($item->linkOn) && $item->readmore) : echo '<a href="'.$item->linkOn.'">'.JText::_('Read more').'</a>'; endif;
?>

Мы можем изменить файл, убрав таблицы, чтобы сделать код более доступным:
<?php // no direct access defined('_JEXEC') or die('Restricted access'); ?>

<?php if ($params->get('item_title')) : ?>
<div class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>">

<div class="contentheading<?php echo $params->get( 'moduleclass_sfx' ); ?>">
<?php if ($params->get('link_titles') && $item->linkOn != '') : ?>
<a href="<?php echo $item->linkOn;?>" class="contentpagetitle<?php echo $params->get( 'moduleclass_sfx' ); ?>"> <?php
echo $item->title;?> </a>
<?php else : ?>
<?php echo $item->title; ?>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<?php if (!$params->get('intro_only')) : echo $item->afterDisplayTitle; endif; ?>
<?php echo $item->beforeDisplayContent; ?>
<div class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>"> <?php echo $item->text; ?>
</div>
<?php if (isset($item->linkOn) && $item->readmore) : echo '<a href="'.$item->linkOn.'">'.JText::_('Read more').'</a>'; endif;
?>
Новый файл должен быть помещен в папку шаблона, в подпапку html:
templates/templatetutorial15bold/html/mod_newsflash/_item.php
Мы убрали таблицы из модуля Newsflash, это было просто, не правда ли?
Переопределение компонентов
Компоненты работают примерно таким же образом, за исключением того, что существуют несколько
отображений, соответствующих многим компонентам.
Если мы посмотрим в папку com_content, то мы увидим подпапку views:
/components/com_content/views/
/components/com_content/views/archive
/components/com_content/views/article
/components/com_content/views/category
/components/com_content/views/section
Эти папки соответсвуют четырем возможным отображениям контента: archive, article, category и section.
Внутри каждого отображения мы найдем папку tmpl, в которой могут находиться несколько макетов.
Если мы посмотрим в папку category, мы увидим:
/components/com_content/views/category/blog.php
/components/com_content/views/category/blog_item.php
/components/com_content/views/category/blog_links.php
/components/com_content/views/category/default.php
/components/com_content/views/category/default_items.php
Обратите внимание, что в случае компонента com_content, макет default.php отвечает за стандартный
вариант, в котором статьи отображаются в виде ссылок.
Если мы откроем blog_item.php, мы увидим, что там сейчас используются таблицы. Если мы хотим
переопределить этот вывод, мы должны положить то, что нам нужно, в папку template/html, например:
templates/templatetutorial15bold/html/com_content/category/blog_item.php

Это относительно простой процесс — копирование и вставка отображений из папок /components/ и
/modules/ в папку templates/yourtemplate/html.
Функциональность переопределения предоставляет мощный механизм кастомизации сайта на Joomla с

помощью шаблонов. Вы можете создавать шаблоны вывода, орентированные на SEO, доступность или
конкретные нужды клиента.
Joomla 1.5 предлагает новые возможности для шаблонов, которые позволяют разработчикам полностью
управлять кодом и отображением веб-сайта на Joomla.
Бестабличная Joomla
Дистрибутив Joomla содержит шаблон Beez, который является рабочим примером переопределения
шаблонов. Команда Дизайна и Доступности создала полный набор переопределений, содержащихся в папке
html. Наш финальный пример — это шаблон, который использует эти переопределения, чтобы удалить все
таблицы из вывода Joomla.
Итак, у нас есть шаблон, сделанный на основе дизайна. В нем добавлено оформление шрифтов, но более
важно то, что мы создали чистый CSS-шаблон с динамически убирающимися колонками и приятным меню
из ярлыков. Затем мы переопределили вывод Joomla таким образом, чтобы в нем больше не использовались
таблицы. Я сделал инсталлируемый шаблон, который вы можете найти в нашей библиотеке [примечание
переводчика: все шаблоны из данного руководства доступны для скачивания по ссылке:
www.compassdesigns.net/downloads/file/21-csstemplatetutorials1-4.html].
Резюме
В этом цикле статей мы прошли через четыре примера шаблонов, постепенно усложняя их и добавляя
функции.
• Современные веб-сайты отделяют контент от отображения с помощью технологии, называемой
«Каскадные Таблицы Стилей» (CSS). В Joomla отображением контента управляет шаблон.
• При создании шаблона вам нужно проинсталлировать Joomla на сервер, чтобы вносить изменения и
обновлять отображение страниц.
• Создание валидного шаблона — это способ, а не цель. Идея заключается в том, чтобы сделать ваш
шаблон настолько доступным, насколько это возможно, для людей и поисковых систем, а не просто
для того, чтобы получить значок валидности.
• Самый базовый шаблон просто загружает модули Joomla и компонент mainbody. За расположение
элементов и дизайн отвечает CSS, а не Joomla.
• Современный веб-дизайн использует CSS вместо таблиц для позиционирования элементов. Это
непросто изучить, но это хорошая инвестиция. Существует множество ресурсов (кроме Joomla),
которые могут помочь вам в этом.
• Joomla отображает конкретные элементы, объекты и классы в коде веб-страницы. Это можно
предвидеть и использовать для изменения оформления с помощью CSS.
• В версии 1.5 вывод модулей можно полностью кастомизировать, либо вы можете использовать
предопределенный вывод. Все эти опции называются «module chrome».
• Лучше всегда использовать вывод меню в виде списка или в плоском виде. В результате вы можете
использовать массу доступных на Web ресурсов с уже готовыми стилями CSS для меню.
• Такие элементы, как колонки или места для модулей, могут быть спрятаны (или свернуты), когда
для них нет контента. Это делается с помощью условных выражений PHP, которые связаны с
определенным CSS-стилями.
• Создание рабочего шаблона Joomla — это в большей степени вопрос графического дизайна и
манипуляций с CSS, нежели какое-то специально «знание Joomla».
• Joomla 1.5 предоставляет новые возможности для шаблонов, которые позволяют разработчикам
полностью управлять кодом и отображением веб-сайта на Joomla.
Šaltinis: http://habrahabr.ru/blogs/joomla_cms/41213/

Joomla

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Joomla

Caricato da

Copyright:

Formati disponibili

Создаем шаблон Joomlа по стандартам

Создание простого пустого шаблона

Первый из них — это XML-файл шаблона

Второй файл — это основной движок шаблона:

Это просто примеры. Ниже приведено описание каждого файла:

Любые изображения, включенные в шаблон. Опять же, из организационных соображений, большинство

<?xml version="1.0" encoding="utf-8"?>

Поясним отдельные строки:

<install version="1.5" type="template">

Pasidaryk svetainę pats su Joomla - www. J OOM L A1 2 3. lt

Имя автора шаблона (вероятно, ваше имя).

Информация о копирайте. Руководство по лицензированию для разработчиков и дизайнеров вы можете

E-mail для связи с автором шаблона.

Адрес сайта автора.

Различные файлы, используемые в шаблоне.

Файлы, используемые в шаблоне, заключаются в теги <filename>:

Pasidaryk svetainę pats su Joomla - www. J OOM L A1 2 3. lt

Позиции модулей, используемые в шаблоне.

<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?>

DOCTYPE веб-страницы — это один из фундаментальных параметров, на основании которого браузер

Pasidaryk svetainę pats su Joomla - www. J OOM L A1 2 3. lt

Что еще есть в файле index.php?

<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?>

Что все это означает?

Мы уже рассказывали о значении DOCTYPE в файле index.php. Фрагмент

<?php echo $this->language; ?>

Следующий фрагмент включает дополнительную информацию для заголовка:

<jdoc:include type="head" />

<title>Welcome to the Frontpage</title>

Последние строки в заголовке содержат ссылки на CSS-файлы шаблона:

<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />

<?php echo $this->template ?>

<!--[if lte IE 6]>

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

<link rel="stylesheet" href="/templates/<?php echo $this->template ?>/css/<?php echo $this->params->get('colorVariation');

Пустое тело шаблона

Создание нашего первого шаблона будет очень-очень простым! Вы готовы?

В настоящий момент наш сайт не вылядит особенно впечатляюще (см. иллюстрацию)

Шаблон содержит следующие элементы, размещенные в логическом порядке:

Pasidaryk svetainę pats su Joomla - www. J OOM L A1 2 3. lt

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

<?php echo $mainframe->getCfg('sitename');?><br />

PHP-выражение «echo» просто отображает строку из файла configuration.php. Здесь мы использовали

The name of this site is <?php echo $mainframe->getCfg('sitename');?><br />

<jdoc:include type="component" />

<jdoc:include type="modules" name="right" />

На самом деле, полный синтаксис такой:

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

Мы рассмотрим различные варианты опций для стилей в разделе о модулях позднее.

Pasidaryk svetainę pats su Joomla - www. J OOM L A1 2 3. lt

Использование CSS для создания бестабличного дизайна

Существует множество проблем с сайтами, которые используют табличную разметку:

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

В современном веб-дизайне используются каскадные таблицы стилей (CSS), а не таблицы, для

В результате содержимое <body> для файла index.php будет следующим:

Наш файл template.css будет выглядеть следующим образом:

margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px;

margin: 5px 10px;

font: font-size |font-style | font-variant | font-weight | line-height | font-family

Т.е. вместо того, чтобы использовать:

font:bold 1em/1.3em Arial,Helvetica,sans-serif italic;

Прочитать дополнительную информацию можно во «Введении в краткие свойства CSS»:

Pasidaryk svetainę pats su Joomla - www. J OOM L A1 2 3. lt

Pasidaryk svetainę pats su Joomla - www. J OOM L A1 2 3. lt