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

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

Суббота, 19 мая 2012 16:05

Стили и классы в CMS «Joomla 1.5», применяемые к элементам компонента.

Оцените материал
(1 Голосовать)

В этой статье мне хотелось бы рассмотреть стили и классы, которые применяет cms при формировании центральной части страницы. В предыдущей статье, я уже касался этой темы - в ней были описаны классы и идентификаторы модeлей системы. В «Joomla» - в центральной части страницы, как правило выводится компонент (им может быть статья, несколько статей в виде блога или списка, форма для отправки сообщения администратору сайта).

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

Вывод статей в виде блога

вывод статей в виде блога…

Вывод статей в виде списка

…и в виде списка

Несмотря на то, что в версии 1.5 системы происходит переход от табличной разметки к блочной, основное содержимое все равно размечено таблицами.Рассмотрим сначала вывод статей в режиме блога. Хотелось бы уточнить. Что при выводе любой статьи (и в виде блога, и полностью) структура получается одинаковая.

Вот пример структуры статьи:

Структура статьи

Любая таблица, в которой расположена статья имеет класс contentpaneopen.Далее идет заголовок статьи (td.contentheading). В ячейках с классом .buttonheading, расположены пиктограммы (email, pdf, печать).

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

Переходим к таблице с основным содержимым: здесь нужно обратить внимание на элемент span c классом small. Это имя автора статьи. В ячейке с классом .createdate находится дата создания статьи, а в ячейке с классом .modifydate – информация о дате изменения статьи. К полному тексту статьи ведет ссылка с классом .readon. Текст самой статьи не имеет никаких классов и просто находится в ячейке таблицы в виде абзацев (элементов p).

Контейнером для всех статей в режиме блога является таблица c классом .blog, состоящая из 2 строк. В первой строке размещенная одна статья, во второй строке таблицы имеется 2 ячейки, в которых также размещены все остальные статьи категории. Статьи разделены между собой элементом span с классом .article_separator.

На рисунке разноцветными рамками отмечены элементы статьи, у каждого элемента свой класс (за исключением текста статьи).

При выводе информации в виде списка, она также выводится в таблице, которая имеет класс .contenpane. В первой строке таблицы находится описание (класс ячейки – .contentdescription). Строкам таблицы, в которых перечислены названия статей (категорий), присвоены попеременно 2 разных класса (.sectiontableentry1 и sectiontableentry2) – это нужно для того, чтобы выделить их разными цветами.

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

Структура формы для обратной связи Форма для обратной связи

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

Рассмотренные классы и идентификаторы
Наименование класса или идентификатораОписание
.contentheading Класс ячейки с заголовком статьи
.small Класс элемента span, содержащего имя автора статьи
.createdate Класс ячейки таблицы с датой создания статьи
.modifydate Класс ячейки таблицы с датой изменения статьи
.readon Класс ссылки на полный текст статьи
.buttonheading Класс ячеек с пикторграммами (email,PDF,печать)
.contentpaneopen Класс таблицы, в которой расположена статья
.contentpane Класс таблицы, в которой выводится список статей или категорий
.contentdescription Класс ячейки таблицы, в которой находится описание статей(категорий)
.sectiontableentry1
.sectiontableentry2
Классы четных/нечетных строк таблицы, в которых выводится список статей или категорий
.form-validate
#emailForm
Класс и id формы для обратной связи
.inputbox Класс полей формы и элемента <textarea>
.button
.validate
Классы кнопки «Отправить» в форме обратной связи
#contact-name id поля для ввода имени
#contact-email id поля для ввода e-mail
#contact-subject id поля для ввода темы письма
#contact_emailmsg id элемента <label> перед полем ввода e-mail
#contact_textmsg id элемента <label> перед полем для ввода текста сообщения
#contact-text id элемента <textarea> для ввода текста сообщения
#contact_email_copy id элемента-флажка в форме после поля для ввода текста сообщения
Прочитано 3326 раз

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


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

Мои услуги

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

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

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

Скачать

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