Создание модулей с закругленными углами в Joomla

Появление Joomla с дополнительными тэгами, позволяющими обеспечить гибкость в создании шаблонов, позволило оформить модули с закругленными углами. Сейчас это является модным направлением в построении веб-интерфейсов.

Итак, у нас есть 4 картинки, (например, box_t_l.png, box_t_r.png, box_b_l.png и box_b_r.png) нарезанные в соответствии с рис.1.

 

Создание модулей с закругленными углами в Joomla

 рис.1


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

mosLoadModules ($position_name [, $style])



Обычно для переменной $style в Joomla используются значения 0 (по умолчанию), -1, 1 и -2. В Joomla для переменной $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>



Например:

<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, который находится в папке /templates/template_name, где 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, который находится в папке 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;
}



Описание CSS

Создание модулей с закругленными углами в Joomla



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

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

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

Заключение

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

Меню

Главная

Компьютерная помощь
Ремонт компьютеров
Ремонт ноутбуков
Ремонт планшетов
Ремонт apple
Восстановление данных
Веб-мастерская
Заправка картриджей

Веб-мастеру

HTML (1)
CSS (8)
Java Script (2)
PHP
XML (2)
DLE (2)
Joomla (17)
ModX (1)
WordPress
Drupal (1)

Сис-админу

Windows (18)
*nix (1)
Apple (1)

Контакты

Eduard L.
ICQ: 298-066-983
e-mail: edd15@mail.ru
skype: edduard36
tel: +7 (904) 214 82 20
подробнее


Панель управления

Not registered?