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

Загрузка...

В предыдущем уроке мы изменили код шаблона так, что он стал изменять ширину колонок, чтобы не выводить пустое место там, где нет содержания. Но если посмотреть код полученной страницы, то в нем можно найти пустые блоки 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

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

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

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

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

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

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

01
#header {

02
border-bottom: 3px solid #87B825;

03
background: #B4E637 url(../images/header-bg.gif) repeat-x top left;

04
}

05
#header h1 {

06
margin: 0;

07
padding: 25px;

08
font-family: Georgia, serif;

09
font-size: 150%;

10
color: #374C0E;

11
background: url(../images/bulls-eye.gif) no-repeat top left;

12
}

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

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

Фон колонок

Если указать цвет для фона колонок, то он будет использоваться только на высоту контента колонки. Поэтому, если колонки имеют разную высоту содержания, то и фон для них будет заканчиваться на разной высоте. Такое положение в сочетании со стилизацией нижнего колонтитула выглядит очень коряво. Ситуация возникает по причине того, что элемент 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-size: 95%;

03
color: #333;

04
line-height: 1.5em;

05
background: url(../images/content-bg.gif) repeat-x top left;

06
}

07
#maincolbck {

08
background: url(../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
}

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

Модули

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

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

01
#sidebar .moduletable,#sidebar-2 .moduletable {

02
margin: 10px 0 10px 0;

03
padding: 0 0 12px 0;

04
font-size: 85%;

05
line-height: 1.5em;

06
color: #666;

07
background: #fff url(../images/box-b.gif) no-repeat bottom right;

08
}

09
#sidebar h3,#sidebar-2 h3 {

10
margin: 0;

11
padding: 12px;

12
font-family: Georgia, serif;

13
font-size: 140%;

14
font-weight: normal;

15
color: #693;

16
background: url(../images/box-t.gif) no-repeat top left;

17
}

18
#sidebar p,#sidebar-2 p,sidebar ul,#sidebar-2 ul {

19
margin: 0;

20
padding: 0 12px;

21
}

22
sidebar ul li,#sidebar-2 ul li {

23
margin: 0 0 0 12px;

24
padding: 0 0 0 18px;

25
list-style: none;

26
background: url(../images/li-bullet.gif) no-repeat 0 3px;

27
}

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

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

Типографика

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

01
h1, h2, h3, h4, h5, h6 {

02
font-family: Georgia, serif;

03
font-size: 150%;

04
color: #663;

05
font-weight: normal;

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-position: 15px 50%; /* x-pos y-pos */

04
text-align: left;

05
padding: 5px 20px 5px 45px;

06
border-top: 2px solid #B5D4FE;

07
border-bottom: 2px solid #B5D4FE;

08
}

09
p.warn {

10
background: #FFF7C0 url(../images/warn.png) center no-repeat;

11
background-position: 15px 50%; /* x-pos y-pos */

12
text-align: left;

13
padding: 5px 20px 5px 45px;

14
border-top: 2px solid #F7D229;

15
border-bottom: 2px solid #F7D229;

16
}

17
 
18
p.alert {

19
background: #FBEEF1 url(../images/exc.png) center no-repeat;

20
background-position: 15px 50%; /* x-pos y-pos */

21
text-align: left;

22
padding: 5px 20px 5px 45px;

23
border-top: 2px solid #FEABB9;

24
border-bottom: 2px solid #FEABB9;

25
}

26
ul.checklist li {

27
list-style:none;

28
background: url(../images/tick.png) no-repeat 0 4px;

29
line-height: 24px;

30
padding-left: 20px;

31
}

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

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

{

Ваше имя *

Телефон *

E-mail

Сообщение

}

Уроки по созданию сайтов