В этой статье я расскажу как создавать собственные стили для отображения модулей и автоматически растягивать шаблон.
Шаблоны Joomla. Часть 4. Создание стилей позиций модулей. Автоматическое растягивание основного контента.

В предыдущей статье серии «Шаблоны 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.

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

Файлы:

Отредактированный шаблон

P.S: Для того, чтобы шаблон нормально отображался нужно сделать следующее:

для левого меню: в настройках модуля нужно указать суффикс css-класса меню:1 , стиль меню: список;

для правого меню: в настройках модуля нужно указать суффикс css-класса меню:2 , стиль меню: список.

Понравилась статья? Сохраните себе на стену:

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях.

Комментарии  

+1 # Spence 26.12.2009 11:25
Уважаемый Wedal!
Прошу прощения за назойливость,но у меня очередной вопрос!
При создании в joomle верхнего меню пункты меню сливаются,и накладываются на фон таким же цветом,в результате чего становятся не читаемыми.К тому же они почемуто не как на картинке-каждая в своей ячейке а как будто "склеились" друг с другом!В чём тут может быть причина,очень хочу разобраться,подскажите пожалуйста!
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 26.12.2009 12:24
Spence, все нормально. Вы просто забегаете вперед. Читайте следующую статью серии и все встанет на свои места :-)
Ответить | Ответить с цитатой | Цитировать
+1 # Spence 26.12.2009 12:42
ОЙ \,прошу прощения,я немного не тут написал комментарий.Я как раз про конечную версию шаблона говорю.При создании верхнего пункат меню наблюдается вышеописанная проблема.Пытаюсь разобраться в чём проблема.Чтобы было наглядней я детально опишу.
1)Создаем в админке новое меню-верхнее меню.
2)Создаю модуль верхнее меню в менеджере
3)настройки у него позиция-hornav
стиль меню горизонтально

Но всё равно оно не выглядит как должно и пункты жмуться дрг к другу.
Может дело в каких-то настройках,или в css.
Помогите советом.
Ответить | Ответить с цитатой | Цитировать
-1 # Wedal 26.12.2009 13:06
Spence, вы не задали для модуля верхнего меню css-суффикс. Он должен быть "2".
Ответить | Ответить с цитатой | Цитировать
0 # Spence 26.12.2009 13:14
Спасибо.
Задал суффикс 2 но ничего не изменилось.
Ответить | Ответить с цитатой | Цитировать
+1 # Wedal 26.12.2009 13:29
Spence, сейчас посмотрел. Нужно установить стиль меню: "список" , а не "наследовать горизонтально", т.е. не нужно было его изменять изначально. Ну а css-суффикс оставьте "2". Все заработает. Моя ошибка - я плохо описал эти настройки модулей. На днях добавлю их к статье.
Ответить | Ответить с цитатой | Цитировать
-1 # RE: Шаблоны Joomla. Часть 4. Создание стилей позиций модулей. Автоматическое растягивание основного контента.Spence 26.12.2009 13:35
Огромное спасибо!Законнектило!=)
Честно говоря именно ваш сайт и ваши рубрики дали мне толчок с чего начать,и куда двигаться,я теперь стал куда лучше разбираться и понимать структуру работы этой системы,так что еще раз вам огромное спасибо!
Ответить | Ответить с цитатой | Цитировать
0 # RE: Шаблоны Joomla. Часть 4. Создание стилей позиций модулей. Автоматическое растягивание основного контента.Анна 13.05.2010 06:05
Wedal, а я так и не могу хотя бы взглянуть на это верхнее меню. А хочется) Ничего в вашем шаблоне вообще еще не меняла. Изучаю.
"Подпункты" стоят:
topmenu
О Joomla
Особенности
Новости
Сообщество
«Опубликовано» везде галка, «Уровень доступа» везде «общий». Но на сайте нигде нет. Не то что криво, а вообще нигде.
"Стиль меню" можно изменять, если выйти через "расширения/модули", но там среди модулей вообще нет "Верхнего меню". А, если через "Меню/Верхнее меню", то сразу открывается страница с подпунктами этого самого верхнего меню и на ней уже можно изменять именно только подпункты.
Ответить | Ответить с цитатой | Цитировать
-1 # RE: RE: Шаблоны Joomla. Часть 4. Создание стилей позиций модулей. Автоматическое растягивание основного контента.Wedal 13.05.2010 06:31
Анна, для каждого меню должен существовать собственный модуль. Именно он отвечает за вывод меню на сайт. Если его нет, то можно создать заново, для этого в менеджере модулей нужно нажать кнопку "новый" в верхней панели, затем выбрать "Меню" и далее в опции "Название меню" выбрать ваше верхнее меню. Также нужно установить позицию "hornav", чтобы меню отображалось где нужно.
Ответить | Ответить с цитатой | Цитировать
-1 # RE: Шаблоны Joomla. Часть 4. Создание стилей позиций модулей. Автоматическое растягивание основного контента.Анна 13.05.2010 07:03
Спасибо, Wedal. Про создание понятно. Но я же готовые шаблоны беру, они все с верхним меню.
Вот сейчас поменяла шаблон с first-template на JA_Purity. Там тоже в шаблоне предусмотрено верхнее меню.
А у меня его все равно нет. http://img38.yfrog.com/img38/4899/60959062.jpg
И в "Модулях" нет. Такого ведь не может быть. Оно где-то в недрах, конечно же, есть. Может галка не так или не там стоит?
А если новый модуль для него создавать... При живом старом... Это что-то не то... Еще накосячу(
Ответить | Ответить с цитатой | Цитировать
+1 # RE: RE: Шаблоны Joomla. Часть 4. Создание стилей позиций модулей. Автоматическое растягивание основного контента.Wedal 13.05.2010 07:16
Анна, вы запутались в меню и модулях меню. Структура и свойства меню настраиваются в его менеджере, а за отображение того или иного меню на сайте отвечают модули. Нет ничего страшного в том, что у вас будет 2 модуля для одного меню, или даже 5. Каждый из них может выводить одно и тоже меню в определенной позиции на сайте, например, слева и справа(зачем не знаю, но может кому-то так хочется). Из того, что вы написали, я понял, что вы не можете найти модуль, отвечающий за вывод верхнего меню. Поэтому можно создать новый и вывести меню через него.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Шаблоны Joomla. Часть 4. Создание стилей позиций модулей. Автоматическое растягивание основного контента.Анна 14.05.2010 06:11
Ура, ура, ура!!! Появилось :) Спасибо, Wedal!
Ответить | Ответить с цитатой | Цитировать
0 # RE: Шаблоны Joomla. Часть 4. Создание стилей позиций модулей. Автоматическое растягивание основного контента.Анна 14.05.2010 06:16
Wedal, простите за приставучесть, а как сделать, чтобы в верхнем меню выпадали подпункты, чтобы как в админке было?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Шаблоны Joomla. Часть 4. Создание стилей позиций модулей. Автоматическое растягивание основного контента.WebMaster 09.08.2010 10:20
Wedal, спасибо, отличный урок. Размещу ссылку на Вас здесь - http://webkill.org/links
Ответить | Ответить с цитатой | Цитировать
0 # RE: RE: Шаблоны Joomla. Часть 4. Создание стилей позиций модулей. Автоматическое растягивание основного контента.Wedal 10.08.2010 06:01
WebMaster, спасибо.
Ответить | Ответить с цитатой | Цитировать
0 # Шаблоны JoomlaРоман 26.11.2010 11:43
Добрый день.
Интересует довольно простой (для мастеров как мне кажется), но для меня пока сложный вопрос:
КАК убрать хедер из шаблона?
Я догадываюсь, что возможно нужно удалить весь код связанный с хедером в файле index.php ? Но хотел бы профессионального мнения так как удаление всего кода с хедером может негативно повлиять на структуру отображения страницы (все элементы связаны между собой, как я понимаю).
И ещё один вопросик (простите за назойливость): Как в резиновом шаблоне, где вместо картинки в ХЕДЕРЕ существует фон, изменить вывод ФОНА на вывод картинки, которая естественно будет растягиваться на всю ширину страницы?
Это мне очень нужно!
Заранее спасибо!
Ответить | Ответить с цитатой | Цитировать
0 # RE: Шаблоны Joomla. Часть 4. Создание стилей позиций модулей. Автоматическое растягивание основного контента.sawa 09.01.2011 15:49
Скажите, а в каком файле надо прописать строки ПХП для растягивания блока под выводимый контент. У меня стоит ВИРТУМАТ 1.1.4 когда выводятся товары на страничке, то они начинают залазить на нижнюю часть границы стиля, до тех пор пока не нажмешь F5 и тогда становится как надо.
Ответить | Ответить с цитатой | Цитировать
0 # RE: RE: Шаблоны Joomla. Часть 4. Создание стилей позиций модулей. Автоматическое растягивание основного контента.Wedal 10.01.2011 05:50
sawa, читаем:

http://wedal.ru/rasshireniya-joomla/virtuemart-internet-magazin-na-joomla-chast-19-edit-virtuemart-template-begin.html

http://wedal.ru/rasshireniya-joomla/virtuemart-internet-magazin-na-joomla-chast-20-edit-virtuemart-template-continue.html

http://wedal.ru/rasshireniya-joomla/virtuemart-internet-magazin-na-joomla-chast-21-edit-virtuemart-template-end.html
Ответить | Ответить с цитатой | Цитировать
-3 # RE: Шаблоны Joomla. Часть 4. Создание стилей позиций модулей. Автоматическое растягивание основного контента.klubnichka 19.01.2011 11:13
Я много искал примеров как класс создать! Случайно наткнулся вот сюда хрен знает как но методом тыка я сделал одно я понять не могу как сделать так что бы в модуле суфикс класа модуля указать свой класс как не пойму! А то таким образом у меня для всех модулей в правой позиции одно и тоже оформление а если я не хочу так! Выход нашёл но надо сделать правильно я создал ещё одну позицию в правом боку просто по другому назвал! а там стилей оформления нет и он пустой! Как прописать класс я знаю в модуле как его указать в css или где что бы он по умолчанию выводил пустой а когда приписал класс с оформлением
Ответить | Ответить с цитатой | Цитировать
+3 # RE: RE: Шаблоны Joomla. Часть 4. Создание стилей позиций модулей. Автоматическое растягивание основного контента.Wedal 20.01.2011 09:36
klubnichka, а теперь прочитайте, что вы написали. Не знаю кто как, а я мало что понял, и могу ответить только одно: "янеотвечаюнавопросыавторкоторыхнемогутихграмотнозадатьисформулировать"
Ответить | Ответить с цитатой | Цитировать
0 # Как растянуть контент?Дмитрий 22.06.2011 21:41
Спасибо всё хорошо написано,но я не увидел самого главного,а именно "Автоматическое растягивание контента" Какие для него условия прописывать,если чёткую ширину задать допустим width:520px; то не куда он не потянется,если min-width:520px; то он растянется и заполнит всю ширину блока не зависимо от условий что писали выше.Вот не задача,как быть в этом случае при условии что таблица стилей отдельно идёт,а не в index.php,спасибо!
P.S.Шаблон написан с нуля,поэтому сложности.Прописывал отдельный стиль,условие одно,оно работает только когда например нажимаешь регистрацию,и тогда всё выходит на весь экран,но это не то,что хотелось бы.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Как растянуть контент?Wedal 23.06.2011 03:02
Дмитрий, тут смотря что вы понимаете под "растягиванием контента". Растягиваний может быть 2:
- под ширину браузера;
- под отсутствующую колонку(когда в ней нет модулей, она исчезает);

Если нужно и то и другое, то можно взять готовый резиновый трехколоночный макет(в интернете есть несколько хороших вариантов). Там колонки будут создаваться CSS-стилями(обычно через отступы margin). В любом случае вам придется переопределять некоторые из этих стилей в index.php, т.к. проверку на отсутствие модулей в CSS не запихнешь. Можно, конечно, создать несколько CSS-файлов и подключать нужный в зависимости от условия, но по-моему это еще сложнее.
Ответить | Ответить с цитатой | Цитировать
0 # Как растянуть контент?Дмитрий 23.06.2011 05:23
Спасибо,поищу такие шаблоны.
Ответить | Ответить с цитатой | Цитировать
0 # не могу заставить работать новые модулиЛЛирик 30.07.2012 17:37
Здравствуйте, для начала: не могу не сказать спасибо. очень хорошие статьи.

Теперь собственно вопрос вновь установленные модули не хотят работать. установил модуль вывода новостей, но вместо желаемого результата вижу только название этого модуля на той позиции где он должен быть... (грешу на криво мной сделанный modules.php)
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Вверх