Создание модулей с закругленными углами (Часть 2)

Закруглённый модуль Mambofree.com

Применимо в Joomla 1.0.x, Мамбо 4.5.2.1 и более поздних версиях (надеюсь на это)

Что нового?

Возможно вы знаете, что стандартная функция вывода модуля Joomla (Мамбо) mosLoadModules выглядит так:

mosLoadModules ($position_name [, $style])

Обычно для переменной $style в Joomla (Мамбо) используются значения 0 (по умолчанию), -1, 1 и -2. В Мамбо 4.5.2.1 для переменной $style был введен параметр "-3". На PHP это будет выглядеть так:

mosLoadModules ("position_name", -3)

Применив параметр “-3”, вы получите дополнительные тэги DIV, которые будут генерироваться в шаблоне Joomla (Мамбо) в следующем виде:

<div class="module[suffix]">
   <div>
     <div>
       <div>
         <h3>Module Title</h3>
         Module output
       </div>
     </div>
   </div>
 </div>

О различиях использования параметров 0, 1, -1 и -2 вы можете узнать в других статьях. Например, в этой.

Поучимся на примерах

Взгляните на следующий код одного из модулей Mambotheme.com:

<div class="module-blue"><div><div><div><h3>Special offer!</h3>
   <table <strong>class</strong>="contentpaneopen">
     <tr>
       <td valign="top" colspan="2">
         Stop paying $19-$30 per Mambo template!...
       </td>
     </tr>
   </table>
 </div></div></div></div>

2 простых шага для вставки углов в Joomla (Мамбо)

Шаг 1. Добавление кода в index.php - файл вашего шаблона

Просто добавьте следующий код в файл index.php вашего шаблона. Файл index.php, который находится в папке mamboroot / templates / template_name (mamboroot - корень вашего сайта Мамбо, а template_name - папка с редактируемым шаблоном).

<?php if (mosCountModules( "left" )) { ?>
  <div class="leftbox">
    <div id="leftmenu" class="leftblock">
    <?php mosLoadModules ( "left", -3 ); ?>
    </div>
  </div>
<?php } ?>

Шаг 2. Добавление стилей в файл template_css.css

Теперь Вы понимаете, как организованы модули, и вторым шагом является описание стилей модуля в файле шаблона template_css.css, который находится в папке mamboroot / templates / template_name / css.

Добавим в файл template_css.css следующие строки:

div.leftblock div.module {
   padding:0px 0px 0px 0px;
 }
 .leftblock#leftmenu div.module {
   background: url('../images/box_b_l.png') no-repeat bottom left;
 }
 .leftblock#leftmenu div.module div div {
   background: url('../images/box_t_l.png') no-repeat top left;
 }
 .leftblock#leftmenu div.module div {
   background: url('../images/box_b_r.png') no-repeat bottom right;
 }
 .leftblock#leftmenu div.module div div div {
   background: url('../images/box_t_r.png') no-repeat top right;
 }
 .leftblock#leftmenu div.module div div div h3{
   display:block;
   font-size: 10px;
 }
 .leftblock#leftmenu div.module div div div div {
   background:none;
 }

A. Описание CSS

Класс .leftblock используется для определения стиля прямоугольника.

Идентификатор (ID) #leftmenu определяет, что этот стиль применяется только для #leftmenu (дополнительная возможность).

Еще раз скажу, чтобы Вы не забыли скопировать в папку images 4 изображения, которые мы сделали в первой части руководства (box_t_l.png, box_t_r.png, box_b_l.png и box_b_r.png). Если хотите поместить эти изображения в другую папку, то Вы должны будете в фале CSS прописать правильный путь до изображений.

Б. Заключение

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