Партнерки вебмастерам

Баннер

Кто онлайн

Сейчас 62 гостей онлайн

Статистика

Архив содержит 29 файлов в 11 категориях. На данный момент файлы скачаны 102262 раз.
Шаблоны Joomla. Часть 4. Создание стилей позиций модулей. Автоматическое растягивание основного контента. PDF Печать E-mail

В предыдущей статье серии «Шаблоны Joomla» я рассказал, как создать базовый Joomla-шаблон. Хоть он уже устанавливается и работает, использовать его еще нельзя. Во-первых дизайн модулей и меню не соответствует html-шаблону, который был образцом. Во-вторых шаблон не будет растягиваться на всю ширину, например, если в позиции «right» нет модулей. Правая колонка просто останется пустой. В этой статье я расскажу как создавать собственные стили для отображения модулей и автоматически растягивать шаблон.

 

Шаг 6.  Добавляем автоматическое растягивание основного контента при отсутствии модулей в позициях.

Что еще отличает Joomla-шаблон от обычного html кроме присутствия модулей и компонента? То, что он универсален. Кто-то, например, хочет использовать правую колонку, а кто-то нет. Шаблон Joomla – это как бы сразу несколько шаблонов в одном, каждый из которых появляется в зависимости от определенных условий. Именно эти условия нам и требуется добавить в шаблон. Из шести позиций при отсутствии модулей мешают только две: левая и правая колонки. Позиция «hornav» исчезает сама, «top» – уменьшается как раз до нужных размеров, а «bottom» и «ribot» не требуют изменений. Таким образом, нужно добавить условия только для колонок.

Для обработки условий только средствами html и css не обойтись. Здесь требуется использование php. Но не стоит пугаться. В данном случае php-код минимален и прост для понимания. Он будет состоять из двух частей. Первая часть представлена ниже:

<?php

if($this->countModules('left') == 0) $contentwidthleft = "0";

else $contentwidthleft = "207";

 

if($this->countModules('right') == 0) $contentwidthright = "0";

else $contentwidthright = "217";

?>

Этот код должен быть включен в заголовок страницы, т.е между тегами <head> и </head>. Он позволяет нам выбрать ширину колонок в зависимости от наличия/отсутствия в них модулей. Первые две строчки кода (не считая <?php) отвечают за левую колонку, а следующие две – за правую. Посмотрим, что именно в них написано. На словах это будет звучать так: «если количество опубликованных модулей в позиции «left» равно нулю, то переменная contentwidthleft тоже будет равна нулю, иначе(т.е когда опубликован хотя бы один модуль) переменная contentwidthleft будет равна 207». Аналогично и для правой колонки. Кстати, внимательно, здесь используется двойной знак «=». Почему именно  «0» и «207»? Сейчас ширина левой колонки в шаблоне равна «207». Это указанно в свойствах ячейки таблицы:

<td width="207" valign="top" background="templates/first-template/images/sub_left_bg.gif" class="bgy">

Во второй части кода мы заменяем это значение на переменную $contentwidthleft или $contentwidthright в зависимости от колонки:

для левой колонки:

<td width= valign="top" background="templates/first-template/images/sub_left_bg.gif">

<?php if($this->countModules('left')) : ?>

<jdoc:include name="left" style="xhtml"/>

<?php endif; ?>

</td>

для правой колонки:

<td width="" valign="top" background="templates/first-template/images/sub_r_bg.gif" class="bgy">

<?php if($this->countModules('right')) : ?>

<jdoc:include name="right" style="xhtml"/>

<?php endif; ?>

</td>

Таким образом, в случае отсутствия модулей в левой или правой позиции, ширина колонки становится равной нулю и основной контент растягивается.

Шаг 7.  Создаем дизайн модулей.

На данном этапе дизайн модулей в Joomla–шаблоне не соответствует html-шаблону. Это происходит потому, что в html-шаблоне код дизайна просто включен в шаблон. В Joomla в шаблон включается расположение и тип модулей, а их дизайн создается отдельно.

Для модулей нам потребуется два новых стиля. Первый, тот который используется в левой колонке:

left_mod

(именно стиль отображения модуля, то, что вокруг меню)

и второй, из правой колонки:

right-mod

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

Для начала нужно создать нормальный стиль для модулей, который будет растягиваться в случае увеличения в них информации. Для этого используем исходные коды для отображения модулей. С помощью Firebug не составляет труда их найти. Начнем со стиля модулей правой колонки. Для того, чтобы сделать его танущимся нужно разделить картинку, из которой он состоит на три части, как показано на рисунке:

edit_pic

Вторая часть (которая в середине) нужна не вся. Достаточно горизонтальной полоски высотой в 1 пиксель. Ею будет заполняться фон всего рабочего пространства модуля. Таким образом, должно получиться три отдельных картинки. Назовем их r1.jpg, r2.jpg, r3.jpg. Теперь, переделав исходный код так, чтобы он включал эти картинки, одна из которых растягивается, мы получим требуемый стиль:

<table width="100%" cellspacing="0" cellpadding="0" border="0">

<tbody><tr>

<td background="images/r1.gif" align="right" class="Search_info">Заголовок</td>

</tr>

<tr>

<td class="inform" background="images/r2.gif" > Тут содержание </td>

</tr>

<tr background="images/r3.gif"><td height="12"></td>

</tr>

</tbody></table>

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

<table width="100%" cellspacing="0" cellpadding="0" border="0"  class="norepeat">

<tbody><tr>

<td background="images/l1.gif" align="right" class="Search_info">Заголовок</td>

</tr>

<tr>

<td background="images/l2.gif"> Тут содержание </td>

</tr>

<tr background="images/l3.gif"><td height="17"/>

</tr>

</tbody>

Теперь, когда дизайн готов, нужно применить его к модулям. В Joomla 1.5 есть замечательная возможность, а именно создание стилей модулей. Если ты помнишь, в предыдущей статье мы указывали для каждой позиции модулей свой стиль отображения (например, <jdoc:include type=”modules”style=”xhtml”/>). Так вот, сейчас мы создадим свой стиль позиций. Для этого в папке с нашим шаблоном нужно создать подпапку «html» и скопировать в нее файл «modules.php» из \templates\system\html. Этот файл содержит все существующие стили позиций. Нужно отредактировать его так, чтобы оставить только два стиля, которые мы будем изменять. На первый взгляд код в файле кажется сложным, но если оставить только функцию function modChrome_xhtml и внимательно посмотреть на нее, то все становится понятным. Вот эта функция:

function modChrome_xhtml($module, &$params, &$attribs)

{

if (!empty ($module->content)) : ?>

<div>

<?php if ($module->showtitle != 0) : ?>

<h3><?php echo $module->title; ?></h3>

<?php endif; ?>

<?php echo $module->content; ?>

</div>

<?php endif;

}

В ней есть две основные части, которые нужно обработать. Первая – заголовок модуля:

<h3><?php echo $module->title; ?></h3>

Вторая – контент модуля:

<?php echo $module->content; ?>

Для того чтобы использовать созданные ранее стили в этой функции, нужно просто вставить их код так, чтобы заголовок и контент оказались в соответствующих местах:

для правой колонки:

function modChrome_xhtmlright($module, &$params, &$attribs)

{

if (!empty ($module->content)) : ?>

<div>

<table width="100%" cellspacing="0" cellpadding="0" border="0">

<tbody>

<?php if ($module->showtitle != 0) : ?>

<tr>

<td background=" /templates/first-template/images/r1.gif" align="right">

<h3><?php echo $module->title; ?></h3>

</td>

</tr>

<?php endif; ?>

<tr>

<td background=" /templates/first-template/images/r2.gif" class="inform">

<?php echo $module->content; ?>

</td>

</tr>

<tr background=" /templates/first-template/images/r3.gif"><td height="12"></td>

</tr>

</tbody></table>

</div>

<?php endif;

}

Важно, чтобы таблица была создана до условия <?php if ($module->showtitle != 0) : ?>, поскольку иначе, в случае отключения отображения заголовка модуля, получится ерунда.

Для левой колонки:

function modChrome_xhtmlleft($module, &$params, &$attribs)

{

if (!empty ($module->content)) : ?>

<div>

<table width="100%" cellspacing="0" cellpadding="0" border="0"  class="norepeat">

<tbody>

<?php if ($module->showtitle != 0) : ?>

<tr>

<td background=" /templates/first-template/images/l1.gif" align="right">

<h3><?php echo $module->title; ?></h3>

</td>

</tr>

<?php endif; ?>

<tr>

<td background=" /templates/first-template/images/l2.gif" class="inform">

<?php echo $module->content; ?>

</td>

</tr>

<tr background=" /templates/first-template/images/l3.gif"><td height="17"/>

</tr>

</tbody>

</div>

<?php endif;

}

Также обязательно нужно изменить названия функций(я сделал их modChrome_xhtmlleft и modChrome_xhtmlright) и пути к картинкам(добавив /templates/first-template/)

Теперь стили готовы и остается только подключить их к нужным позициям модулей. Для этого достаточно в шаблоне <jdoc:include type=”modules”style=”xhtml”/> для левой колонки изменить на <jdoc:include type=”modules” style=”xhtmlleft/>, а для правой, соответственно, на <jdoc:include type=”modules” style=”xhtmlright/> .

Последнее, что нужно сделать – в файле style.css в разделе .Search_info удалить строчку padding-top:8px; . Теперь стиль модулей в нашем шаблоне такой же , как стиль в исходном.

При создании обновленного пакета шаблона нужно не забыть добавить в файл templateDetails.xml пути к 6 новым изображениям и файлу modules.php.

На сегодня все. Следующая статья серии будет посвящена созданию стилей меню шаблона. Не пропустите.