Источник: Краткое описание файлов шаблона для Joomla 2.5
В директории templates/TmplName есть следующие файлы

  • файл templateDetails.xml
  • файл index.php
  • файл template_thumbnail.png
  • файл template_preview.png
  • файл favicon.ico
  • папка css, которая содержит файлы 
    • template.css и 
    • menu.css
  • папка images с графическими файлами
  • папка html содержит еще две папки 
    • mod_login и 
    • mod_search

Теперь подробно о каждом файле.

Файл templateDetails.xml

Инсталяционный файл шаблона в формате XML. Он сообщает Joomla какие файлы необходимы для отображения страницы, которая использует данный шаблон. Поэтому этот файл должен содержать перечень всех файлов, папок шаблона и позиций для вывода модулей,  а также информацию о шаблоне, авторе и копирайте и пр. Он имеет строгую структуру, и если будут ошибки в этом файле, то шаблон установить не получится.

файл index.php

Этот самый главный файл шаблона, который содержит в себе документ с HTML — разметкой и вставками кода на языке PHP. Основное его назначение – указать области, где будут выводится на экран данные различных компонентов и  модулей сайта.

Файлы template_thumbnail.png и template_preview.png

Графические файлы формата PNG, т.е. скриншоты  шаблона для предварительного просмотра его внешнего вида. Используется в Менеджере шаблонов административной панели Joomla.

Обычно размеры для template_preview.png — 640х400 (может быть увеличен и до 800х700, это не принципиально), а для  template_thumbnail.png — 205х150.

Файл favicon.ico

Этот файл  содержит своеобразный идентификационный значок сайта. Его можно увидеть в адресной строке браузера, слева от URL сайта, а также при выдаче сайтов в поиске Яндекса.

Папка css

Содержит в себе два файла template.css и menu.css

Файл template.css

Файл стилей оформления шаблона. Это основной файл, с помощью которого осуществляется назначение различных стилей оформления элементам сайта. Путь к этому файлу должен быть обязательно прописан в файле index.php.

Файл menu.css

Файл стилей оформления различных меню шаблона. Стили меню выведены в отдельный файл, чтобы облегчить работу с кодом CSS. Путь к  файлу должен быть обязательно прописан в файле index.php.

Папка images

Эта папка содержит любые графические файлы,  используемые для оформления шаблона. Не размещайте сюда графику контента!

Папка html

Содержит еще две папки mod_login и mod_search

Папка mod_login

Содержит файл default.php для переопределения вывода модуля регистрации на сайте.

Папка mod_search

Содержит файл default.php для переопределения вывода модуля поиска на сайте.

При создании шаблона Likom25 была использована блочная верстка или блоковая модель CSS, которая позволяет не только создавать  блоки при помощи тега <DIV>, но и точно позиционировать их на экране и задавать стиль оформления блока. Изменив только каскадную таблицу стилей CSS, вы сможете полностью сменить дизайн сайта. При этом, можно изменить даже положение блоков, а не только их оформление, вовсе не внося каких-либо изменений в код страницы. Созданный подобным образом код страниц, значительно меньше по объему и логичнее по своей структуре, его проще читать и редактировать.

Блоковая разметка шаблона Likim25

Блочная верстка шаблона Joomla

Блок breadcrumbs

Блок предназначен для вывода модуля навигации по сайту. В административной панели Joomla 2.5 при создании модуля «Навигатор сайта» вы должны указать позицию «breadcrumbs». Заголовок модуля необходимо скрыть.

Блок имеет фиксированную высоту и не сворачивается. Если вы не разместили  в позиции «breadcrumbs» модуль навигации, то блок будет иметь пустое поле!

Блок user1

Блок предназначен для вывода модуля поиска по сайту. В административной панели Joomla 2.5 при создании модуля «Поиск», вы должны указать позицию «user1». Заголовок модуля необходимо скрыть.

Блок имеет фиксированную высоту и не сворачивается. Если вы не разместили  в позиции «user1» модуль поиска, то блок будет иметь пустое поле!

Блок header

Блок предназначен для вывода графического файла шапки сайта header.jpg, который находится в папке image шаблона. Файл будет выведен автоматически, т.к. его размещение прописано в таблице стилей CSS файла template.css.

Также, в этом блоке будет выводиться название сайта и, при желании, слоган сайта или компании.

Блок имеет фиксированную высоту и не сворачивается. Если вы не разместили  в блоке графический файл, он будет иметь пустое поле!

Блок user2

Блок предназначен для вывода горизонтального меню сайта. Создавая меню в менеджере меню, вы должны дать ему заголовок «Горизонтальное меню» и  определить тип меню topmenu (это системное имя) . Далее, при создании модуля меню в менеджере модулей , вы должны определить ему позицию «user2»,  в основных параметрах выбрать название меню «Горизонтальное меню». Также необходимо задать дополнительные параметры модуля в блоке «Суффикс CSS-класса модуля» написать  tabs. Это обязательно!!! Запомните, этот суффикс используется только для горизонтального меню! Заголовок модуля необходимо скрыть.

Если вы не разместили в позиции «user2»  горизонтальное меню, то блок свернется!

Блок left и right

Эти блоки предназначены для вывода различных модулей.

Первым делом в одном из этих блоков необходимо вывести главное вертикальное меню сайта. Создавая меню в менеджере меню, вы должны дать ему заголовок «Вертикальное меню» и  определить тип меню mainmenu (это системное имя) . Далее, при создании модуля меню в менеджере модулей , вы должны определить ему позицию позицию «left » или  «right», на ваше усмотрение. В основных параметрах выбрать название меню «Вертикальное меню».

Если вы хотите иметь главное меню, с оформлением, как на скриншоте шаблона,   тогда необходимо задать дополнительные параметры модуля в блоке «Суффикс CSS-класса модуля» написать  menu. Это обязательно!!! Запомните, этот суффикс используется только для вертикального меню! Заголовок модуля необходимо скрыть.

Если вы не укажите суффикс меню, то его оформление главного меню будет похоже на обыкновенный список ссылок!

Кроме главного меню в позициях «left » или  «right», могут выводиться прочие необходимые вам меню, а также различные модули, предлагаемые в административной панели Joomla 2.5.

Если в позициях «left » или  «right» не будет выведено ни одного модуля, то блоки сворачиваются и становятся невидимыми. Таким образом, можно сделать сайт с двумя боковыми колонками, одной или вообще без колонок.

Блок content

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

Блок «user3»

Изначально блок user3 предназначен для вывода модуля нижней навигации по сайту. В административной панели Joomla при создании модуля «Навигатор сайта» вы должны указать позицию «user3». Заголовок модуля необходимо скрыть. Также можно задать дополнительные параметры модуля в блоке «Суффикс CSS-класса модуля» написать  nav.

Также в позиции «user3»  можно вывести любой другой модуль на ваше усмотрение.

Если вы не разместили  в позиции «user3» ни одного модуля, то блок свернется!

Блок bottom

Этот блок предназначен для вывода модулей с вашим собственным HTML-кодом. В подобных модулях вы можете разместить рекламные объявления, новости, анонсы статей, любую произвольную информацию, которая может содержать небольшие графические файлы, шириной не более 160px.

В шаблоне предусмотрено оформление трех типов модулей с произвольным кодом:

Первый тип с суффиксом  _custom для вывода в позициях «left » и «right», и имеющий оформление аналогичное основным модулям Joomla 2.5.

Второй тип с суффиксом foot для вывода в позиции «footer».

Третий тип с суффиксом _bot для вывода в позиции «bottom».

В позиции «bottom» выводятся модули с произвольным HTML-кодом, имеющие суффикс  _bot

В этом блоке можно разместить несколько модулей, они будут выстраиваться в горизонтальную линию. Если суммарная ширина модулей превысит ширину страницы, модули будут выстраиваться во вторую линию. Следите за корректным отображением, если выводите несколько модулей в позиции  «bottom».

Если вы не разместили  в позиции «bottom» ни одного модуля, то блок свернется!

Блок bottommenu

Блок предназначен для вывода нижнего горизонтального меню сайта. Создавая меню в менеджере меню, вы должны дать ему заголовок «Нижнее горизонтальное меню» и  определить тип меню menubot (это системное имя) . Далее, при создании модуля меню в менеджере модулей , вы должны определить ему позицию «bottommenu»,  в основных параметрах выбрать название меню «Нижнее горизонтальное меню». Также необходимо задать дополнительные параметры модуля в блоке «Суффикс CSS-класса модуля» написать  menubot. Это обязательно!!! Запомните, этот суффикс используется только для нижнего горизонтального меню! Заголовок модуля необходимо скрыть.

Если вы не разместили в позиции «bottommenu»  горизонтальное меню, то блок свернется!

Блок footer

Блок предназначен для вывода модуля с произвольным HTML-кодом, содержащий информацию об авторских правах  копирайте или любой другой информации на ваше усмотрение. Этот модуль должен иметь суффикс foot, и выводится в позиции «footer».

Если вы не разместили модуль,  в позиции «footer», то блок свернется!

Файл index.php – самый важный в шаблоне Joomla. Он определяет визуальное расположение элементов сайта и сообщает CMS Joomla в какой блок поместить различные компоненты и модули. Файл является комбинацией PHP и HTML.

Для работы с  файлами  шаблона вам понадобится программа Macromedia Dreamweaver.

Скачайте архив шаблона Likom25. Откройте файл index.php в программе Dreamweaver. Файл находится в папке C:\JoomlaServer\home\localhost\www\название вашего сайта\templates\Likom25.

Заголовок  файла

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

<?php

defined(‘_JEXEC’) or die;

JHtml::_(‘behavior.framework’, true);

$app = JFactory::getApplication();

?>

DOCTYPE – это очень важный параметр, на основании которого браузер решает, как ему отображать эту страницу и как интерпретировать CSS.

<?php echo ‘<?'; ?>xml version=»1.0″ encoding=»<?php echo $this->_charset ?>»?>

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

Следующий фрагмент извлекает установленный язык из глобальной конфигурации.

<html xmlns=»http://www.w3.org/1999/xhtml» xml:lang=»<?php echo $this->language; ?>» lang=»<?php echo $this->language; ?>» dir=»<?php echo $this->direction; ?>» >

Далее идет  фрагмент кода, который включает дополнительную информацию для заголовка, которая задана в глобальной конфигурации. Эту информацию вы можете увидеть посмотрев исходный код любой веб-страницы. В частности – это мета-теги, о которых вы уже знаете.

<head>

<jdoc:include type=»head» />

Следующие строки в заголовке содержат ссылки на основные CSS стили Joomla 2.5.

<link rel=»stylesheet» href=»/<?php echo $this->baseurl ?>/templates/system/css/system.css» type=»text/css» />

<link rel=»stylesheet» href=»/<?php echo $this->baseurl ?>/templates/system/css/general.css» type=»text/css» />

Далее идут ссылки на все стили шаблона. На каждый файл CSS, имеющийся в шаблоне, обязательно должна стоять ссылка в этой части, иначе файл не будет задействован в оформлении шаблона.

<link rel=»stylesheet» href=»/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css» type=»text/css» />

<link rel=»stylesheet» href=»/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/menu.css» type=»text/css» />

Следующий фрагмент кода позволяет нам «выключать» колонку автоматически или «свертывать» ее, если она не содержит контента. Если в позициях «left» и « right» не расположено ни одного модуля, то они сворачиваются и колонка контента занимает  100% ширины страницы.  Если включена только одна колонка, то контент занимает 80%. При дух включенных колонках на контент приходится 60% ширины страницы.

<?php

if($this->countModules(‘left and right’) == 0) $contentwidth = «100»;

if($this->countModules(‘left or right’) == 1) $contentwidth = «80»;

if($this->countModules(‘left and right’) == 1) $contentwidth = «60»;

?>

Заключительная часть заголовка подключает файл favicon.ico , который является  идентификационным значоком сайта. Его можно увидеть в адресной строке браузера, слева от URL сайта, а также при выдаче сайтов в поиске Яндекса.

<link rel=»icon» href=»/templates/likom25/favicon.ico» type=»image/x-icon»>
<link rel=»shortcut icon» href=»/templates/likom25/favicon.ico» type=»image/x-icon»>
</head>

Тело страницы

Далее тегом <body> открывается громадный блок оформления веб-страницы.

<body>

Блок «page» содержит  оформление страницы сайта

<div id=»page»>

Блок «pathway»  находится в самом верху страницы и содержит в себе два блока «breadcrumbs » и «user1″.

<div id=»pathway»>
<div id=»breadcrumbs»>
<jdoc:include type=»module» name=»breadcrumbs» />
</div>
<div id=»user1″>
<jdoc:include type=»modules» name=»user1″ />
</div>
</div><!— конец блока pathway—>

Дальше идет блок шапки сайта header. В нем выводится название вашего сайта автоматически, а самостоятельно вы можете занести в код слоган сайта, между тегами <h2></h2>

<div id=»header»>

<h1><?php echo $app->getCfg(‘sitename’); ?></h1>

<h2> <p>Здесь вы можете разместить слоган вашего сайта</p>  </h2>

</div>

Вывод модуля горизонтального меню в блоке «user2».

<?php if($this->countModules(‘user2′)) : ?>
<div id=»topmenu «>
<jdoc:include type=»modules» name=»user2″ style=»xhtml» />
</div>
<?php endif; ?>

Открывается блок левой колонки, которая будет сворачиваться, если в позиции «left» не будет ни одного модуля.

<?php if($this->countModules(‘left’)) : ?>
<div id=»left»>
<jdoc:include type=»modules» name=»left» style=»xhtml» />
</div>
<?php endif; ?>

Открывается самый важный блок контента, который может занимать 100% ширины страницы,  80% и 60%, в зависимости от количества включенных колонок.

<div id=»content<?php echo $contentwidth; ?>»>

Вывод содержимого контента.

<jdoc:include type=»component» style=»xhtml» />

В блоке контента заключен блок «user3» для нижней навигации.

<?php if($this->countModules(‘user3′)) : ?>
<div id=»user3″>
<jdoc:include type=»modules» name=»user3″ style=»xhtml» />
</div>
<?php endif; ?>

Закрывается блок контента content

</div>

Открывается блок правой колонки, которая будет сворачиваться, если в позиции «rigth» не будет ни одного модуля.

<?php if($this->countModules(‘right’)) : ?>
<div id=»rigth»>
<jdoc:include type=»modules» name=»right» style=»xhtml» />
</div>
<?php endif; ?>

Вывод блока «bottom».

<?php if($this->countModules(‘bottom’)) : ?>
<div id=»bottom»>
<div id=»bottombox»>
<div id=»bottomboxin»>
<jdoc:include type=»modules» name=»bottom» style=»xhtml» />
</div> </div></div>
<?php endif; ?>

Вывод блока «bottommenu» для нижнего меню сайта.

<?php if($this->countModules(‘bottommenu’)) : ?>
<div id=»bottommenu»>
<jdoc:include type=»modules» name=»bottommenu» style=»xhtml» />
</div>
<?php endif; ?>

Вывод блока «footer» , предназначенного для размещения информации  об авторских правах .

<?php if($this->countModules(‘footer’)) : ?>
<div id=»footer»>
<jdoc:include type=»modules» name=»footer» style=»xhtml» />
</div>
<?php endif; ?>

Закрываются блок страницы сайта «page», body и весь код.

</div>

</body>

</html>

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

В каждом шаблоне Joomla 2.5 должен находится файл содержащий таблицы стилей для оформления сайта. В шаблоне Likom25, таких файлов два — template.css и menu.css. CSS – код шаблона был разделен на два файла для удобства пользования и работы.  Template.css содержит таблицы стилей для всех элементов сайта, кроме меню, которые находятся в файле menu.css.

Подобных файлов CSS в шаблоне может быть различное количество. Если вы решили разделить CSS – код на несколько файлов, обязательно пропишите их названия  в index.php и templateDetails.xml.

Необходимо отметить, что в таблицах прописан не только стиль оформления блоков и их позиционирование, но и стиль модулей, элементов и компонентов сайта, которые выводятся в этом блоке.

Описывать код файлов template.css и menu.css в статье, я не буду, он достаточно подробно прокомментирован в самих файлах

Вы уже знаете, что блоки user2, left, right, user3, bottom, bottommenu, footer сворачиваются, если в них не выведен ни один модуль. Таким образом, из административной панели Joomla, не внося изменений в код страницы и таблицы стилей CSS шаблона, вы можете легко изменить дизайн сайта.

Следующий способ – внести изменения в файл index.php. Вы можете поменять местами код, отвечающий за вывод того или иного блока. Для примера рассмотрим три варианта.

Первый вариант – выводим обе колонки сайта слева от колонки контента. Для этого:

Открываем файл index.php в программе Dreamweaver;

  • Находим часть кода отвечающего за вывод правой колонки ;
  • Вырезаем код;
  • Ставим вырезанный код после вывода кода левой колонки и получаем следующий результат.

Измененный шаблон вариант 1

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

Измененный шаблон вариант 2

Третий вариант – можно поменять местами горизонтальное меню и блок вывода верней навигации и поиска. Для этого меняем местами  в файле index.php код вывода блока pathway  и код блока user2. Получаем следующий результат.

Измененный шаблон вариант 3

Как видите, за несколько минут вы смогли внести изменения в дизайн шаблона. Однако самые существенные изменения в дизайне можно сделать при помощи таблиц стилей CSS.

Следующий способ изменить дизайн сайта – сменить его цветовое решение. Процесс выбора цветового решения сайта  всегда мучителен. Если у вас творческий кризис и нет четкой идеи, какие цвета использовать в оформлении сайта, то  вам может помочь программа Artisteerгенератор шаблонов для Joomla, WordPress, Drupal, DotNetNuke, Blogger.com .

В этой программе, вы с легкостью сможете создать примерный дизайн своего сайта,  и самое главное, выбрать цветовое решение для него. Код шаблона, генерируемый программой весьма сложен и чайнику лучше в него не лезть. Нас интересует только подборка цветов для сайта. Прелесть программы в том, что вы наглядно сможете посмотреть, как будет выглядеть страница в цвете.

После того, как вы выберите необходимые вам цвета оформления, создайте скриншот страницы с помощью программы Snagit.  Далее для составления цветовой карты шаблона, вам необходимо просканировать, созданный скриншот, при помощи маленькой программки Run Pixie. Наводите курсор на нужный вам цвет, и программа показывает код цвета в формате HTML. Запишите HTML – коды всех, необходимых вам цветов и сделайте цветовую карту.

Цветовая карта шаблона Likom содержит двенадцать цветов.

Цветовая карта шаблона

Вы можете заменить их , на цвета своей цветовой карты. Предположим, вы хотите сменить цвет горизонтального меню:

  • Откройте файл menu.css в программе  Dreamweaver;
  • Запустите программу Run Pixie и наведите курсор на фоновый цвет горизонтального меню шаблона, программа покажет вам HTML – код цвета;
  • Далее,  в программе Dreamweaver,  при помощи функции «найти и заменить», меняете код цвета на необходимый вам. Внимательно смотрите на комментарии кода, чтобы не сделать ошибки при замене цвета.

Подобным образом, вы сможете заменить цветовое оформление всех элементов сайта.

После смены цвета, вам необходимо будет заменить шапку сайта. В папка image шаблона Likom находится файл header.jpg.  Ширина изображения равна ширине страницы 950 px, а высота прописана в файле template.css и равна она 120 px.

Вы можете создать в программе Photoshop свой файл  header.jpg с такими же размерами,  и заменить им header.jpg в папке image шаблона Likom.

Как делать простейшие шапки для сайтов и как правильно их оптимизировать для WEB, вы можете посмотреть в уроках Photoshop.

Если вы хотите изменить высоту графического файла header.jpg , вам необходимо в файле template.css изменить высоту блока header  на необходимую вам, для корректной вставки графического файла в шаблон.

Итак, в результате смены цветов шаблона, графического файла header.jpg и перестановке блоков в файле index.php,  вы можете создать свой уникальный дизайн  на основе  шаблона Likom.

Архив шаблона Likom.

После того, как создан новый дизайн шаблона, необходимо создать его новый скриншот в файле  template_thumbnail.png.