Модули выводятся при помощи следующего объявления в файле шаблона:
При выводе модулей – они выводятся в нескольких вариантах представления.Варианты следующие (указываются в атрибуте style
команды вызова модуля):
- table – модули отображаются в виде колонки таблицы;
- horz – модули выводятся горизонтально в ячейке таблицы.
- xhtml – модули помещаются в элемент div;
- rounded – модули отображаются в формате, который позволяет выводить рамку с закругленными углами.
- none – содержимое модуля просто выводится на страницу без использования каких-либо дополнительных элементов и заголовков.
Еще одна важная деталь — при выводе позиции, выводятся все модули, у которых указана соответствующая позиция.
Для того, чтобы узнать какие классы Joomla присваивает элементам, когда генерирует веб-страницу, нам необходимо вывести содержимое без графики и стилей. Для этого мы создадим шаблон, в котором будут только команды для вывода информации. Никаких графических файлов и таблиц стилей.
Этот шаблон будет состоять из 2 файлов: templateDetails.xml
и index.php
.
Первый файл содержит различные сведения для установки шаблона, а второй – основной является основным файлом в любом шаблоне – в нем то и определяется схема размещения элементов страниц и их представление.
Устанавливаем его в систему и делаем его текущим (по умолчанию). Получаем следующее отображение информации (приводится фрагмент):
Далее воспользуемся такой полезной надстройкой к IE, которая называется IE Developer Toolbar. Скачать ее можно по адресу: http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en
В современных браузерах (Firefox3 и Opera9) также существуют подобные полезные надстройки, а в Opera 9.64, она вообще встроена в браузер (Opera Dragonfly) и дополнительно устанавливать ее не нужно.
Открываем IE Developer Toolbar – мы видим все дерево документа и можем просматривать все элементы этого дерева. Также будет очень полезно просматривать код страницы, сгенерированный Joomla. Сделать в IE это можно так: щелкнуть правой кнопкой в окне и выбрать «Просмотр html кода».
Вот здесь-то мы и увидим все классы, которые Joomla присваивает элементам страницы.
Начнем сначала, то есть с самого верха:
Сначала в нашем щаблоне выводится название сайта. Оно не выводится в модуле. Вы можете поместить вывод названия сайта в элемент h1.Это будет оценено при посещении поисковыми машинами вашего сайта.
Далее идет вывод случайной новости (тип модуля – mod_newsflash). Код модуля состоит из следующих элементов, которым присвоены классы: div.moduletable_random, table.contentpaneopen_random.
Хотелось бы сказать, что любой модуль независимо от значения атрибута style, используемого при выводе, имеет класс moduletable. В данном случае после названия класса идет _random. Это суффикс класса модуля. Вы можете присваивать суффиксы любым модулям. Это прописывается в менеджере модулей в системе. Это используется для изменения внешнего вида модуля, так как присваивая суффикс класса модулю, Вы получаете новый класс, которому смело можете присваивать какие-либо правила CSS. Важное замечание, суффикс класса модуля присваивается также потомкам родительского элемента модуля, которые имеют какой-либо класс. Обратите внимание на рисунок – таблице с классом contentpaneopen, также как и родительскому div, добавлен суффикс _random. Текст новостей выводится в таблице.
Далее в нашем шаблоне идет модуль «путь к странице» - «хлебные крошки» (тип модуля - mod_breadcrumbs).Выводится следующим образом (используется значение none
атрибута style
):в элементе span
, которому присвоены 2 класса сразу.
Идем дальше — главное меню (тип модуля - mod_mainmenu):
Как было написано выше, меню ничем не отличается от других модулей, также имеет класс moduletable
(суффикс _menu
был присвоен в процессе разработки шаблона).Оно состоит из заголовка – как и другие модули (заголовок можно отключить в системе), ненумерованного списка с классом menu
, а также элементов списка, которым присвоны классы itemNN
. Цифровые значения в классе, которые у каждого элемента разные, берутся из системы (они присваиваются пунктам меню, при его создании):
Текущему пункту меню также присваивается класс active
и идентификатор current
.
Следующий модуль нашего шаблона – модуль авторизации (тип модуля – mod_login).
Первым элементом как и у других модулей является div.moduletable – это контейнер для элементов h3,form, ul, p
и других. Также как в других модулях присутсвует заголовок, представленный элементом h3
. Далее начинается сама Форма для авторизации, она в рамочке (элемент fildset
с классом input
). У формы идентификатор form-login
. Первый элемент в форме – абзац с id
равным form-login-username
(это поле для ввода логина с надписью «логин»). В нем элемент input
для ввода. Остальные элементы p
, которые находятся в дереве ниже, являются контейнерами для поля пароль и чекбокса «запомнить меня». Если внимательно посмотреть на рисунок, можно увидеть все классы, применяемые системой к форме и при умелом обращении с css, можно их использовать в своих нуждах.
Голосование (тип модуля - mod_poll) как правило выводится на главной странице.
Здесь все не так сложно как в остальных модулях:
Кроме стандартных div.moduletable
и заголовка, мы видим здесь форму и таблицу с классом poll
.
Реклама.(тип модуля mod_banners) выводится как правило на главной странице.
Здесь структура уже посложней, но все равно если внимательно присмотреться понять можно.
Внутри div.moduletable
находится контейнер div.bannergroup
, а в нем - несколько элементов div
с классом banneritem
. В каждом из них содержится по одному рекламному объявлению. Div.bannerheader
– заголовок для группы объявлений.
Кто на сайте (тип модуля – mod_whoisonline). Самый простой по своей структуре модуль на странице.
Просто div.moduletable
с текстом внутри него и заголовком.
Нижний колонтитул.
В этом шаблоне, я немного изменил вывод нижнего колонтитула, создав новый клиентский модуль (тип модуля – mod_custom). Клиентский модуль – это такой модуль, в который вы можете поместить произвольный текст или html разметку. Очень удобная вещь. С помощью такого модуля можно, например, поменять нижний колонтитул, что я и сделал.
Так выглядит нижний колонтитул: а так его структура:
Теперь хотелось бы подвести итог и поместить все рассмотренные классы в таблицу с их описанием. Возможно, она пригодится в процессе разработки шаблона как памятка.
Наименование класса или идентификатора | Описание |
---|---|
.moduletable | Присваивается контейнеру div или элементу table при выводе любого модуля, при значении атрибута style, неравного «none». |
.breadcrumbs, .pathway | Присваивается элементу при выводе модуля «путь к странице» («хлебные крошки») |
.contentpaneopen | Присваивается при выводе статей в компоненте.Например, на главной странице в режиме блога. А также таблице при выводе модуля «случайная новость» |
.menu | Присваивается элементу ul (ненумерованный список), при выводе меню. |
.active, #current | Присваиваются активному пункту меню |
.parent | Присваивается пункту меню, если у него есть подчинненые пункты меню. |
.itemNN | Присваивается любому пункту меню. Номер (NN) пункту меню дается при создании меню |
#form-login | Форма авторизации (элемент form) |
.input | Элемент fieldset в форме авторизации |
#form-login-username | Абзац-контейнер с полем «Логин» в форме авторизации |
#modlgn_username | Поле для ввода логина (элемент input |
#form-login-password | Абзац-контейнер с полем «Пароль» в форме авторизации |
#modlgn_passwd | Поле для ввода пароля (элемент input) |
#form-login-remember | Абзац-контейнер с элементом checkbox «запомнить меня» в форме авторизации |
#modlgn_remember | Элемент checkbox |
.button | Класс у кнопки для отправки данных |
.inputbox | Класс у полей ввода логина и пароля в форме авторизации. |
.poll | Класс у таблицы в модуле «Голосование» |
.bannergroup | Класс контейнера при выводе группы рекламных объявлений |
.bannerheader | Класс заголовка у группы рекламных объявлений |
.banneritem | Класс контейнера, в котором выводится текст каждой новости. |
.bannerfooter | Класс нижнего колонтитула группы рекламных объявлений. |
В следующей статье будет рассмотрены классы, которые «Joomla» использует при выводе компонентов.