Создание шаблона Joomla за 6 шагов. Шаг 3.

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

Вызов кода модуля осуществляется в нашем файле index.php с помощью следующей команды:

<jdoc:include type="modules"  name="позиция" style="стиль_кода_модуля" />

Стиль кода модуля, который не является обязательным параметром, определятся в файле /templates/system/html/modules.php. В Joomla версии 1.6 файл modules.php определяет следующие стили кода модуля: none, table, horz, xhtml, rounded и outline. Взглянем, что дает нам использование установки стиля.

style="none" (устанавливается по умолчанию) - код модуля выводится так как есть.

style="table" приводит к выводу модулей вертикально. Код модуля помещается в таблицу. Для таблицы назначается класс с именем, которое формируется из строки moduletable с добавленным суффиксом модуля:

	<table cellpadding="0" cellspacing="0" class="moduletable<?php echo htmlspecialchars($params->get('moduleclass_sfx')); ?>">
	<?php if ($module->showtitle != 0) : ?>
		<tr>
			<th>
				<?php echo $module->title; ?>
			</th>
		</tr>
	<?php endif; ?>
		<tr>
			<td>
				<?php echo $module->content; ?>
			</td>
		</tr>
		</table>

 

style="horz" приводит к выводу модулей горизонтально. Код модуля помещается в таблицу, которая вкладывается в другую таблицу:

	<table cellspacing="1" cellpadding="0" width="100%">
		<tr>
			<td>
				<?php modChrome_table($module, $params, $attribs); ?>
			</td>
		</tr>
	</table>

style="xhtml"  приводит к выводу модуля в виде элемента div, которому назначается класс с именем, формирующимся из строки moduletable с добавленным суффиксом модуля. Заголовок модуля будет выводиться в теге h3.

	if (!empty ($module->content)) : ?>
		<div class="moduletable<?php echo htmlspecialchars($params->get('moduleclass_sfx')); ?>">
		<?php if ($module->showtitle != 0) : ?>
			<h3><?php echo $module->title; ?></h3>
		<?php endif; ?>
		<?php echo $module->content; ?>
		</div>
	<?php endif; ?>

style="rounded"  приводит к выводу модуля в виде элемента с более сложной структурой, предназначенной для дополнительного форматирования. Например, для формирования растягиваемых скругленных углов. Основному контейнеру назначается класс с именем, формируемым из строки  module и добавления суффикса модуля.

		<div class="module<?php echo htmlspecialchars($params->get('moduleclass_sfx')); ?>">
			<div>
				<div>
					<div>
						<?php if ($module->showtitle != 0) : ?>
							<h3><?php echo $module->title; ?></h3>
						<?php endif; ?>
					<?php echo $module->content; ?>
					</div>
				</div>
			</div>
		</div>

style="outline"  приводит к выводу модуля в сочетании со служебной информацией. Такой вид модуля устанавливается при добавлении директивы ?tp=1 в адресной строке браузера

Наиболее точно стандартам W3C соответствуют стили xhtml и rounded. Кроме того, в файл modules.php достаточно просто добавить свои собственные стили для вывода модулей. Стоит только помнить, что файл modules.php не является частью шаблона, поэтому при переносе на другой сайт его необходимо будет дополнительно скопировать.

Установим для нашего шаблона использование стиля xhtml для всех модулей, за исключением модуля "debug":

<body>
	<div id="header" class="container_12">
		<?php echo $app->getCfg('sitename');?><br />
		<jdoc:include type="modules"  name="top" style="xhtml"/>
	</div>
	<div id="content" class="container_12">
		<div id="sidebar" class="grid_3 ">
			<jdoc:include type="modules"  name="left" style="xhtml"/>
		</div>
		<div id="maincolumn" class="grid_6">
			<jdoc:include type="modules"  name="breadcrumbs" style="xhtml"/
			<jdoc:include type="component" />
		</div>
		<div id="sidebar-2" class="grid_3">
			<jdoc:include type="modules"  name="right" style="xhtml"/>
		</div>
	</div>
	<div id="footer" class="container_12">
		<jdoc:include type="modules"  name="footer" style="xhtml"/>
	</div>
	<jdoc:include type="modules"  name="debug" />
</body>

И добавим оформление элементов нашего шаблона (вставляем стили в файл template.css):

#header{
 font-size:2em;
 }
#footer{
 border-top: 1px solid #999;
 }
a{
 text-decoration:none;
 }
a:hover{
 text-decoration:underline;
 }
h1,.componentheading{
 font-size:1.7em;
 }
h2,.contentheading{
 font-size:1.5em;
 }
h3{
 font-size:1.3em;
 }
h4{
 font-size:1.2em;
 }

	h5{
 font-size:1.1em;
 }
h6{
 font-size: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; /*отрицательное значение для вытягивания h3 обратно из-под действия отступов .moduletable*/
 }
ul.actions li{
float:right;
list-style:none;
border:0;
}
ul.actions li a img{
border:0;
}

После внесения изменений в файлы шаблона и обновления страниц наш шаблон будет выглядеть вот так:

Шаблон Joomla

Обратите внимание, что меню в правой и левой колонке имеют названия, отличающиеся по стилю от названия формы регистрации на сайте. Дело в том, что для модулей меню установлен суффикс "_menu". Для соответствующих элементов div назначается класс moduletable_menu, для которого еще не заданы правила. Суффикс модуля устанавливается в "Менеджере модулей" на странице редактирования свойств модуля в разделе "Дополнительно". Так можно задавать определенному модулю особенное оформление.

Задание суффикса для модуля

sourse

 

Анонс

В следующем уроке мы поработаем с выводом меню в нашем шаблоне.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://net.tutsplus.com/tutorials/site-builds/create-a-template-with-joomla-step-by-step/
Перевел: Сергей Фастунов
Урок создан: 21 Июня 2011
Просмотров: 58518
Правила перепечатки


5 последних уроков рубрики "Joomla!"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 21 Июня 2011 15:12
    KostyaKoz
    Огромное спасибо за уроки! Давно мечтал научится создавать шаблоны для Jooml'ы.
  • 21 Июня 2011 15:26
    WI_Wind
    Да что ж так быстро. Только второй шаг закончил, уже третий, но с одной стороны это хорошо!
  • 28 Июня 2011 22:37
    King_Oberon
    Спасибо! Отличные уроки. С нетерпением жду продолжения.
  • 9 Января 2012 15:11
    vfedorchenko
    Скажите, пожалуйста, как добавить условие в index.php для модуля (например right) чтоб она не отображалась. Т.е. для модуля установлено, что он отображается только на главной. А когда перехожу на другие страницы самого модуля нет, а место под него остается. Как вылечить? Это еще будет рассмотрено в дальнейших уроках? Спасибо;)
  • Комментарий удален
    • 21 Июня 2011 18:29
      Kapi
      read books
    • 21 Июня 2011 18:38
      WI_Wind
      QtProgrammer, а joomla это тебе не php with ajax? Kapi, good idea
  • Комментарий удален
    • 22 Июня 2011 10:44
      WI_Wind
      В joomle только начал разбираться, вроде как слышал, что ajax там вполне реально реализовать.
      • 22 Июня 2011 10:54
        Владислав
        Есть там аякс. Он прекрасно и быстро пашет.
      • 7 Апреля 2012 18:51
        KonevDN
        ну конечно реально , чего нет
  • Комментарий удален
    • 22 Июня 2011 14:13
      WI_Wind
      Ну ведь можно и не тупо ставить готовые компоненты, а писать их самому на готовом каркасе, как на фреймворке. Или вы считаете это убийственно?
  • Комментарий удален
    • 22 Июня 2011 15:26
      WI_Wind
      Ну, да! В принципе, это правильно. Но не всегда же нужно изобретать велосипед, джумлу можно использовать для написания мелких сайтов (к примеру, за 2-3 часа написать сайт-визитку для заказчика).
    • 22 Июня 2011 17:03
      Женя Авганец
      Пардон. Безопаснее всего использовать уже проверенный, в плане безопасности движок с открытым кодом, над которым работает целое сообщество. Если как можно меньше отклонятся от api при написании компонента, то получится здорово защищенный компонент. А самописные движки как правило имеют много уязвимостей, знаю не понаслышке. Да и зачем изобретать велосипед. Если нет умения писать свои плагины, то всю привлекательность Joomla конечно не понять, на базе Joomla можно сделать все.
    • 22 Июня 2011 22:59
      art_reklama_com
      Ну и пиши дальше, зачем ты вообще в этой теме пишешь, умник? Да, не забудь ссылку на сайт на твоем движке потом кинуть - мы его потестим)) Достали уже теоретики, блин. И везде свое мнение нужно высказать, где просят и где не просят.
      • 23 Июня 2011 08:39
        Женя Авганец
        Я пишу, что бы некомпетентные люди не порочили joomla. А ты зачем пишешь? Хочешь, кину пару своих сайтов в личку. Найдешь уязвимость, только не пассивку, заплачу. Спор на $100. Не найдешь, ты заплатишь, забьем? Или ты больше по комментариям специализируешься? Cмотрю, ты более менее функциональные сайты, сам на джумле пытаешься делать. http://zvonilka33.ru
        • 24 Июня 2011 03:55
          art_reklama_com
          Женя Авганец я не виноват, что здесь система ответов так устроена. Да, сайты почти все на джумла и я как раз за =) Так что остынь, ок?) А ответил я на посты QtProgrammer, т.к. сам был возмущен.
          • 2 Июля 2011 10:41
            Женя Авганец
            понял, сори)
^ Наверх ^