Рис. 26: Модуль, расположенный слева
используется идентификатор CSS под названием leftoclumn.
Контент между тегами и отображается только если выполняются условия параметров. В данном случае отображение будет зависеть от наличия модуля или модулей в положении «слева» (left). Если таких модулей нет, общая разметка шаблона динамически изменится, чтобы заполнить пустое место.
В нашем случае имеется три модуля.
CSS идентификатор левой колонке выглядит в CSS файле следующим образом:
#leftcolumn {
padding: 0;
margin: 0;
width: 20%;
float:left;
}
Если вы посмотрите на исходный код страницы, отображаемой в веб браузере (нажать правой кнопкой на странице и выбрать Просмотреть исходный код страницы (View Page Source)), то увидите, что jdoc запрос Joomla! сгенерировал на самом деле значительно больший объем кода.
Листинг 7: Выдержка из исходного кодаHTML страницы
… дополнительные HTML команды
… дополнительные 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;
