Как сделать шаблон для joomla

Шаблон — это внешнее оформление сайта, это его дизайн и компоновка, это та оболочка, с которой непосредственно сталкивается пользователь.

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

Обычно, шаблоны либо скачивают уже готовые, либо покупают у специалистов, которые под заказ соглашаются сделать все, что угодно. Но в данной статье вы узнаете, как происходит самостоятельная верстка макета для сайтов Joomla.
https://www.youtube.com/watch?v=iLgc2xnMaN8

Как можно сделать шаблон Joomla своими руками, что для этого понадобится

Есть разные способы создания собственного макета для движка Joomla. Один из самых простых — это использовать специальноt ПО для ускоренного создания шаблона. Есть ни одна программа, которая позволяет без знания кода делать замечательные сайты. Но проблема в том, что часто такая программа труднодоступна — то есть стоит слишком много для начинающего вебмастера. Хорошая программа такого плана — это Aristeer. Это не единственная программа, которая поможет вам сделать шаблон, и если вас интересует именно такая верстка посредством приложений, тогда собирайте деньги на покупку специального ПО.

Другой простой вариант, как сделать макет для Joomla — это переписывание уже готового шаблона. То есть вы берете чужой шаблон, меняете его составляющие и делаете из него свой макет для сайта. Но настоящим романтикам IT-сферы такой метод явно не понравится, потому перейдем к третьему, самому сложному и интересному способу — вы узнаете как сделать шаблон своими руками с нуля для любого сайта на движке Joomla.
https://www.youtube.com/watch?v=1aZEz5oHMlE

Верстка шаблона для Joomla — какие особенности

Основная особенность и при этом преимущество создания макета для движка Joomla — это блочная структура шаблонов. Это большой плюс для новичков. Им не придется сталкиваться со сплошным потоком кода, а нужно будет постепенно изучать строение различных блоков макета, разделенных тегом <div>. Чтобы создать достойный шаблон Joomla, нужно будет лишь сделать заготовку (в этом поможет программа Photoshop), а потом разделить дизайн на несколько блоков и прописать их в коде.

В Joomla есть такое понятие, как расширения. Это функциональные части сайта, основной которых являются компоненты и модули. Именно их расположение вы и будете прописывать в блоках <div>. Компоненты займут больше места, модули — меньше. Вы должны заранее определить, где будет находится основной контент (компонент), а где различные мелкие элементы и функциональные блоки (модули). Вот примерный набор блоков <div> для полноценного сайта:

1. Logo — данный блок предназначен для вывода логотипа сайта/компании. Обычно, его размещают в верхней части сайта, то есть в шапке.
2. Справа от Logo можно разместить блок модуля для поиска по сайту Joomla.
3. Как правило, у ресурса есть блок «футер» — это подвал сайта, где размещается различная информация, вроде карты сайта, контактов и прочего.
4. Content — это основа сайта, компонент, в котором будет выводиться главная информация страницы.
5. Left и right — это боковые модули, в которые можно будет поместить онлайн-калькуляторы, формы авторизации, календари и прочее.
6. Header — это «голова» сайта, которая содержит его заголовок, описание, слайд-шоу (обычно) и прочее.

Вот и весь примерный набор блоков для полноценного сайта. У вас может быть абсолютно иной набор позиций, и это нормально.
https://www.youtube.com/watch?v=vhfMA0IGhbA

Какие файлы нужно будет создать для шаблона Joomla

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

Для начала создайте папку images. Она не будет выполнять функции хранилища для медиафайлов, размещаемых в контенте — она нужна для хранения картинок, которые используются в шаблоне. Учтите, что если вы решили создать свой шаблон, то эта папка обязательно должны быть чем-то наполнена, иначе Joomla откажется читать вашу дизайнерскую затею и выдаст на экране ошибку.

Следующая папку, которую вам необходимо сделать — это CSS. В данной директории будут содержаться все файлы каскадных стилей, которые определят дизайн вашего шаблона. Обязательно поместите в папку файл template.css, пусть даже пустой — с него и начнете свою верстку с нуля.

Но самое главное, что вам нужно сделать, чтобы сгенерировать свой шаблон в CMS Joomla — это создать файл index.php. Именно этот файл станет основным связующим между движком и вашим дизайном. Создавать этот файл, да и вообще весь шаблон, лучше через специальный редактор. Лучший в своем роде для новичков — это Macromedia Dreamweaver. Если вы ненароком сделаете ошибку в коде, умная программа сообщит вам об этом, наподобие того, как Word подчеркивает ошибки красным.
https://www.youtube.com/watch?v=DYR4yXnjn8M

Из чего будет состоять файл index.php

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

целом, файл имеет одну и ту же структуру на разных сайтах, потому со временем вы научитесь его быстро создавать. Начинается файл с информации о заголовке, а также о мета-тегах сайта. Далее следуют ссылки на CSS файлы шаблона, помещенные в ранее созданную папку CSS. Также очень важно в первой части файла прописать функцию сворачивания позиций, в случае отсутствия в них модулей. Без прописи такой функции верстка будет неудачной, потому что сайт будет выглядеть пустым — блоки видны, а в них ничего нет. Раздел заголовка закрывается тегом .

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

Учтите, что файл index.php должен быть написан при помощи кодировки UTF-8. В ином случае вы не сможете вносить корректировки в созданный макет через админку движка Joomla.
https://www.youtube.com/watch?v=yZTAYCGMSVs

Как инсталлировать свой шаблон на сайт с движком Joomla

Теперь, когда у вас уже созданы все необходимые папки и главный файл index.php, вы можете попробовать установить макет на сайт Joomla. Но, скорее всего, у вас не получится этого сделать. А все потому, что для инсталляции на движок в директивах макета должен содержаться еще один связующий файл — templateDetails.xml. Этот файл сообщит движку, куда ему обращаться для определения внешнего вида сайта. По сути, templateDetails.xml будет «отчитываться» перед Joomla по поводу наименований файлов и их расположению.

Кроме того, вам необходимо будет указать в templateDetails.xml наименования позиций, используемых в шаблоне. В будущем, чтобы добавить новую позицию, вам необходимо будет прежде ее прописать в этом файле, а потом и в «индексе». После того, как вы наполните файл templateDetails.xml, можете попробовать установить шаблон на сайт. Для этого перейдите в админку Джумла. Далее зайдите в раздел «Менеджер расширений», а оттуда в «Шаблоны». Установите созданный вами макет через обзор диска на компьютере и активируйте его. Либо можете сразу загрузить файлы на хостинг, а потом активировать макет через админку.

Учтите, что это лишь примерная инструкция без деталей написания кода. Вам предстоит изрядно помучиться, прежде чем вы сами напишите качественный шаблон. Но на то она и верстка, чтобы учиться на своих ошибках!
https://www.youtube.com/watch?v=J2GwZkkKR4o

joomlalib.ru

Сегодня мы поговорим на очень актуальную тему «Как создать свой шаблон Joomla или как натянуть сайт и html верстку на Joomla».

Итак

Шаг 1

Скачиваем последнюю версию Joomla (на момент написания статьи такой была версия joomla 3.4.5) и устанавливаем ее на ваш домен, где планирует размещать сайт

Шаг 2

Создаете папку с названием вашего сайта в вашсайт/templates/

Например у меня сайт называется soft

Шаг 3

Файл TemplateDetails.xml . Я подготовил шаблон, который достаточно будет скачать тут и просто вносить правки согласно своего сайта.

Открываем его и смотрим

Шапка

Это версия и т.д. Обычный стандартный набор. Тут ничего не трогаем и не меняем

<name>Название вашего сайта</name

<description>Описание вашего сайта</description>

<version>Версия вашего сайта</version>

Если, допустим, вы делаете апдейт своего сайта, выпускаете его новую версию, то просто пишите, например, 2.0 и т.д.

<creationDate>Дата создания вашего сайта/шаблона</creationDate>

<author>Автор<author>

<authorEmail>e-mail автора</authorEmail>

<copyright>Копирайт на ваш сайт</copyright>

Далее мы должны определить в этом файле папки и файлы, которые относятся к нашему шаблону

<filename> — определяем файлы

index.html — моя верстка

index.php — для начала в этот файл пишем

templateDetails.xml — это файл, с которым мы работали выше

template_thumbnail.png — иконка шаблона, которую можно будет увидеть в меню выбора шаблонов в админке Joomla.

template_preview.png — превьюха шаблона, которую можно увидеть в менеджере шаблонов в joomla

<folder> — определяем папки, которые используются в шаблоне

С пока что использую стандартный набор папок: css, js и html.

Закрываем <extention>. Наш ваш templateDetails.xml готов.

Шаг 4

Создание архива с шаблоном для установки

Просто архивируем нашу папку с файлами в .zip

На сегодня все. Мы создали архив с файлами, которые необходимы нам для установки собственного шаблона в Joomla. В следующей статье я уже напишу о том, как собственно говорят, установить этот шаблон и настроить его

forwww.com

Введение

Цель этого урока — послужить введением в создание Joomla! шаблонов. Он будет охватывать необходимые файлы и код, который нужен для создания базового шаблона. Код представлен в таком виде, что его можно скопировать и вставить в Ваш шаблон с незначительными адаптациями.

Установка структуры каталогов

Чтобы создать самый простой шаблон, «»создайте новую папку» в папке «шаблоны». Назовите папку по названию Вашего шаблона, т. е. «mynewtemplate».

Используя ваш любимый текстовый редактор, создайте файлы index.php

и templateDetails.xml Для поддержания порядка в файлах, создайте «‘две новые папки» » с названием «images» и «css». Внутри папки «css» создайте файл с названием template.css.

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

Это самые простые практичные найстройки. Структура папок и файлов может быть такой:

 * mynewtemplate/ ** css/ *** template.css ** images/ ** index.php ** templateDetails.xml 

Создание базового templateDetails.xml файла

TemplateDetails.xml файл необходим. Без него, ваш шаблон не будет виден в Joomla!. Этот файл содержит ключи метаданных о шаблоне.

Структура и синтаксис файла зависит от той или иной версии Joomla.

Для , используйте следующее:

Для и более поздних, используйте следующую версию файла. Измените цифры версии version="2.5"

на версию вашего Joomla! пакета.

Так что, как видите, у нас есть набор установок между тегами разметки (в <element>). Наилучший способ это скопировать и вставить этот фрагмент кода в Ваш templateDetails.xml файл и изменить соответствующие параметры (такие как <name> и <author>).

В <files> части должны содержаться все файлы, которые Вы используете в шаблоне. Вероятно Вы еще не знаете как они будут называться, но не волнуйтесь, обновите эту часть файла позже. Элемент <folder> можно использовать, чтобы определить всю папку сразу.

Оставьте позиции такими как они есть — это обычный набор, который позволит Вам легко переключаться из стандартных шаблонов.

Создание базового index.php файла

index.php файл является ядром каждой страницы Joomla!. По сути, вы делаете обычну html-страницу, в которую вставляете PHP код, который будет вставлять содержание вашего сайта. Шаблон создается путем добавления кода в Joomla с указанием позиций модулей и компонентов в соответствующем разделе вашего шаблона. Все, что добавляется в шаблон будет отображаться на всех страницах, кроме разделов сформированных через систему управления сайтами Joomla (или индивидуальным кодом).

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

Начнем

Шаблон Joomla начинается с следующих строк:

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

Вторая строка-это Объявление типа документа (DOCTYPE), который сообщает браузеру (и Веб-краулерам) какой тип HTML-кода используется на вашей странице. Тип документа, используемый здесь совместим с HTML5, новой версией HTML, которая во многом сохраняет обратную совместимость, но содержит много новых возможностей. Вы должны знать, что это не будет хорошо работать в Internet Explorer 8 или более ранних без патчей. Вам стоит продумать это и учесть пожелания ваших клиентов, прежде чем решить, какой Тип документа использовать. Так или иначе указанный тип документа является основным в Joomla версии и более поздних.

Третья строка начинает наш HTML-документ и указывет язык сайта. HTML-документ делится на две части, заголовок (head) и тело (body). Заголовок будет содержать информацию о документе, а тело будет содержать код сайта, который управляет макетом.

Заголовок

Первая строка просит Joomla вставить соответствующую заглавную информацию. Это включает в себя Заголовок страницы, Мета-данные, а также код JavaScript. Следующие строки создают ссылки на две страницы стилей и собственную таблицу стилей (если это именованный шаблон.в CSS и находится в папке "CSS", в папке вашего шаблона каталога. Так что если ваш шаблон в http://www.mysite.com/templates/my_template/ тогда CSS-файлы будут идти в http://www.mysite.com/templates/my_template/css/).

Тело (Основная часть страницы)

Невероятно, но этого будет вполне достаточно! Да, это очень простой макет, но это будет работать. Все остальное будет сделано на Joomla!. Эти линии, обычно называют декларациями jdoc, которые сообщають Joomla запрос на вставку информации из определенных частей системы Joomla. Внимание: убедитесь, что ваше меню готово быть размещено в «верхней» позиции модуля.

Module Positions

Above, the line which says name="top" adds a module position called top and allows Joomla to place modules into this section of the template. The type="component" line contains all articles and main content (actually, the component) and is very important. It goes in the centre of the template.

Note: You can add your own module lines anywhere you want in the body, but you have to add a corresponding line to the templateDetails.xml file which sits alongside the index.php of your template.

End

Finish it off — one last bit:

Custom Images

If you want to add any images to the template you can do so like this:

Here the template variable will fill in the name of your template.

Custom CSS

You can add custom css like this:

Every file which is added must have a line in the templateDetails.xml file for the template, unless it resides in a sub-folder (which can be included in a <folder> element).

Это будет в окончательной версии файла:

Тестирование шаблона

Найдите шаблон в менеджере шаблонов (в меню Расширения), выделите его и нажмите кнопку «‘по умолчанию»‘ (в виде звездочки), чтобы сделать его шаблоном по умолчанию.

В Joomla! 1.5, новый шаблон будет отображаться непосредственно в Диспетчере шаблонов, которые доступные также через меню Расширения -> менеджер шаблонов.

+ в Joomla! 2.5 и позже, сначала надо указать для Joomla!, что Вы создали новый шаблон. Эта функция называется «Откройте для себя расширения» и может быть доступна через Расширения -> менеджер расширений -> Найти (например выбрать «одну из вкладок»). Нажмите кнопку «‘открыть»‘ (т. е. найти «кнопку»), чтобы найти свой шаблон, то выберите его и нажмите «установить», чтобы установить его. Теперь Ваш шаблон должен отображаться в менеджере шаблонов (стилей), доступный через Расширения -> менеджер шаблонов.

Кроме того Вы можете создать свой шаблон вне Joomla! и просто установить его как любое обычное расширение.

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

Архивизация шаблона для установки

Packaging a extension/ru

docs.joomla.org

Создание структуры для шаблона сайта на Joomla 3

Основой любого шаблона являются файлы и папки различного назначения:

• Специальный установочный манифест-файл (templateDetails.xml)
• Индексный файл, определяющий основную структуру сайта (index.php)
• Файл стилей (template.css)

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

С теорией разобрались, теперь давайте приступим к созданию структуры собственного шаблона для сайта. Для начала создайте обычную папку с именем будущего шаблона. В моем случае папка будет называться joom4all. Теперь следует её наполнить теми самыми файлами, про которые я писал выше. Чтобы не заморачиваться предлагаю скопировать эти файлы с одного из стандартных шаблонов, к примеру с шаблона Protostar. Набор файлов и папок данного шаблона следующий:

Но как Вы уже, наверное, поняли, все эти файлы и папки нам не нужны точно так же как и не нужно их содержимое. Для начала я удаляю лишние папки, которые не понадобятся для моего шаблона, это папки less и img. Теперь необходимо очистить содержимое оставшихся папок, но тут есть один момент, во избежание проблем во все вложенные каталоги необходимо добавить пустой файл index.html.

Теперь удаляем лишние файлы (component.php, error.php, favicon.ico, offline.php) расположенные в корневой папке, они нам не понадобятся. В результате у Вас должен получиться примерно следующий набор файлов шаблона:

Для тех, кто ни разу не сталкивался с редактированием, а тем более с созданием собственного шаблона для Joomla будет не лишним объяснить, что это за набор папок и файлов и для чего они нужны:

• index.php – файл, отвечающий за структуру будущего шаблона, другими словами файл разметки.
• templateDetails.xml – данный файл необходим для любого расширения, содержит определенные инструкции по установке расширения.
• template_preview.png – полноразмерный скриншот шаблона, который показывает его приблизительный внешний вид. Посмотреть его можно в админке щелкнув по миниатюре шаблона.
• template_thumbnail.png – а это собственно та самая миниатюра, или если хотите превьюшка нашего шаблона. Отображается она так же в админке в разделе «Расширения» -> «Шаблоны» -> «Шаблоны».
• favicon.ico – название файла говорит само за себя, это обычный значок сайта, который отображается во вкладках браузера перед названием страницы, а так же в результатах поиска.
• css – папка, в которой будут храниться стили нашего шаблона.
• fonts – если Вы будите использовать для шаблона дополнительные шрифты, то эта папка как раз для них.
• html – в данной папке мы будем хранить переопределения макетов различных расширений, по большей части модулей.
• images – каталог с изображениями для шаблона
• js – папка для хранения шрифто
• language – папка для хранения локализаций (языковых пакетов) для нашего шаблона. По большому счету, если шаблон делается чисто для себя, то в данной папке, как и в локализациях, нет смысла, но я все же решил показать, как создаются языковые пакеты и как ими пользоваться. В дальнейшем это может пригодиться.

Теперь давайте перейдем во вновь созданную папку language и создадим в ней новый каталог для русской локализации нашего шаблона с именем «ru-RU». В этом каталоге создаем два новых файла «ru-Ru.tpl_joom4all.ini» и «ru-Ru.tpl_joom4all.sys.ini». Имя файла подбирается не случайно, вначале указываем язык локализации, в нашем случае это русский (ru-RU), далее точка, после нее мы указываем, что данный файл перевода предназначен для шаблона (tpl) и далее через нижнее подчеркивание указываем имя шаблона (joom4all).

Файл с расширением «ini» будет отвечать за русскоязычное (в данном случае) описание каких бы то ни было строк в настройках шаблона и прочих его форм, а второй «sys.ini» за описание шаблона в момент его установки, описание позиций и т.д. В итоге структура папки language у нас должна получиться вот такого вида:

Если Ваш шаблон будет содержать больше одного языка, то по аналогии создаем новые папки (для английского это будет папка en-GB) и новые файлы локализации.

Структура сайта готова, но содержимое файлов index.php и templateDetails.xml осталось прежним от стандартного шаблона Protostar, для нашего шаблона их содержимое нам больше не пригодиться, поэтому полностью очищаем данные файлы и сохраняем изменения. Точно так же заменяем PNG файлы своими изображениями, и в заключении меняем фавикон. Для создания своей уникальной фавиконки могу посоветовать онлайн генератор favicon.by, это один из лучших онлайн генераторов.

На этом вводная часть статьи на тему создание шаблона для Joomla 3 подошла к концу, в следующей статье я расскажу, как правильно составить манифест-файл templateDetails.xml для нашего шаблона, после чего мы приступим к установке нашего нового, пока еще совершенно сырого шаблона.

joom4all.ru

Joomla!, как и любая другая современная Система управления содержимым вэб—сайта, предоставляет большие возможности для изменения внешнего оформления. Выполняется это посредством установки специально разработанного шаблона (по англ. template). Можно установить готовый шаблон (бесплатный или платный), а можно сделать свой собственный, как с «нуля», так и переделав уже готовый.

Joomla!, как и любая другая современная Система управления содержимым вэб—сайта, предоставляет большие возможности для изменения внешнего оформления. Выполняется это посредством установки специально разработанного шаблона (по англ. template). Можно установить готовый шаблон (бесплатный или платный), а можно сделать свой собственный, как с «нуля», так и переделав уже готовый.

Все файлы шаблона (кроме графических) — текстовые. Основу шаблона составляет файл разметки документа на языке HTML со вставками PHP-функций и файл(ы) описания стилей (CSS).

Так же возможно применение динамических элементов на основе JavaScript и/или Macromedia Flash.

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

{mospagebreak title=2. Что такое шаблон}

Шаблон, как уже было сказано выше,— это элемент системы, отвечающий за внешнее оформление сайта. Шаблоны бывают, как платные, так и бесплатные. Следует заметить, что свободно распространяемые шаблоны довольно часто бывают «недоделанными» или же (что очень вероятно) не предусматривают дополнительное оформление для модулей и компонентов, не входящих в стандартно распространяемый комплект CMS Joomla!. Кстати, этого недостатка не лишены и коммерческие шаблоны. В общем-то, это нормально, ибо невозможно учесть всё разнообразие разрабатываемых расширений под эту популярную CMS. Так что, если и платить, то уж лучше за работу «под ключ», а бесплатный шаблон, скорей всего, Вам придётся уже «доводить до ума» своими руками.

С точки зрения Joomla шаблоны бывают двух типов: шаблон для внешнего представления сайта посетителям (т.н. frontend) и шаблон для административной части (т.н. backend). Поскольку нас, прежде всего, интересует первое, то этим и займёмся.

Для того, чтобы создавать шаблон, вам необходимо (я бы даже сказал — настоятельно рекомендуется) владеть знаниями в HTML, CSS и (желательно) PHP, ну и плюс JavaScript (и чем больше знаний,— тем лучше).

{mospagebreak title=3. Файлы шаблона}

Минимальный состав шаблона следующий:

• файл index.php
• файл templateDetails.xml
• файл template_thumbnail.png (необязательный)
• папка css:
  • файл template_css.css
  • файл editor_content.css (необязательный)
• папка images (необязательная)
  • файл favicon.ico (необязательный)

index.php
Этот файл содержит в себе документ с HTML — разметкой и вставками кода на языке PHP. Основное его назначение — распределить (указать) области, где будут выводится на экран данные различных компонентов портала. Собственно, HTML—разметка обеспечит нам структурированный вывод информации. Далее предлагаем рассмотреть самый распространённый вид структуры сайта, состоящей из 5 областей в формате 1-3-1.

templateDetails.xml
Инсталляционный файл шаблона. Файл в формате XML, содержит описание шаблона, версию, данные разработчика и перечень устанавливаемых файлов.

template_thumbnail.png
Графический файл формата PNG для предварительного просмотра внешнего вида шаблона. Используется в Менеджере шаблонов административной панели Joomla!. По сути — это миниатюра скриншота работающего шаблона.

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

editor_content.css
Файл стилей оформления визуального редактора. Описание применения файла см. далее по тексту.

Предполагается, что папка images будет использована для хранения изображений, используемых в шаблоне, но при этом она не является обязательной (ведь, в принципе, у вас может и не быть изображениий вовсе!).

favicon.ico
Это т.н. «значок» сайта. Вы его можете увидеть в адресной строке браузера, слева от URL-a большинства сайтов, а также при выдаче первой десятки сайтов в поиске Яндекса.
В общих настройках конфигурации Joomla! есть специальный указатель на файл, который будет использован вместо вашего файла, если ваш favicon.ico не будет найден по указанному пути.

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

{mospagebreak title=4. Разметка шаблона}

Схематически типовая разметка шаблона выглядит примерно следующим образом:

 

 

Чтобы избежать путаницы с названиями (дальше вы поймёте почему), предлагаем применить к ячейкам таблицы название «область» и числовое обозначение. Здесь и далее мы будем рассматривать т.н. «общепринятый» подход, т.е. тот, который чаще всего применяется на сайтах и порталах по уже сложившейся негласной традиции.

РЕКОМЕНДАЦИЯ: если вы не планируете автоматическое изменение размера в зависимости от разрешения экрана и разрабатываете шаблон с фиксированной шириной под ширину экрана 800 точек, то применение области № 4 не желательно из-за того, что она будет «отбирать» полезное пространство экрана у области № 3, куда будет выводится основной контент вашего сайта.

Область 1 « это header (заголовок). Здесь чаще всего располагаются:

• логотип(ы)
• флэш-ролики
• вспомогательное меню
• панель навигации
• поиск по сайту

В областях 2 и 4 располагаются второстепенные модули, выводящие на экран небольшие блоки информации, например:

• основное и контекстное меню
• меню пользователя
• новостные и RSS ленты
• различные информаторы
• календари
• и многое другое

Область 3 — самая большая из всех по площади. Здесь выводится т.н. «контент» — статьи (материалы), содержимое компонентов (например, магазины, музыкальные коллекции или, скажем, форум).

Область 5 — footer. Предназначена для вывода нижнего колонтитула, копирайтов, баннеров.

Разметку областей 1 и 5 можно выполнять как в одной общей таблице, так и в разных. Вот примеры вариантов:

а) общая таблица

и

б) три независимых таблицы

{mospagebreak title=5. Вывод информации}

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

• mosShowHead — вывод данных системного заголовка (тэги meta, base, title…)

• mosMainBody — вывод содержимого текущего компонента(ов), выбранного через меню; обычно это статьи, контакты, магазин и т.д.

• mosPathWay — навигатор (путь сайта). Это компонент, отвечающий за некую условную навигацию по структуре сайта. Он демонстрирует <путь> к текущему отображаемому контенту относительно Главной страницы.

• mosLoadComponent — вывод содержимого конкретного компонента (чаще всего эту функцию используют для вывода содержимого компонента баннеров).

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

Для того, чтобы функция выполнила своё назначение, её необходимо вставить в HTML-код в определённом формате, например:

В простом варианте разметка index.php может выглядеть следующим образом (код разбит на две части):

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

В область 1 мы выводим навигатор (mosPathWay).

В область 2 мы выводим опубликованные модули, у которых в настройках значение параметра position (позиция) указано как ‘left‘. Подробная информация о публикации модулей Joomla! доступна в статье Параметры публикации модулей.

В область 3 выводим основной контент.

В область 4 выводим опубликованные модули, у которых в настройках значение параметра position (позиция) указано как ‘right‘.

В область 5 выводим содержимое компонента баннеров.

 

Во избежание различных недоразумений необходимо более четко определить значение слова позиция (position) в терминах шаблонной системы Joomla. В дальнейшем мы постараемся избегать употреблять это слово в другом контексте, дабы не вводить вас в заблуждение.

Теперь необходимо объяснить, что же всё-таки означает этот термин. На самом деле это не так просто, как может показаться. И поэтому постараемся изложить всё по порядку:

1. position определяет «местоположение» модулей И ТОЛЬКО модулей
2. position — это некая область на вэб-странице, куда выводятся модули
3. одно и то же значение position может быть как у ВСЕХ модулей, так и у ни одного. Никаких ограничений здесь нет, кроме здравого смысла
4. если одно и тоже значение postion у нескольких модулей, то они будут выводиться на экран в той же последовательности, в которой перечислены в Менеджере модулей (сверху вниз)
5. выводятся ТОЛЬКО те модули, которые опубликованы и разрешены для показа для текущего пункта меню
6. название position всего лишь символизирует, но НЕ определяет область, где будут отображены те или иные модули, иными словами, значение left или, скажем, top, вовсе не означают, что какие-то модули будут выводиться слева или вверху
7. место вывода модулей определяется тем, где в файле разметки (index.php) расположена функция mosLoadModules и в которой указано значение position тех модулей, которые должны быть показаны С УЧЁТОМ всех выше перечисленных правил.

{mospagebreak title=6. Оформление}

Визуальное оформление сайта (дизайн) в основном осуществляется через файл стилей шаблона. Как уже упоминалось выше, во всех шаблонах он называется одинаково: template_css.css.

ПРИМЕЧАНИЕ:

есть немаловажный нюанс — шаблонизатор Joomla работает по принципу «найти все файлы с расширением .css», т.е., если в папке CSS будут присутствовать другие css-файлы, то обработчик подгрузит их все в алфавитном порядке. В результате чего возможны «наложения» или «переопределения» стилей, если, по какой-либо причине они буду дублироваться в этих файлах.
Помните об этом, что бы это не оказалось для вас неприятным сюрпризом.

Иными словами, если вы при разработке шаблона «играетесь» с разными css-файлами, то лучше при подмене изменять НЕ имя, а расширение файла, например заменить template_css.css на template_css.cs_. Иначе, у вас могут возникнуть сложности в понимании того, что происходит и почему.

Согласно принципу CSS, форматирование применяется к некоему объекту документа, который может быть определён по: тэгу (например, P, A, TD, HR, TABLE и т.д.), идентификатору (id) (например, <img scr=»» id=»button» />) или классу (<span class=»myclass»>). В общем-то, вы свободны в выборе тех или иных классов или идентификаторов, однако, следует заметить, что внутри php-кода компонентов ядра уже заложена HTML-разметка с определёнными классами для форматирования документа. Перечень этих классов можно посмотреть здесь и здесь.

ПРИМЕЧАНИЕ: Небольшое напоминание о том, что, согласно спецификации xHTML, написание имён тегов, аттрибутов и названий классов должны писаться в нижнем регистре, т.е. маленькими буквами.

При том, что классы эти описаны, тем не менее, для лучшего понимания мы рекомендуем вам самостоятельно посмотреть, ЧТО ИМЕННО выводится в HTML-коде, благо, большинство интернет-браузеров позволяют просмотреть исходник. Без понимания этого момента вам будет достаточно тяжело разобраться что, где и почему, ибо просмотр css-файлов любых других шаблонов вам ровным счётом ничего не скажет.

{mospagebreak title=7. Важные мелочи}

Раз мы начали обсуждать оформление, то стоит вернуться к разметке страницы index.php и немного довести её до «логичного» состояния, а именно — определиться с выводом данных модулей, подготовленных ядром Joomla!

В связи с тем, что области №2 и №4 находятся слева и справа соответственно, то чаще всего, при разработке шаблона, предполагается, что в область №2 будут выводиться модули с position=left, а в область №4 — модули с position=right

Делается это следующим образом:

Поскольку такой вариант вполне логичен, то он довольно часто (хотя это и не является обязательным с точки зрения Joomla) используется разработчиками шаблонов. Точно таким же образом можно рассматривать вывод модулей для положений top или bottom (или любого другого), но как это было только что замечено — они не обязаны иметь такие названия или выводиться именно в «такую» (согласно названию) область.

Как вы могли заметить, в обе области добавлены классы стилевого оформления.

А сделано это для того, что бы при одинаковости выводимого ядром исходного HTML-кода модуля (скажем, <table class=»moduletable»…) можно было применять различное оформление для модулей с левой и с правой стороны независимо. Т.е., например, в CSS-файле стили .left .moduletable{…} и .right .moduletable{…} могут иметь совершенно различное оформление и вам не придётся переделывать его, если вы вдруг захотите перенести, скажем, модуль из левой части шаблона в правую. В этом случае, модуль автоматически (согласно CSS-файла) «поменяет» свой внешний вид.

Для того, чтобы использовать в оформлении какой-либо графический файл, поместите его в папку images, тогда ссылка на него (для использования в файле стилей) будет url(‘../images/имя_файла’).

Для оформления пути сайта (pathway), также обычно используют стандартный класс:

С большой долей вероятности, в разметке шаблона вам придётся вставлять графические файлы, которых будет достаточно. А вставляются они так:

Если вы вдруг решите изменить имя (папку) шаблона, то вам придётся, соответственно, изменить название папки во всех ссылках не только на графические файлы, но и на файлы стилей и (если есть) на подключаемые файлы JavaScript. Это неудобно. Ведь лучше было бы поменять всё в одном месте, не так ли? Вот так мы и сделаем: в начале файла можно поместить код:

После этого, код вставки каждой <картинки> упрощается до:

или

В начале файла index.php ещё необходимо инициализировать редактор, поэтому добавляем код:

Периодически, экспериментируя с шаблонами Joomla, пользователи наступают на старые грабли в виде темного фона в окнах визуальных редакторов. Большинство современных визуальных редакторов для Joomla, в первую очередь пытаются подключить CSS-файл из директории текущего шаблона с именем editor_content.css, а если он отсутствует, то основной CSS-файл шаблона template_css.css.

Поэтому, если в шаблоне сайта нужно задать фон редактора, отличный от основного фона страницы, то необходимо сделать следующее: в директории CSS текущего шаблона создать файл editor_content.css и в нем задать стиль для элемента BODY. Например так:

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

Данное решение изначально не работает в «родном» TinyMCE, поскольку у него по умолчанию включено использовать css шаблона. Что бы это исправить, необходимо открыть настройки этого редактора (в панели администрирования, меню «Мамботы сайта») и отключить использование template_css.css.

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

{mospagebreak title=8. Если нет модулей}

Может сложиться ситуация, когда ни один из модулей не будет доступен для вывода (по разным причинам). Из-за этого соответствующая область может просто пустовать, бесполезно занимая пространство экрана.

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

В этом примере функция mosCountModules выполняет проверку, есть ли для вывода модули в position=’right’. В связи с тем, что область №3 является ячейкой всей таблицы, то нельзя не учитывать параметр colspan ячеек областей 1 и 5. Если условие ложно, т.е. кол-во модулей=0, то ячейка области №4 на экран не выводится вовсе, а значение colspan устанавливается равным 2. Иначе, colspan=3 и ячейка области №4 на экран выводится.

Несколько сложно и неудобно, так ведь?

Вот здесь мы приводим вас к выводу, что эти три строки одной таблицы могут быть всё же выполнены в виде отдельных таблиц. Тогда и код будет логичней и легче для восприятия. Смотрите, сначала «показываем» навигатор (путь сайта):

Здесь выводим модули и контент:

А здесь выводим компонент, отвечающий за баннеры:

{mospagebreak title=9. Полезные ссылки}

joomlaportal.ru

Файлы шаблона и их описание

Давайте разберем для чего нужны и за что отвечают файлы и папки нашего шаблона:

• /css — папка для хранения файлов стилей шаблона .css
• /css/template_css — файл стилей шаблона
• /css/editor_content.css — файл стилей для редактора
• /fonts — папка для хранения шрифтов
• /html — папка для хранения шаблонов модулей и компонентов
• /images — папка для хранения изображений шаблона
• /index.html — файл заглушка для каталога
• /index.php — главный файл шаблона с html разметкой
• /templateDetails.xml — файл содержащий настройки шаблона и необходимый для его установки.

Откройте файлы index.php, template_css в редакторе. В index.php уже создан основной скелет страницы и добавлены основные команды для вывода данных из базы Joomla.

По стандартным тегам пояснять не буду, остановлюсь только на выражениях Joomla. Вот они: 

<jdoc:include type="head" />  <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template_css.css" type="text/css" />  <jdoc:include type="modules" name="modul1" style="xhtml" />  <jdoc:include type="message" />  <jdoc:include type="component" />

Теперь разберем каждое по отдельности: 

<jdoc:include type="head" />

С помощью этого выражения мы выводим теги head которые формируются в самой Joomla различными компонентами и самим движком. В первоначальном варианте выглядит так:

<base href="http://newsitejoomla/" />   <meta http-equiv="content-type" content="text/html; charset=utf-8" />   <meta name="generator" content="Joomla! - Open Source Content Management" />   <title>Home</title>   <link href="http://newsitejoomla/index.php" rel="canonical" />   <link href="/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />   <link href="/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />   <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>   <script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>   <script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>   <script src="/media/system/js/caption.js" type="text/javascript"></script>

Подключаем файл стилей с помощью следующей строчки:

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

Выражение необходимое для отображения содержимого компонентов выглядит так:

<jdoc:include type="component" />

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

<jdoc:include type="message" />

Что бы мы смогли выводить модули в нужной нам позиции на сайте через админку Joomla нужно задать положение позиции следующим выражением:

<jdoc:include type="modules" name="modul1" style="xhtml" />

Где:

• name=»modul1″ — имя позиции
• style=»xhtml» — стиль шаблона вывода модуля

Создание шаблона Joomla на примере готового html макета

В статье как «Как создать сайт html в блокноте» мы сверстали макет по дизайну. Теперь можно превратить его в шаблон Joomla. Для этого нужно скопировать все изображения в папку images шаблона, все содержимое файла style.css в наш файл стилей template_css.css, а также перенести все содержимое тега body index.html в наш index.php. 

Получится, что template_css.css выглядит так:

/*Каркас сайта*/  body {padding:0px; margin:0; background:#4c281e; font-size:14px; font-family:Arial, Sans-serif;}  #basic {width:960px; min-height:500px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;}  img {border:0;}  a {color:#ff9c00;}  a:hover {text-decoration:none;}     /*Шапка сайта*/  #head-site {height:70px;}  li.none-bg {background:none!important;}  .telefon {float:right;}     /*Верхнее меню сайта*/  #top-menu {width:960px; height:74px; }  .bg-1 {width:950px; height:64px; background:#4c281e url(images/m1.png) repeat-x; padding:0 0 0 10px;}  .bg-2 {width:940px; height:8px; background:#ff9c00; margin:0 auto;}  .bg-1 ul {margin:0; padding:0; list-style:none;}  .bg-1 ul li {float:left; background:url(images/m2.png) no-repeat right center; padding:0 2px 0 0;}  .bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#ff9c00; text-decoration:none; text-transform:uppercase;}  .bg-1 ul li a:hover {color:#fff; background:#ff9c00;}     /*Левое меню и Контент*/  #content {width:960px; padding:20px 0 0 0; }     /*Контент - правый блок*/  .right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;}  .right h1 {text-transform:uppercase; color:#4c281e; font-weight:normal; margin-top:0;}     /*Левое меню - левый блок*/  .left {width:250px; float:left;}  .block-nad-menu {width:240px; height:10px; background:#ff9c00;}  .block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#4c281e;}  .block-menu {width:240px; border-left:10px solid #ff9c00; background:#4c281e;}  .left ul {margin:0; padding:10px 0 0 0; list-style:none;}  .left ul li {background:url(images/m3.png) no-repeat bottom left;}  .left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(images/marker.png) no-repeat 10px 8px;}  .left ul li a:hover {background:#ff9c00 url(images/marker.png) no-repeat 10px 8px;}        /*Подвал*/  .myclr {clear:both; float:none; width:100%; height:1px;}  #podval {border-top:10px solid #4c281e; margin-top:20px;}  .yellow {width:940px; height:5px; margin:0 auto; background:#ff9c00;}  .p1 {float:left; width:300px; padding:15px 0 0 0;}  .p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;}  .p3 {float:right; width:30px; padding:15px 0 0 0;}

А файл index.php шаблона Joomla 3 вот так:

<?php defined( '_JEXEC' ) or die( 'Restricted access' ); ?>    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  <html>  <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>Мой первый сайт на html</title>   <link rel="stylesheet" href="/style.css" type="text/css" />  </head>  <body>   <!-- Основной блок сайта -->   <div id="basic">      <!-- Шапка сайта -->   <div id="head-site">   <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>   <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />   </div>      <!-- Верхнее меню сайта -->   <div id="menu-top">   <div class="bg-1">   <ul>   <li><a href="#">О нас</a></li>   <li><a href="#">Ассортимент</a></li>   <li><a href="#">Отзывы</a></li>   <li><a href="#">Забронировать столик</a></li>   <li><a href="#">Наши клиенты</a></li>   <li class="none-bg"><a href="#">Контакты</a></li>   </ul>   </div>   <div class="bg-2"></div>   </div>      <!-- Левое меню и Контент -->   <div id="content">      <!-- Контент - правый блок -->   <div class="right">   <h1>Кофе Американо</h1>   <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>      <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>      <img src="/images/img1.png" alt="" title="" style="margin-right:40px;" />   <img src="/images/img2.png" alt="" title="" style="margin-right:40px;" />   <img src="/images/img3.png" alt="" title="" />      <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>      <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>      <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>      <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>      </div>      <!-- Левое меню - левый блок блок -->   <div class="left">   <div id="left-menu">   <div class="block-nad-menu"></div>   <div class="block-menu">   <ul>   <li><a href="#">Кофе Айриш</a></li>   <li><a href="#">Кофе Американо</a></li>   <li><a href="#">Кофе Глясе</a></li>   <li><a href="#">Кофе Диппио</a></li>   <li><a href="#">Кофе Капучино</a></li>   <li><a href="#">Кофе Кон Панна</a></li>   <li><a href="#">Кофе Коретто</a></li>   <li><a href="#">Кофе Латте</a></li>   <li class="none-bg"><a href="#">Кофе Лунго</a></li>   </ul>   </div>   <div class="block-pod-menu"></div>   </div>      </div>      </div>      <div class="myclr"></div>      <!-- Подвал -->   <div id="podval">   <div class="yellow"></div>   <div class="p1">ООО “Кофейня” 2015г.<br/>   г. Москва, ул Революционная 1а</div>   <div class="p3"><img src="/images/stat.png" alt="" title="" /></div>   <div class="p2">Создание сайтов веб-студия <a href="#">«Парампампам»</a></div>   </div>   <div class="myclr"></div>      </div>  </body>  </html>    <jdoc:include type="modules" name="modul1" style="xhtml" />  <jdoc:include type="message" />  <jdoc:include type="component" />  

Сохраните и посмотрите что получилось. Пока не очень правда и стили почему то не подключились.

Теперь нужно адаптировать этот макет по наш движок, для этого отредактируем файл index.php. Для начала заменим содержимое тега head и подключим выражения joomla и файл стилей нашего шаблона. Приведите его в такой вид:

<head>     <jdoc:include type="head" />   <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template_css.css" type="text/css" />     </head>

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

<jdoc:include type="message" />  <jdoc:include type="component" />

Получится так:

<!-- Контент - правый блок -->   <div class="right">     		<jdoc:include type="message" />  		<jdoc:include type="component" />      </div>

Меню мы тоже будем управлять из админ панели, поэтому удаляем их и вставляем позицию модуля modul1 для верхнего меню и modul2 для левого:

 <!-- Верхнее меню сайта -->   <div id="menu-top">   <div class="bg-1">      <jdoc:include type="modules" name="modul1" style="xhtml" />      </div>   <div class="bg-2"></div>   </div>

<!-- Левое меню - левый блок блок -->   <div class="left">   <div id="left-menu">   <div class="block-nad-menu"></div>   <div class="block-menu">      <jdoc:include type="modules" name="modul3" style="xhtml" />      </div>   <div class="block-pod-menu"></div>   </div>   </div>

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

<!-- Подвал -->   <div id="podval">   <div class="yellow"></div>   <div class="p1">ООО “Кофейня” 2015г.<br/>   г. Москва, ул Революционная 1а</div>   <div class="p3"><jdoc:include type="modules" name="modul3" style="xhtml" /></div>   <div class="p2">Создание сайтов веб-студия <a href="#">«Парампампам»</a></div>   </div>

 Смотрим что получилось:

Вы так же как я видимо задаетесь вопросом почему не видно логотипа и телефонов? А все потому, что url прописанные до файлов теперь нужно немного подправить. Добавьте, ко всем изображениям в файле index.php стоку:

/templates/<?php echo $this->template ?>

Например ссылка на изображение логотипа теперь будет выглядеть так:

/templates/<?php echo $this->template ?>/images/logo.png

Где выражение 

<?php echo $this->template ?>

Позволяет вывести название папки текущего шаблона.

И в файле templates_css.css добавьте ко всем url изображений «/templates/shablon/», получится:

url(/templates/shablon/images/m2.png)

Первый этап создания шаблона мы прошли и теперь все наши файлы и вид сайта должны выглядеть следующим образом:

Index.php

<?php defined( '_JEXEC' ) or die( 'Restricted access' ); ?>    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  <html>  <head>     <jdoc:include type="head" />   <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template_css.css" type="text/css" />     </head>    <body>   <!-- Основной блок сайта -->   <div id="basic">      <!-- Шапка сайта -->   <div id="head-site">   <a href="#"><img src="/templates/<?php echo $this->template ?>/images/logo.png" alt="Кофейня" title="Кофейня" /></a>   <img src="/templates/<?php echo $this->template ?>/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />   </div>      <!-- Верхнее меню сайта -->   <div id="menu-top">   <div class="bg-1">      <jdoc:include type="modules" name="modul1" style="xhtml" />      </div>   <div class="bg-2"></div>   </div>      <!-- Левое меню и Контент -->   <div id="content">      <!-- Контент - правый блок -->   <div class="right">     		<jdoc:include type="message" />  		<jdoc:include type="component" />      </div>      <!-- Левое меню - левый блок блок -->   <div class="left">   <div id="left-menu">   <div class="block-nad-menu"></div>   <div class="block-menu">      <jdoc:include type="modules" name="modul2" style="xhtml" />      </div>   <div class="block-pod-menu"></div>   </div>   </div>      </div>      <div class="myclr"></div>      <!-- Подвал -->   <div id="podval">   <div class="yellow"></div>   <div class="p1">ООО “Кофейня” 2015г.<br/>   г. Москва, ул Революционная 1а</div>   <div class="p3"><jdoc:include type="modules" name="modul3" style="xhtml" /></div>   <div class="p2">Создание сайтов веб-студия <a href="#">«Парампампам»</a></div>   </div>   <div class="myclr"></div>      </div>  </body>  </html>  

template_css.css

/*Каркас сайта*/  body {padding:0px; margin:0; background:#4c281e; font-size:14px; font-family:Arial, Sans-serif;}  #basic {width:960px; min-height:500px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;}  img {border:0;}  a {color:#ff9c00;}  a:hover {text-decoration:none;}     /*Шапка сайта*/  #head-site {height:70px;}  li.none-bg {background:none!important;}  .telefon {float:right;}     /*Верхнее меню сайта*/  #top-menu {width:960px; height:74px; }  .bg-1 {width:950px; height:64px; background:#4c281e url(/templates/shablon/images/m1.png) repeat-x; padding:0 0 0 10px;}  .bg-2 {width:940px; height:8px; background:#ff9c00; margin:0 auto;}  .bg-1 ul {margin:0; padding:0; list-style:none;}  .bg-1 ul li {float:left; background:url(/templates/shablon/images/m2.png) no-repeat right center; padding:0 2px 0 0;}  .bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#ff9c00; text-decoration:none; text-transform:uppercase;}  .bg-1 ul li a:hover {color:#fff; background:#ff9c00;}     /*Левое меню и Контент*/  #content {width:960px; padding:20px 0 0 0; }     /*Контент - правый блок*/  .right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;}  .right h1 {text-transform:uppercase; color:#4c281e; font-weight:normal; margin-top:0;}     /*Левое меню - левый блок*/  .left {width:250px; float:left;}  .block-nad-menu {width:240px; height:10px; background:#ff9c00;}  .block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#4c281e;}  .block-menu {width:240px; border-left:10px solid #ff9c00; background:#4c281e;}  .left ul {margin:0; padding:10px 0 0 0; list-style:none;}  .left ul li {background:url(/templates/shablon/images/m3.png) no-repeat bottom left;}  .left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(/templates/shablon/images/marker.png) no-repeat 10px 8px;}  .left ul li a:hover {background:#ff9c00 url(/templates/shablon/images/marker.png) no-repeat 10px 8px;}        /*Подвал*/  .myclr {clear:both; float:none; width:100%; height:1px;}  #podval {border-top:10px solid #4c281e; margin-top:20px;}  .yellow {width:940px; height:5px; margin:0 auto; background:#ff9c00;}  .p1 {float:left; width:300px; padding:15px 0 0 0;}  .p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;}  .p3 {float:right; width:30px; padding:15px 0 0 0;}

Сайт в браузере

Добавление контента в админке Joomla

Теперь давайте откроем админку Joomla и разместим несколько статей. Открываем в браузере http://вашсайт/administrator вводим логин и пароль. Открываем «Материалы -> менеджер материалов» и жмем кнопку «Создать»

 

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

Добавление пунктов меню сайта

Откройте «Меню -> Менеджер меню» и создайте в нем два разных меню назовем одно «Верхнее меню», а второе «Левое меню». В каждое меню нужно добавить соответствующие пункты и выбрать материалы, которые должны отображаться при клике по ссылке пункта. Процесс создания меню я тоже опущу, так как это относится к администрированию Joomla а не созданию и редактированию шаблона.

www.opengs.ru