Создаем шаблон Joomlа по стандартам - окончательная сборка
Создаем настоящий шаблон Joomla 1.5
Первое, что нам понадобится для старта, — это дизайн, который ляжет в основу нашего шаблона. Мы будем использовать для наших целей дизайн «Bold» и вы можете увидеть его на рисунке:
Нарезка дизайна
Следующий шаг нашего процесса — это то, что называют «нарезкой». Нам нужно использовать графический редактор, чтобы создать набор небольших изображений для нашего шаблона. Важно учитывать то, как элементы будут масштабироваться в случае необходимости. (Я предпочитаю использовать для этих целей Fireworks, считая, что он более приспособлен для веб-дизайна, нежели Photoshop, который более удобен для создания печатной продукции).
Определение мест для модулей
В этом шаблоне будет несколько специальных мест для модулей, немного отличающихся от тех, что присутствуют в стандартной установке Joomla. Чтобы быть уверенным, что модули в процессе работы над шаблоном установлены корректно, убедитесь в наличии следующих мест:
- User1 — для модуля поиска
- User2 — для верхнего меню
- Top — для топ-новости или пользовательского HTML-модуля
Ничего другого не должно публиковаться на этих местах.
Заголовок
В изображении заголовка есть размытые полосы, которые мы хотели бы сохранить, поэтому мы устанавливаем это изображение фоном, а также определяем цвет фона. В этом случае заголовок будет масштабироваться по вертикали при необходимочти, например, при изменени размера шрифтов. Нам нужно также задать белый цвет для всего, что будет появляться на темном фоне.
Также мы используем фоновое изображение для формы поиска. Мы должны быть уверены, что стиль применяется к конкретному элементу input, поэтому используем CSS-уточнение. Я также указал абсолютное позиционирование внутри относительно позиционированного элемента, чтобы разместить форму поиска в нужном месте. Изображение не будет масштабироваться при изменении размера шрифта, поскольку мы не размножаем его (no-repeat). Также потребуются дополнительные картинки для верха и низа поля ввода — это еще одно упражнение для вас!
#header {
color:#fff;
background:#212121 url(../images/header.png) no-repeat;
position:relative;
}
#header h1 {
font-family:Arial, Helvetica, sans-serif small-caps;
font-variant:small-caps;
font-stretch:expanded;
padding-left:20px;
}
#header input {
background:url(../images/search.png) no-repeat;
border:0;
height:22px;
width:168px;
font:1em Arial, Helvetica, sans-serif;
padding:2px;
}
#header .search {
position:absolute;
top:20px;
right:20px;
}
Я не стал делать графический логотип, использовав обычный текст. Причина — поисковая оптимизация, поскольку поисковые системы не умеют «читать» изображения. Можно, конечно, использовать модную подмену изображения, но я оставляю это в качестве упражнения на ваше усмотрение.
Наш заголовок теперь выглядит следующим образом:
Далее нам нужно применить технику, используемую для отображения фона в растягивающейся колонке, так называемые «раздвижные двери».
Фон для колонок
Напоминаю, что если мы задаем фон для колонки, колонка не заполняется цветом до самого низа. Это происходит потому, что элемент div (в нашем случае sidebar и sidebar-2) имеет высоту только по своему содержимому, а не удлиняется до размеров содержащего его элемента.
Нам нужно использовать технику, называемую «раздвигающиеся ложные колонки», когда вы по сути создаете два широких изображения, которые сдвигаются поверх друг друга. Нам нужно создать два новых контейнера для этих фоновых изображний. Мы бы могли использовать только #wrap, но я добавил дополнительный контейнер для иллюстрации.
Полное описание используемой техники вы можете прочитать в этих руководствах:
В нашем случае, максимальная ширина составляет 960px, поэтому мы начинаем с изображения такой ширины. Затем экспортируем два куска (я использовал один кусок, показывая/скрывая соответствующие боковые части), один с общей шириной 960px и фоном слева 192px, и второй с общей шириной 960px и фоном справа шириной 192px.
Подсказка:
Левому изображению нужно задать белый фон, а правому прозрачный фон. Я изменял цвет фона в процессе экспорта изображений из исходного файла.
Откуда берутся 192px? Это 20% от 960px, поскольку наши колонки имеют ширину 20%. Мы используем свойство background-position для позиционирования фоновых изображений. Поскольку мы применяем сжатый формат CSS, то это является частью свойства background:
#leftfauxcol {
background:url(../images/leftslidingcolumn.png) 20% 0;
}
#rightfauxcol {
background:url(../images/rightslidingcolumn.png) 80% 0;
}
В нашем index.php мы просто добавили контейнеры внутри #wrap:
<div id="wrap">
<?php if($this->countModules('left')) : ?>
<div id="leftfauxcol">
<?php endif; ?>
<?php if($this->countModules('right')) : ?>
<div id="rightfauxcol">
<?php endif; ?>
<div id="header">
Также нужно добавить условные выражения для закрывающих тегов div:
<?php if($this->countModules('left')) : ?>
</div>
<!--end of leftfauxcol-->
<?php endif; ?>
<?php if($this->countModules('right')) : ?>
</div>
<!--end of rightfauxcol-->
<?php endif; ?>
Нам также нужно добавить фон для #footer и #bottom, иначе будет отображаться фон колонок:
#footer {
background:#212121;
color:#fff;
text-align:right;
clear:both;
}
#bottom {
background:#333;
color:#666;
padding:10px 50px;
}
Нам нужно очистить float, чтобы плавающие контейнеры (ложные колонки) растягивались до низа страницы. Традиционный способ — это использование свойства after. Однако, с выходом IE7, этот метод уже не работает. Нам нужно обеспечить совместимость очистки float в IE6 и IE7, и вот здесь начинаются проблемы.
Существуют несколько решений, мы будем исполозовать способ «Float почти для всего».
Таким образом, мы добавляем clear:both в #footer и добавляем свойства float в ложные колонки. Нужно добавить следующие стили в условный CSS-файл, который применяется только для IE6:
#leftfauxcol,#rightfauxcol,#footer {
float:left;
width:100%;
}
Нам нужно добавить несколько условных выражений в область head нашего файла index.php:
<!--[if lte IE 6]> <link href="/templates/<?php echo $this->template ?>/css/ie6only.css" rel="stylesheet" type="text/css" /> <![endif]--> <!--[if lte IE 7]> <link href="/templates/<?php echo $this->template ?>/css/ie7only.css" rel="stylesheet" type="text/css" /> <![endif]-->
Гибкие модули
В нашем дизайне изначально присутствует большой блок для модулей. Мы не знаем заранее, какой высоты будет требуемый текст. Чтобы решить эту проблему, мы помещаем выражение jdoc:include в контейнер и указываем для него фон такого же цвета, как фоновое изображение. Это тот же вариант, который мы использовали для заголовка:
<?php if($this->countModules('top')) : ?>
<div id="top">
<div class="inside">
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
</div>
<?php else : ?>
<div id="top"> </div>
<?php endif; ?>
Обратите внимание, что мы также используем условное выражение, чтобы в том случае, когда для места Top нет контента, оранжевая подложка не отображалась. Тогда здесь будет только пустой контейнер, содержащий маленькую часть фонового изображения, с вертикальным отступом 20px. Это сделано чисто для эстетики.
Потребуется использовать CSS-уточнение, чтобы переопределить стили moduletable, которые мы прописали ранее:
#top {
background:#ea6800 url(../images/teaser.png) no-repeat;
padding:10px;
}
#top .moduletable h3 {
color:#fff;
background:none;
text-align:left;
font:2.5em Arial, Helvetica, sans-serif normal;
font-stretch:expanded;
margin:0;
padding:0;
}
#top .moduletable {
font:bold 1em/1.2 Tahoma,Arial, Helvetica, sans-serif;
color:#fff;
border:0;
margin:0;
padding:0;
}
Теперь сфокусируемся на оформлении текста.
Оформление текста
Многие ссылки должны быть белыми, поэтому мы определим этот цвет глобально, а затем изменим его для центральной колонки:
a:link,a:visited {
text-decoration:underline;
color:#fff;
}
a:hover {
text-decoration:none;
}
#content60 a:link,#content60 a:visited,#content80 a:link,#content80 a:visited,#content100 a:link,#content100 a:visited {
color:#000;
}
В дизайне присутствует стилизованная кнопка. Мы используем для нее тонкий фрагмент, размноженный по горизонтали:
.button {
border:#000 solid 1px;
background:#fff url(../images/buttonbackground.png) repeat-x;
height:25px;
cursor:hand;
margin:4px 0;
padding:0 4px;
}
Для таблиц, таких как FAQ, мы можем добавить фон, применяя то же изображение, что и для подзаголовка. Повторное использование будет вполне «тематичным», к тому же это дает экономию на загрузке картинки и ускоряет отображение страницы.
sectiontableheader {
background:url(../images/teaser.png);
color:#fff;
font:1.2em bold Arial, Helvetica, sans-serif;
padding:5px;
}
Модули потребуют достаточно простого переопределения и уточнения свойств margin и padding:
.moduletable {
margin-bottom:1em;
color:#fff;
font-size:1.1em;
}
.moduletable h3 {
font:1.3em Tahoma,Arial,Helvetica,sans-serif;
background:#000;
color:#ccc;
text-align:left;
margin:0 -10px;
padding:5px 10px;
}
Меню, как обычно, требуют достаточного большого количества стилей CSS. Здесь мы постараемся сделать их настолько простыми, насколько это возможно. Мы вырежем небольшую картинку, которая будет включать в себя как буллет, так и подчеркивание. Обратите внимание, что применение стилей «включается» с помощью присвоения суффикса модуля «menu» любому списку ссылок, который мы хотим оформить таким образом:
.moduletablemenu {
margin-bottom:1em;
}
.moduletablemenu h3 {
font:1.3em Tahoma,Arial,Helvetica,sans-serif;
background:#000;
color:#ccc;
text-align:left;
margin:0 -10px;
padding:5px 10px;
}
.moduletablemenu ul {
list-style:none;
margin:5px 0;
}
.moduletablemenu li {
background:url(../images/leftmenu.png) bottom left no-repeat;
height:24px;
font:14px Tahoma,Arial, Helvetica, sans-serif;
margin:10px 0;
padding:0 0 0 10px;
}
.moduletablemenu a:link,.moduletablemenu a:visited {
color:#fff;
display:block;
text-decoration:none;
padding-left:5px;
}
.moduletablemenu a:hover {
text-decoration:none;
color:#fff;
background:#ADADAD;
}
Последнее — это меню из ярлыков в правой верхней части. Как приверженцы доступности, мы должны настроить его так, чтобы ярлыки масштабировались при изменении размера шрифтов. К счастью, существует техника, которая позволяет это сделать, фактически, это снова те же «раздвижные двери», которые мы использовали для наших колонок!
Мы также попытаемся сделать небольшую оптимизацию скорости загрузки шаблона и будем использовать одно и то же изображение для левой и правой стороны «дверей», а также состояния «включено» или «выключено». Это называется «использовать спрайты».
Код CSS не очень сложный, мы только должны настроить вертикальную позициию фонового изображения для состояния «включено»:
.moduletabletabs {
font:bold 1em Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.moduletabletabs ul {
list-style:none;
float:right;
background:#212121;
width:100%;
margin:0;
padding:0;
}
.moduletabletabs li {
float:right;
background:url(../images/tabs.png) no-repeat 0 -4px;
margin:0;
padding:0 0 0 12px;
}
.moduletabletabs a:link,.moduletabletabs a:visited {
float:left;
display:block;
color:#000;
background:url(../images/tabs.png) no-repeat 100% -4px;
text-decoration:none;
margin:0;
padding:7px 18px 5px 9px;
}
.moduletabletabs #current {
background:url(../images/tabs.png) no-repeat 0 -84px;
}
.moduletabletabs #current a {
color:#fff;
background:url(../images/tabs.png) no-repeat 100% -84px;
}
Нам также нужно присвоить суффикс «tabs» для модуля, который мы используем для данного меню.
Если вы посмотрите на исходный дизайн, вы заметите, что изначально на ярлыках присутствовали иконки. Поскольку мы уже используем два фоновых изображения, одно для элемента списка li, а второе для ссылки, нам понадобился бы третий элемент, для которого мы прописали бы иконку в качестве фона. Вы можете сделать это с помощью элемента span, но это уже продвинутое CSS-джиу-джитсу.
Я оставляю это в качестве домашнего задания.
Последнее, что осталось, это обновить файл templateDetails.xml. Он должен содержать список всех файлов и изображений, используемых в шаблоне, так, чтобы он мог быть правильно проинсталлирован в виде zip-архива. Для версии Joomla 1.0.X существует много инструментов, которые могут сделать это автоматически, но для версии Joomla 1.5, на момент написания статьи, таких инструментов еще не было.
Наш окончательный шаблон будет выглядеть следующим образом:
Что необходимо знать
Создание рабочего шаблона Joomla — это в большей степени вопрос графического дизайна и манипуляций с CSS, нежели какого-то специфического «знания Joomla».
Итак, у нас есть шаблон, сделанный на основе дизайна. В нем добавлено простое оформление шрифтов, но более важно то, что мы создали чистый CSS-шаблон с динамически убирающимися колонками и приятным меню из ярлыков.