Размещение модуля «в деталях»

Давайте ближе рассмотрим панель модуля, расположенную слева:




Рис. 26: Модуль, расположенный слева


В HTML коде файла index.php имеется следующий фрагмент:



В форматировании тега

используется идентификатор CSS под названием leftoclumn.

Контент между тегами и отображается только если выполняются условия параметров. В данном случае отображение будет зависеть от наличия модуля или модулей в положении «слева» (left). Если таких модулей нет, общая разметка шаблона динамически изменится, чтобы заполнить пустое место.


В нашем случае имеется три модуля.


CSS идентификатор левой колонке выглядит в CSS файле следующим образом:


#leftcolumn {

padding: 0;

margin: 0;

width: 20%;

float:left;

}


Если вы посмотрите на исходный код страницы, отображаемой в веб браузере (нажать правой кнопкой на странице и выбрать Просмотреть исходный код страницы (View Page Source)), то увидите, что jdoc запрос Joomla! сгенерировал на самом деле значительно больший объем кода.


Листинг 7: Выдержка из исходного кодаHTML страницы


… дополнительные HTML команды

Main Menu

… дополнительные HTML команды


В данном фрагменте кода особо отметим CSS класс module_menu. Описание данного класса в CSS файле выглядит следующим образом:


div.module_menu {

background: url(../images/mw_box_blue_br.png)

100% 100% no-repeat;

… дополнительные команды …

}

div.module_menu div {

background: url(../images/mw_box_blue_bl.png)

0 100% no-repeat;

}

div.module_menu div div {

background: url(../images/mw_box_blue_tr.png)

100% 0 no-repeat;

}

div.module_menu div div div {

background: url(../images/mw_box_blue_tl.png)

0 0 no-repeat;

padding: 10px;

padding-top: 30px;

padding-bottom: 15px;

width: auto;

}

div.module_menu div div div div {

background: none;

padding: 0;

}


Четыре блока CSS активируют определенные фоновые рисунки в каждом из тегов

.

В нашем случае результатом использования этого кода является меню с закругленными углами. Также в этом CSS файле имеются дополнительные строки, форматирующие заголовки третьего порядка (

), и несортированный список элементов меню.

Пока все идет нормально. Тип форматирования выбран, а отображение тегов

можно в любой момент изменить с помощью атрибута style (список всех параметров можно найти в дополнении). В первом примере мы использовали код –1, в этом примере мы используем код –3. Использование именно этого кода необходимо при работе с тегами
. Однако, если вы продолжите читать листинг 7 далее, то снова наткнетесь на таблицы. Модуль входа в систему (Login Module) все еще работает с помощью таблиц. На данном этапе развития Joomla! редактирование модуля входа в систему без использования таблиц может быть проблемой. Однако и здесь есть решение.


Загрузка...