Итак, продолжим учиться делать шаблоны для джумла. К сожалению, я пропадал. Но это связанно с личными обстоятельствами, не будем углубляться. 
Для создания шаблона лучше использовать готовый html шаблон. Об этом я говорил ранее – Урок 1. Введение: структура шаблона. Шаблон простой, специально для начинающих.
Для дальнейших действий, необходимы знания из второго урока- Создание файла templateDetails.xml, прочитайте и возвращайтесь.
Структура html шаблона.
Подробно рассматривать не будет. Тем, кто не знает, что и как. Идем и читаем мои бесплатные уроки по верстке html шаблона для начинающих. А также те, кто решил делать из PSD шаблона. Вначале сверстайте, а затем читайте дальше.
Распакуйте html шаблон. Назовите папку с нашим будущим шаблоном по его названию. Например, сейчас это – colour_green, я переименовал в jf_colour_green. Это и будет названием шаблона.
Давайте внесем изменения. Мы имеем:
Переименуйте папку style на css. Добавьте папку images и переместите туда все картинки. Откройте index.html и измените ссылку на стили:
<link rel="stylesheet" type="text/css" href="css/style.css" />
Теперь откройте style.css и измените ссылки на картинки:
url(“logo.png”) на url(“../images/logo.png”)
Добавьте template_preview.png и template_thumbnail.png . Пока можете добавить любые картинки или скачать их в конце статьи.
Сюда же можете скопировать файл templateDetails.xml, созданный нами во втором уроке. И удалите все html страницы, кроме главной страницы.
Шаблон joomla из html шаблона.
Открываем в текстовом редакторе (у меня Notepad++) главную страницу html шаблона – index.html .
Начинаем сверху вниз редактировать. Html теги трогать не будем (улучшать), все зависит от того, как сверстали из PSD.
Внимание! Не забудьте переименовать index.html в index.php
Перед доктайпом добавим следующее:
<?php
/**
* Template for Joomla by talgautb
* @author talgautb
* @copyright Copyright (c) 2012, www.gtalk.kz
* @license GNU GPL
*/
defined('_JEXEC') or die('Restricted access');
?>
C помощью данной части, мы указали свои копирайты и запретили прямой доступ к файлу index.php с помощью (запомните ее просто):
defined('_JEXEC') or die('Restricted access');
Теперь стоит удалить:
<title>colour_green</title> <meta name="description" content="website description" /> <meta name="keywords" content="website keywords, website keywords" /> <meta http-equiv="content-type" content="text/html; charset=windows-1252" />
Так как это выведет следующая переменная:
<jdoc:include type="head" />
Глобальные конфигурации выводятся так (title, meta теги).
Далее необходимо настроить ссылку на css стили:
<link rel="stylesheet" type="text/css" href="css/style.css" />
Делаем следующее:
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/style.css" />
Где:
<?php echo $this->baseurl ?> – глобальная переменная Joomla, есть ссылка на ваш сайт;
<?php echo $this->template ?> – переменная – название вашего шаблона.
По сути, ссылка на стили выглядит (в исходном коде):
<link rel="stylesheet" type="text/css" href="http://site.kz/templates/ jf_colour_green/css/style.css" />
Так же изменяем картинки, если они есть (например):
<img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png" width="100" height="100" alt="" border="0" />
Думаю, смысл этих двух глобальных переменных ясен. Запомните их, они из категории часто используемых и для запоминания.
Подправим templateDetails.xml
Так как в предыдущем уроке вы разобрались с файлом templateDetails.xml, и теперь сможете сами сделать для текущего шаблона (по крайне мере, я надеюсь :smile: ). Вот как данный файл должен выглядеть (будем еще вносить изменения):
<?xml version="1.0" encoding="utf-8"?> <extension version="2.5" type="template" client="site"> <name>jf_colour_green</name> <creationDate>1.08.2012</creationDate> <author>www.gtalk.kz</author> <authorEmail>gtalk.kz@gmail.com</authorEmail> <authorUrl>http://www.gtalk.kz</authorUrl> <copyright>Copyright 2012 - www.gtalk.kz</copyright> <license>GNU General Public License</license> <version>1.0.0</version> <description>It is my fist joomla template. Thanks talgautb.</description> <files> <folder>css</folder> <folder>images</folder> <filename>index.php</filename> <filename>template_thumbnail.png</filename> <filename>template_preview.png</filename> <filename>templateDetails.xml</filename> </files> <positions> </positions> </extension>
Естественно названия, даты, автора можете указать свои. Но пока сильно ничего не меняйте, мы ведь только учимся.
Установка шаблона.
Для того чтобы установить наш шаблон его необходимо заархивировать. Делаем архивацию, лучше если в zip формате.
Внимание! Если у вас есть вопросы по поводу установки joomla, настройки и т.д. Спрашивайте на форуме Joomlaforum.kz
Открой сайт на joomla (рекомендую тестировать шаблоны на локальном хостинге, например, денвер). Откройте «Менеджер расширений» и установите наш шаблон.
Перейдите в «Менеджер шаблонов», выберите наш шаблон по умолчанию. Откройте сайт. Та-да!
Пока это еще html, но:
- данный шаблон устанавливается на joomla 2.5 без ошибок (проверьте еще раз если это не так, так как у меня все ок)
- взгляните на исходный код сайта (ctrl + U). Обратите внимание на то, что между тегами <head></head>
Что предстоит сделать:
- добавления позиции для модулей;
- вывод контента;
- правка css для модулей и контента;
Чтобы не пропустить новые статьи, подписывайтесь на обновления блога. Скоро выйдут еще. Если вам понравилась статья не забудьте поделиться с друзьями, нажимайте слева на право. 
с/у УтБ
Скачать шаблон: [Download not found]
Отличное новое видео от одной из моих любимых групп Linkin Park:
