Zaksamota's Blog

Как сделать шаблон для Joomla. Часть 1

Zak Samota — Sat, 23 Jan 2010 01:38:11 +0000

Я постараюсь как можно более подробно описать все аспекты. С удовольствием отвечу на все вопросы в комментариях. Так как я уже написал вступление, сразу переходим к теме

Хочу сказать что если у вас нет программ для создания сайта, таких как 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 все строчки между тегами .

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%}

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 и удаляем строчки с первой по двадцать шестую. Вот эти:

Layout 1

Вместо них в начало файла записываем вот эти:

’; ?>

myTemplate/css/template.css» type=»text/css» />

Жирным шрифтом я выделил название нашего шаблона, а подчеркнул имя файла стилей. Вот это строка

myTemplate/css/template.css» type=»text/css» />

и является путём к нашему файлу стилей.

На сегодня всё. Ждите продолжения и подписывайтесь на мой блог.

Как создавать шаблоны для joomla. Начало.

Zak Samota — Thu, 21 Jan 2010 21:33:28 +0000

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

Начну с того что до того самого злополучного месяца я ни разу не делал шаблонов ни под одну cms. Так что я был идеальным чайником в этом вопросе. И так, с чем сталкивается неподготовленый и неискушенный в этой теме верстальщик?

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

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

3. Не раз попадались всяческие видеокурсы и книги в формате .pdf . Да, это конечно здорово, но я как и большинство – ленивый копипастер того, что можно просто скопировать вместо занудного переписывания. Я не спорю, если вбить с клавиатуры всю страничку, то станет понятнее что и как на ней расположено. Но, извините меня, вбивать вот такое:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

это просто вершина задротства:)

4. Многие каркасы шаблонов написаны табличной вёрсткой, что как вы сами понимаете, не совсем хорошо с точки зрения поисковиков. Даже на одном из самых популярных по этому запросу сайтов даётся именно такой шаблон.

Этих пунктов вполне хватило чтоб я решил написать свою статью-учебник. Начнём с начала:)

Я не стану расписывать как устанавливать джумлу. С этим как раз, при минимальных навыках, можно легко справиться используя официальную документацию. Хотя, если будут предложения - могу написать и об этом. И так – joomla уже установлена на сайт/виртуальный сервер/ещё куда нибудь и готова к работе. Вот с этого момента и начнём.

создание шаблона для joomla. часть первая

Подписывайтесь и задавайте вопросы.

День второй

Zak Samota — Tue, 19 Jan 2010 20:33:19 +0000

Нашел форум по virtuemart. Рабочий и полезный. Поковырял начинку. В принципе код вывода товаров ковырять нет необходимости. Всё можно задать с помощью css. Только чуть больше дивов наставлю (:

Итоги дня. Если бы не проклятая основная занятость глупостями за которые получаю деньги, то продвинулся бы больше. А так – всё впереди.

Научился пользоваться вордпрессовским поиском по блогам. Пока интересных не нашёл. Точнее нашёл несколько любопытных, но давно заброшеных. От блогов по СЕО начинает подташнивать, но пока из ридера не выкину. Ещё не всё перечитал за полгода:)

После работы абсолютно нечего делать, но сидеть ещё и вечером за вёрсткой не хочется. Холодно и некомфортно. Моя любимая онлайн игрушка «Аллоды» жутко лагает. Но это полбеды. К этому прибавились в этом году и постоянные дисконнекты. Одним словом – капец. По такому случаю сходил на фильм «Аватар» в 3D кинозал. Я его уже смотрел в обычном кинотеатре, но под влиянием общественности решил ещё (впервые в жизни) поглядеть в трёхмерном измерении. Понял для себя что трёхмерности в кино не главное. А фильм хороший. Как сказала Каша Сальцова в своём твиттере – современная сказка про Мересьева.

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

UPD: Когда не с кем поговорить, люди пишут вот такие посты

День Первый

Zak Samota — Mon, 18 Jan 2010 22:13:55 +0000

Открыл сайт сделанный на джумле. Сделал простенький шаблончик. Завтра буду ковырять начинку virtuemart (это такой плагин к joomla позволяющий без особого труда сделать магазин). Итоги – на вид пока страшненько, но всё можно переделать. Шеф (один из) тыкнул пальцем в понравившийся ему сайт и сказал – Хочу чтоб вот так товары отображались. Ну что ж, попробуем.

Несколько слов о себе(мои будущие работодатели и клиенты – вы этого не видели:) ). По багажу знаний я сейчас обезьянка-верстальщик. Хорошо знаю html и css. Имею представление о скриптах и php, но ничего свыше этого. Ах да, ещё Photoshop на отлично, но это не главное в веб дизайне, как по мне. Достаточно просто хороших знаний.

С чем я начинаю делать этот магазин-сайт? А вот с теми знаниями что я описал выше. Посмотрим выйдет или нет.

И так, уважаемый читатель сего, тема блога раскрыта – создание интернет магазина с базовыми знаниями в вебе. Площадка joomla + virtuemart. Инструменты – форумы по жумле, как русскоязычные, так и англ. Вот некоторые из них:

http://joomlaportal.ru/ – Первый в поисковике любимого мною гугла. Сверхполезный для начинающих. Но, к сожалению на то время что я там искал мне ни разу не попался толковый мануал по созданию собственного шаблона. Сей мануал я нашел на хабре. С удовольствием даю ссылку на цикл статей:

http://habrahabr.ru/blogs/joomla_cms/41213/ Вот начало этого цикла. Очень рекомендую. Не знаю как у кого получилось сделать первый шаблон для joomla, но я пока не воспользовался этими статьями делал лишь беспомощных уродцев.

На сегодня всё. Продолжим завтра.

P.S. Кстати, после магазина собираюсь переезжать с блогом на свой личный сайт. Есть хостинг и имя, но хочется сделать его уже вооружившись знаниями и практикой.

Не начать ли мне печатать полезные ссылки по joomla?

Zak Samota — Mon, 18 Jan 2010 13:29:11 +0000

Столько всего уже перекопал, столько закладок.

Пожалуй сложу здесь со своими комментариями.

Жизнь с понедельника

Zak Samota — Sun, 17 Jan 2010 13:43:14 +0000

На следующей неделе открываю магазин на движке joomla+virtemart

подробности позднее

О том что здесь будет

Zak Samota — Fri, 15 Jan 2010 19:36:04 +0000

Вот уже полгода читаю блоги сеошников и вебдизайнеров. Подумал – чем я хуже? И решил сделать блог о том как я стал веб дизайнером. До вершин дизайна мне ещё очень далеко, но есть огромное желание роста. И так – отсчёт пошел.

Планы на этот год:

1. Открыть электронный магазин www.instrade.co.ua

2. Сделать сайт-портфолио (есть домен, но пока повременю с публикацией)

3. Начать зарабатывать с помощью своего хобби (вёрстка и дизайн)

4. Выучить PHP