Создание шаблонов Joomla

Внедрение модуля Joomla!

Внедрение модуля Joomla! проводится с помощью команд, встроенных в HTML код. Это могут быть и старые команды Joomla! 1.0.x или Mambo 4.5.x, или новые команды patTemplate. Класс patTemplate служит для дифференцирования PHP и HTML кода. Для интеграции в шаблон различных элементов, Joomla! использует объект типа jdoc. Если, вместо тега

Если данный фрагмент кода работает, можно перейти к другим важным объектам jdoc.

Например, команда получает тип вставляемого объекта в качестве параметра (в данном случае это “modules”). Параметр “name” определяет положение модуля. (top, right, left, user1 и т.д.). Установить положение модуля можно также в административной части Joomla! (Extensions | Module Managers, категория Position). Список всех возможных позиций можно посмотреть в Extensions | Templates | Module Positions. Последний параметр “style” содержит значение, которое определяет тип HTML кода, передаваемый модулем. Например, значение –1 передает «чистый» HTML без использования контейнерных тегов

.

Параметр Отображение

1 Горизонтальное меню

-1 «Чистое» отображение без использования начального и замыкающего тегов

-2 Отображение в виде XHTML

-3 форматирования круглых углов

Таблица 1: Параметры модуля

Описание возможных вставок в index.php объектов jdoc можно увидеть в следующем листинге:

Листинг 5:index.php сjdoc вставками

Если вы загрузите ваш сайт в веб обозревателе теперь, то увидите что благодаря изменениям, внесенным нами в HTML код, сайт наполнился динамическим контентом.

Конечно, до визуального совершенства еще далеко, но сайт уже работает:

Рис. 6: Шаблон с динамическими данными

Теперь перейдем к CSS форматированию, чтобы улучшить внешний вид нашего сайта.

Копируйте следующий код в файл template.css. В данном фрагменте кода мы определяем, что шрифтом по умолчанию будет Arial, ссылки не будут подчеркиваться, а при наведении на них курсора изменят цвет и толщину букв.

Листинг 6: template.css

body {

font-family: Arial, Helvetica, Sans Serif;

}

a:link, a:visited {

color: #ff6600;

text-decoration: none;

font-weight: bold;

font-size: 15px;

}

a:hover {

color: #C43C03;

text-decoration: none;

font-weight: bold;

font-size: 15px;

}

Эти изменения значительно улучшат внешний вид нашего сайта. На рисунке внизу курсор мыши указывает на ссылку «More About Joomla», шрифт при этом меняет цвет и толщину:

Рис. 7: Шаблон с CSS файлом

Данный шаблон состоит из HTML таблиц. Однако, в настоящее время рекомендуется избегать использование HTML таблиц, так как они ограничивают возможности разметки страниц и размещения на них объектов контента. В дополнение к этому, на нашем сайте пока нет ни одной картинки. Тем не менее, основные вопросы создания шаблонов Joomla! нами решены. Остается только заархивировать шаблон в установочный пакет.