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

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

1 <?php if($this->countModules('left')) : ?>
2     <div id="sidebar" class="grid_<?php echo $leftcolgrid;?>">
3         <jdoc:include type="modules"  name="left"style="xhtml"/>
4     </div>
5 <?php endif; ?>

Такой код не будет генерировать <div id="sidebar">, если в данной позиции нет никакого содержания.

Используя такую конструкцию для левой и правой панели получим код файла index.php:

01 <?php
02 /**
03 * @copyrightCopyright (C) 2011 Евгений Попов.
04 * @licenseGPL
05 */
06 defined('_JEXEC'or die;
07 $app = JFactory::getApplication();
08 ?>
09 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
10 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
11 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
12 <head>
13 <jdoc:include type="head" />
14 <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/system/css/system.css" type="text/css" />
15 <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/system/css/general.css" type="text/css" />
16 <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
17 <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/grid.css" type="text/css" />
18 </head>
19 <body>
20     <div id="header" class="container_12">
21         <h1><?php echo $app->getCfg('sitename');?></h1>
22         <jdoc:include type="modules"  name="top" style="xhtml"/>
23     </div>
24      
25     <?php
26     $leftcolgrid"3";
27     $rightcolgrid"3";
28      
29     if ($this->countModules('left') == 0):
30         $leftcolgrid "0";
31     endif;
32  
33     if ($this->countModules('right') == 0):
34         $rightcolgrid "0";
35     endif;
36     ?>
37      
38     <div id="content" class="container_12">
39         <?php if($this->countModules('left')) : ?>
40             <div id="sidebar" class="grid_<?php echo $leftcolgrid;?>">
41                 <jdoc:include type="modules"  name="left"style="xhtml"/>
42             </div>
43         <?php endif; ?>
44         <div id="maincolumn" class="grid_<?php echo(12-$leftcolgrid-$rightcolgrid);?>">
45             <jdoc:include type="modules"  name="breadcrumbs" style="xhtml" />
46             <jdoc:include type="component" />
47         </div>
48         <?php if($this->countModules('right')) : ?>
49             <div id="sidebar-2" class="grid_<?php echo $rightcolgrid;?>">
50                 <jdoc:include type="modules"  name="right" style="xhtml" />
51             </div>
52         <?php endif; ?>
53     </div>
54      
55     <div id="footer" class="container_12">
56         <jdoc:include type="modules"  name="footer" style="xhtml"/>
57     </div>
58     <jdoc:include type="modules"  name="debug" />
59      
60 </body>

Основные принципы построения шаблона для Joomla раскрыты. Теперь попробуем сделать внешний вид шаблона более привлекательным.

 

Делаем шаблон для Joomla 1.6

В результате предыдущих действий у нас есть базовая структура шаблона. Но реальное проектирование шаблона начинается с создания визуального макета страницы. То есть, сначала проектируется дизайн или внешний вид. Для этого можно использовать какой-либо графический редактор. А Макет страницы может быть как растровым, так и векторным. Затем из макета нарезаются изображения для различных элементов шаблона - для фонов, для кнопок, для меток и так далее. Процесс создания макета и нарезка из него комплекта изображений для шаблона выходит за рамки нашего урока. По данной теме можно найти много материала.

За основу для нашего шаблона мы возьмем следующий макет:

img 8

В комплект исходников к данному уроку включены изображения, которые нарезаны с данного макета для нашего шаблона.

 

Раздел заголовка страницы

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

Вот код CSS для заголовка, который надо добавить в файл template.css нашего шаблона:

01 #header {
02 border-bottom3px solid #87B825;
03 background#B4E637 url(../images/header-bg.gif) repeat-x top left;
04 }
05 #header h1 {
06 margin0;
07 padding25px;
08 font-family: Georgia, serif;
09 font-size150%;
10 color#374C0E;
11 backgroundurl(../images/bulls-eye.gif) no-repeat top left;
12 }

Для тега h1 устанавливается в качестве фона изображение, которое является своеобразным логотипом нашего шаблона. Его можно не использовать, оно приведено только в качестве демонстрации возможного решения таких задач при разработке шаблонов. 

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

img 9

 

Фон колонок

Если указать цвет для фона колонок, то он будет использоваться только на высоту контента колонки. Поэтому, если колонки имеют разную высоту содержания, то и фон для них будет заканчиваться на разной высоте. Такое положение в сочетании со стилизацией нижнего колонтитула выглядит очень коряво. Ситуация возникает по причине того, что  элемент div, в нашем случае - это sidebar и sidebar-2— имеют высоту содержания. И они не будут растягиваться до нижнего колонтитула. Это является недостатком системы построенной на основе сетки. Придется использовать JavaScript, чтобы получить нормальное заполнение фоном боковых колонок.

В нашем шаблоне используется скрипт Dynamic Drive для вычисления высоты колонок и выравнивания их. Добавляем в папку нашего шаблона каталог js, в котором размещаем файл скрипта. Обратите внимание, что нужно изменить имена элементов, которые используются при вызове скрипта, чтобы они соответствовали нашему шаблону. А в разделе head файла index.php нашего шаблона надо добавить загрузку скрипта:

1 <script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/equalcolumns.js" type="text/javascript"></script>

Также мы добавим еще один блочный элемент “maincolbck” для использования затухающего желтого цвета сверху центральной колонки.

В файле скрипта equalcolumns.js инициализация скрипта для нашего шаблона будет выглядеть следующим образом (все перечисленные элементы будут иметь одинаковую высоту):

1 ddequalcolumns.columnswatch=["content","maincolbck","sidebar""maincolumn""sidebar-2"]

Основная часть кода файла index.php будет выглядеть следующим образом:

01 <div id="content" class="container_12">
02     <div id="maincolbck">
03         <?php if($this->countModules('left')) : ?>
04             <div id="sidebar" class="grid_<?php echo $leftcolgrid;?>">
05                 <jdoc:include type="modules"  name="left"style="xhtml"/>
06             </div>
07             <?php endif; ?>
08         <div id="maincolumn" class="grid_<?php echo(12-$leftcolgrid-$rightcolgrid);?>">
09             <jdoc:include type="modules"  name="breadcrumbs" style="xhtml" />
10             <jdoc:include type="component" />
11         </div>
12         <?php if($this->countModules('right')) : ?>
13             <div id="sidebar-2" class="grid_<?php echo $rightcolgrid;?>">
14                 <jdoc:include type="modules"  name="right" style="xhtml" />
15             </div>
16         <?php endif; ?>
17     </div>
18 </div>

А в файл template.css добавим следующие правила:

01 #content {
02 font-size95%;
03 color#333;
04 line-height1.5em;
05 backgroundurl(../images/content-bg.gif) repeat-x top left;
06 }
07 #maincolbck {
08 backgroundurl(../images/wrap-bg.gif) repeat-y top right;
09 }
10 #footer {
11 background#828377 url(../images/footer-bg.gif) repeat-x top left;
12 padding:1px 0;
13 }

После сохранения изменений сайт с нашим шаблоном будет иметь вид:

img 10

 

Модули

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

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

01 #sidebar .moduletable,#sidebar-2 .moduletable {
02 margin10px 0 10px 0;
03 padding0 0 12px 0;
04 font-size85%;
05 line-height1.5em;
06 color#666;
07 background#fff url(../images/box-b.gif) no-repeat bottom right;
08 }
09 #sidebar h3,#sidebar-2 h3 {
10 margin0;
11 padding12px;
12 font-family: Georgia, serif;
13 font-size140%;
14 font-weightnormal;
15 color#693;
16 backgroundurl(../images/box-t.gif) no-repeat top left;
17 }
18 #sidebar p,#sidebar-2 p,sidebar ul,#sidebar-2 ul {
19 margin0;
20 padding0 12px;
21 }
22 sidebar ul li,#sidebar-2 ul li {
23 margin0 0 0 12px;
24 padding0 0 0 18px;
25 list-stylenone;
26 backgroundurl(../images/li-bullet.gif) no-repeat 0 3px;
27 }

Теперь нужно убрать у всех модулей меню суффикс _menu и удалить из файла template.css все стили для класса moduletable_menu.

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

img 11

 

Типографика

Работа с типографикой значительно упрощена в Joomla 1.6. В предыдущих версиях существовали специальные классы, например contentheading, для различных частей выводимого содержания. Теперь используются теги заголовков и полностью отсутствует табличная верстка. Поэтому для заголовков статей можно просто установить определенный вид:

01 h1, h2, h3, h4, h5, h6 {
02 font-family: Georgia, serif;
03 font-size150%;
04 color#663;
05 font-weightnormal;
06 }
07 h1 {font-size:2em;line-height:1;margin-bottom:0.5em;}
08 h2 {font-size:1.5em;margin-bottom:0.75em;}
09 h3 {font-size:1.25em;line-height:1;margin-bottom:1em;}
10 h4 {font-size:1.1em;line-height:1.25;margin-bottom:1.25em;}

Также можно добавить обработку определенных классов для вывода информирующих иконок:

01 p.info {
02 background#F8FAFC url(../images/info.png) center no-repeat;
03 background-position15px 50%/* x-pos y-pos */
04 text-alignleft;
05 padding5px 20px 5px 45px;
06 border-top2px solid #B5D4FE;
07 border-bottom2px solid #B5D4FE;
08 }
09 p.warn {
10 background#FFF7C0 url(../images/warn.png) center no-repeat;
11 background-position15px 50%/* x-pos y-pos */
12 text-alignleft;
13 padding5px 20px 5px 45px;
14 border-top2px solid #F7D229;
15 border-bottom2px solid #F7D229;
16 }
17  
18 p.alert {
19 background#FBEEF1 url(../images/exc.png) center no-repeat;
20 background-position15px 50%/* x-pos y-pos */
21 text-alignleft;
22 padding5px 20px 5px 45px;
23 border-top2px solid #FEABB9;
24 border-bottom2px solid #FEABB9;
25 }
26 ul.checklist li {
27 list-style:none;
28 backgroundurl(../images/tick.png) no-repeat 0 4px;
29 line-height24px;
30 padding-left20px;
31 }

В окончательном виде наш шаблон будет выглядеть так:

img 12

sourse

Все. В данной серии уроков были представлены базовые сведения для создания шаблона Joomla. Изучение документации по функциям системы позволит вам создавать действительно сложные и отлично работающие варианты.

{

}