Как сделать шаблон для Joomla. Часть 1
Я постараюсь как можно более подробно описать все аспекты. С удовольствием отвечу на все вопросы в комментариях. Так как я уже написал вступление, сразу переходим к теме
Хочу сказать что если у вас нет программ для создания сайта, таких как Dreamweaver настоятельно рекомендую скачать и установить Notepad++. Это отличная замена стандартному блокноту с подсветкой кода, что очень облегчает жизнь и вёрстку.
1. Нам понадобится заготовка. Правильно свёрстаная с помощью блоков div. Для наглядности сделаем простой шаблон. Обвесить всеми украшениями ещё успеем. Главное понять принцип создания. Возьмём мы её вот отсюда. Я взял первую заготовку, так как она самая классическая. Сайт будет растягиваться на всё окно браузера и будет заполнять всю страничку. состоит из пяти областей: две колонки (левая и правая) под навигацию, вывод статей и прочего контента посередине и шапка с футером.
2. И так, теперь подумаем что и где будет находиться. У нас есть пять областей.
Шапка (Header) на картинке серого цвета
Навигация (Navigation) – голубой фон.
Статьи (Content) – белый фон.
Место под дополнительные материалы (More stuff) – оранжевый.
И самый низ сайта (Footer) – тёмно серый.
Небольшое отступление. Вы можете взять любую из этих заготовок. То что я далее буду рассказывать вполне подойдёт для всех. Так что уже с самого начала можно подобрать себе расположение блоков по своему вкусу. Единственное о чём договоримся – не меняйте названия (id) блоков (div) и их цвет до самого конца нашей общей работы.
3. Создаём папку с названием нашего шаблона . Назовём его myTemplate. Папку называем точно так же. Это важно. Теперь создадим основные файлы без которых шаблон работать не будет.
templateDetails.xml
index.php
Так же создаём папку css и images . Вот что у нас должно получиться в результате:
Самое время использовать нашу заготовку в моём случае это LayoutGala01.html . Открываем её с помощью Notepad++ и копируем всё содержимое в ранее созданный файл index.php
4. Создаём файл где у нас будут хранится стили. Он будет лежать в папке css и назовём мы его template.css .
5. Копируем из index.php все строчки между тегами <style type=”text/css”> и </style>.
html,body{margin:0;padding:0}body{font: 76% arial,sans-serif}p{margin:0 10px 10px}a{display:block;color: #981793;padding:10px}div#header h1{height:80px;line-height:80px;margin:0; padding-left:10px;background: #EEE;color: #79B30B}div#content p{line-height:1.4}div#navigation{background:#B9CAFF}div#extra{background:#FF8539}div#footer{background: #333;color: #FFF}div#footer p{margin:0;padding:5px 10px}
div#wrapper{float:left;width:100%}div#content{margin: 0 25%}div#navigation{float:left;width:25%;margin-left:-100%}div#extra{float:left;width:25%;margin-left:-25%}div#footer{clear:left;width:100%}
Если вы установили Notepad++ и работаете в нём то это строчки с восьмой по двадцать четвёртую. Сохраняем файл template.css и закрываем.
6. Открываем файл index.php и удаляем строчки с первой по двадцать шестую. Вот эти:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Layout 1</title>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″>
<meta name=”generator” content=”HAPedit 3.1″>
<style type=”text/css”>
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#wrapper{float:left;width:100%}
div#content{margin: 0 25%}
div#navigation{float:left;width:25%;margin-left:-100%}
div#extra{float:left;width:25%;margin-left:-25%}
div#footer{clear:left;width:100%}
</style>
</head>
Вместо них в начало файла записываем вот эти:
<?php echo ‘<?xml version=”1.0″ encoding=”utf-8″?’ .’>’; ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”{LANG_TAG}” lang=”{LANG_TAG}” dir=”{LANG_DIR}” >
<head>
<jdoc:include type=”head” />
<link rel=”stylesheet” href=”templates/myTemplate/css/template.css” type=”text/css” />
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
</head>
Жирным шрифтом я выделил название нашего шаблона, а подчеркнул имя файла стилей. Вот это строка
<link rel=”stylesheet” href=”templates/myTemplate/css/template.css” type=”text/css” />
и является путём к нашему файлу стилей.
На сегодня всё. Ждите продолжения и подписывайтесь на мой блог.
Мне вот кажется, что такое написать мог то ли креативный гений, то ли героиновый наркоман