|
Модули расширяют возможности Joomla! и дают программам новую функциональность. Модули - небольшие объекты содержимого, которые могут быть отображены в любом месте шаблона, если это будет разрешено. Модули очень легко устанавливаются в "Панели управления" Joomla!. Joomla! уже включает в себя несколько модулей: "Главное меню" (Main Menu), "Верхнее меню" (Top menu), "Выбор шаблона" (Template Chooser), "Опросы" (Polls) и т.д. Каждый модуль должен находиться в определенной позиции - в обозначенном месте шаблона, в котором модуль будет отображаться при просмотре сайта. Мы уже разбирали, какой командой выводится модуль, но я не упомянул о нескольких вариантах вывода модуля. Вообще, конструкция определения позиции в шаблоне имеет такой вид: mosLoadModules('$position_name','$style')где - $position_name - название позиции, в которой будет выведен модуль.
- $style - определяет стиль вывода модуля. Варианты: 0, 1, -1, -2 или -3.
Стили 0 и 1 выводят каждый модуль в таблицах. Пример: <table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<th valign="top">Заголовок модуля</th>
</tr>
<tr>
<td>Вывод модуля</td>
</tr>
</table> Стиль -1 выводит модули без заголовка и без разметки. Пример: Стиль -2 выводит модуль посредством единичного слоя. Пример: <div class="moduletable"> <h3>Заголовок модуля </h3> Вывод модуля </div> Стиль -3 выводит модуль через вложенные друг в друга слои. Такой стиль применяют, если хотят оформить модуль с закругленными углами (Руководство по созданию модулей с закругленными углами). Пример: Вероятно, вы заметили, что варианты -1, -2 и -3 используют меньше кода, нежели варианты 0 и 1. Я рекомендую вам при выводе модулей использовать варианты -1, -2 или -3. В своем шаблоне я решил использовать стиль -2: <body>
<div id="wrap">
<div id="header">
<?php echo $mosConfig_sitename; ?>
<?php mospathway() ?>
<?php mosLoadModules('top',-2);?>
</div>
<div id="main-body">
<div id="content">
<div class="inside">
<?php mosMainBody(); ?>
</div>
</div>
<div id="sidebar">
<div class="inside">
<?php mosLoadModules('left',-2);?>
</div>
</div>
</div><!--end of main-body-->
<div id="sidebar-2">
<div class="inside">
<?php mosLoadModules('right',-2);?>
</div>
</div>
<div id="footer">
<?php include_once($mosConfig_absolute_path .'/includes/footer.php');?>
</div>
</div> <!--end of wrap-->
</body> Обратите внимание, что к следующим конструкциям нельзя применять стили вывода, поскольку они не являются модулями: <?php echo $mosConfig_sitename; ?>
<?php mospathway() ?>
<?php mosMainBody(); ?>
<?php include_once( $mosConfig_absolute_path .'/includes/footer.php' ); ?> Выбрав вывод модулей через слои, я в итоге уменьшил количество таблиц до 14. Остальные таблицы невозможно убрать без дополнительного кодинга в компонентах. А теперь давайте немного оформим вывод содержимого, чтобы результат выглядел приблизительно также, как на рисунке: Для начала, разместим заголовок сайта в контейнере <h1></h1>, это поможет добиться большей индексации сайта поисковыми системами: <h1><?php echo $mosConfig_sitename; ?></h1> (а я бы не рекомендовал так делать, т.к. одинаковые заголовки h1 на всех страницах - это не очень хорошо и вряд ли поисковики будут больше любить ваш сайт - прим. sourpuss) Далее, немного оформим модули, а также добавим границу верхней части шаблона. Теперь мой файл customize.css выглядит так: /*Compass Design Customize.css file */
* {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address{
margin:0.5em 0;
}
ul{
margin-left:2em;
}
fieldset{
padding:.5em;
}
body{
font-size:76.1%;
font-family:Verdana,Arial,Helvetica,sans-serif;
line-height:1.3em;
margin:1em 0;
}
#wrap{
border:1px solid #999;
background: url(../images/threecol-r.gif) repeat-y 75% 0;
height:100% !Important;
height:1%;
}
#wrap-inner {
background: url(../images/threecol-l.gif) repeat-y 25.125% 0;
height:100% !Important;
height:1%;
}
#header{
border-bottom: 1px solid #999;
padding:10px;
}
#footer{
border-top: 1px solid #999;
padding:5px;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
h1,.componentheading{
font-size:1.7em;
line-height:1.7em;
}
h2,.contentheading{
font-size:1.5em;
line-height:1.5em;
}
h3{
font-size:1.3em;
line-height:1.3em;
}
h4{
font-size:1.2em;
line-height:1.2em;
}
h5{
font-size:1.1em;
line-height:1.1em;
}
h6{
font-size:1em;
line-height:1em;
font-weight:bold;
}
#footer,.small,.createdate,.modifydate,.mosimage_caption{
font:0.8em Arial,Helvetica,sans-serif;
color:#999;
}
.moduletable{
margin-bottom:1em;
padding:0 10px; /*отступ от текста внутри модуля*/
border:1px #CCC solid;
}
.moduletable h3{
background:#666;
color:#fff;
padding:0.25em 0;
text-align:center;
font-size:1.1em;
margin:0 -10px 0.5em -10px;
/*отрицательный margin нужен для вписывания h3 в слой .moduletable (компенсация padding)*/
}
|
Документация 
