Матвей Земсков

Заметки веб-мастера

Понедельник, 15 июня 2009 16:03

Стили и классы модулей в Joomla 1.5

Оцените материал
(3 голосов)

В этой статье мне бы хотелось рассмотреть какие стили применяет к элементам на странице CMS «Joomla», когда формирует страницу. Рассматривать это я буду на основе демо-данных, которые можно поместить в базу данных CMS «Joomla» при установке системы.

Как известно данные (разделы, категории, статьи, меню) в системе хранятся в базе данных, а их графическое представление в шаблоне. При установке CMS по умолчанию устанавливается шаблон с названием rhuk_milkyway. В нем обозначено очень много различных позиций. В эти позиции выводятся модули. Модули в Joomla – различные меню, голосование, навигация по сайту («хлебные крошки»), авторизация и т.п. основное же содержимое выводится в компоненте (как правило, посередине страницы). С помощью шаблона и системы можно разместить все данные в нужных вам позициях.

Модули выводятся при помощи следующего объявления в файле шаблона:

 <jdoc:include type=”modules” name=”название позиции” style=”стиль” /> 

При выводе модулей – они выводятся в нескольких вариантах представления.Варианты следующие (указываются в атрибуте style команды вызова модуля):

  • table – модули отображаются в виде колонки таблицы;
  • horz – модули выводятся горизонтально в ячейке таблицы.
  • xhtml – модули помещаются в элемент div;
  • rounded – модули отображаются в формате, который позволяет выводить рамку с закругленными углами.
  • none – содержимое модуля просто выводится на страницу без использования каких-либо дополнительных элементов и заголовков.

Еще одна важная деталь — при выводе позиции, выводятся все модули, у которых указана соответствующая позиция.

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

Этот шаблон будет состоять из 2 файлов: templateDetails.xml и index.php.

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

Скачиваем шаблон.

Устанавливаем его в систему и делаем его текущим (по умолчанию). Получаем следующее отображение информации (приводится фрагмент):

фрагмент страницы с установленным шаблоном Joomla1.5

Далее воспользуемся такой полезной надстройкой к 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.

модуль «случайная новость» Joomla1.5

Хотелось бы сказать, что любой модуль независимо от значения атрибута style, используемого при выводе, имеет класс moduletable. В данном случае после названия класса идет _random. Это суффикс класса модуля. Вы можете присваивать суффиксы любым модулям. Это прописывается в менеджере модулей в системе. Это используется для изменения внешнего вида модуля, так как присваивая суффикс класса модулю, Вы получаете новый класс, которому смело можете присваивать какие-либо правила CSS. Важное замечание, суффикс класса модуля присваивается также потомкам родительского элемента модуля, которые имеют какой-либо класс. Обратите внимание на рисунок – таблице с классом contentpaneopen, также как и родительскому div, добавлен суффикс _random. Текст новостей выводится в таблице.

Далее в нашем шаблоне идет модуль «путь к странице» - «хлебные крошки» (тип модуля - mod_breadcrumbs).Выводится следующим образом (используется значение none атрибута style):в элементе span, которому присвоены 2 класса сразу.

модуль «хлебные крошки» Joomla1.5

Идем дальше — главное меню (тип модуля - mod_mainmenu):

модуль «главное меню» Joomla1.5

Как было написано выше, меню ничем не отличается от других модулей, также имеет класс moduletable (суффикс _menu был присвоен в процессе разработки шаблона).Оно состоит из заголовка – как и другие модули (заголовок можно отключить в системе), ненумерованного списка с классом menu, а также элементов списка, которым присвоны классы itemNN. Цифровые значения в классе, которые у каждого элемента разные, берутся из системы (они присваиваются пунктам меню, при его создании):

модуль «главное меню» Joomla1.5

Текущему пункту меню также присваивается класс active и идентификатор current.

Следующий модуль нашего шаблона – модуль авторизации (тип модуля – mod_login).

модуль «авторизация» Joomla1.5

Первым элементом как и у других модулей является div.moduletable – это контейнер для элементов h3,form, ul, p и других. Также как в других модулях присутсвует заголовок, представленный элементом h3. Далее начинается сама Форма для авторизации, она в рамочке (элемент fildset с классом input). У формы идентификатор form-login. Первый элемент в форме – абзац с id равным form-login-username (это поле для ввода логина с надписью «логин»). В нем элемент input для ввода. Остальные элементы p, которые находятся в дереве ниже, являются контейнерами для поля пароль и чекбокса «запомнить меня». Если внимательно посмотреть на рисунок, можно увидеть все классы, применяемые системой к форме и при умелом обращении с css, можно их использовать в своих нуждах.

Голосование (тип модуля - mod_poll) как правило выводится на главной странице.

Здесь все не так сложно как в остальных модулях:

модуль «Голосование» Joomla1.5

Кроме стандартных div.moduletable и заголовка, мы видим здесь форму и таблицу с классом poll.

Реклама.(тип модуля mod_banners) выводится как правило на главной странице.

Здесь структура уже посложней, но все равно если внимательно присмотреться понять можно.

модуль «реклама» Joomla1.5

Внутри div.moduletable находится контейнер div.bannergroup, а в нем - несколько элементов div с классом banneritem. В каждом из них содержится по одному рекламному объявлению. Div.bannerheader – заголовок для группы объявлений.

Кто на сайте (тип модуля – mod_whoisonline). Самый простой по своей структуре модуль на странице.

модуль «кто на сайте» Joomla1.5

Просто div.moduletable с текстом внутри него и заголовком.

Нижний колонтитул.

В этом шаблоне, я немного изменил вывод нижнего колонтитула, создав новый клиентский модуль (тип модуля – mod_custom). Клиентский модуль – это такой модуль, в который вы можете поместить произвольный текст или html разметку. Очень удобная вещь. С помощью такого модуля можно, например, поменять нижний колонтитул, что я и сделал.

Так выглядит нижний колонтитул: нижний колонтитул в шаблоне Joomla1.5 а так его структура:

нижний колонтитул. Структура. Шаблон для Joomla1.5

Теперь хотелось бы подвести итог и поместить все рассмотренные классы в таблицу с их описанием. Возможно, она пригодится в процессе разработки шаблона как памятка.

Рассмотренные классы и идентификаторы
Наименование класса или идентификатораОписание
.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» использует при выводе компонентов.

Прочитано 6384 раз
Другие материалы в этой категории:
Изменяем внешний вид меню в Joomla

Добавить комментарий


Защитный код
Обновить

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: