Представляем Вашему вниманию статью Сергея Снисаренко от 24.04.2011 года, написанную для клуба Пифагорейцев А.А.Корнеева и размещённую на портале Числонавтика.

А еще есть видео, как легко поставить вёрстку на шаблон joomla

Всё на много проще чем Вы могли бы представить!

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

Теперь и поделюсь с Вами как легко добавлять нужные модули в шаблон.

1. Открываем файл index.php шаблона и вставляем строчку, которую понимает движок.

При этом строчку вставляем там, где прописано нужное нам место в данном шаблоне (определить можно при помощи Firebug). Например, если мы хотим добавить новый модуль в шапку header, то должно получиться примерно следующее:

MY_NAME — это имя нашего нового модуля

MY_NAME_STYLE - это имя стиля нашего нового модуля

называем как нам нравиться и идём дальше.

2. Теперь нам понадобиться файл templateDetails.xml

что бы уведомить Joomlu о том, что мы добавили новый модуль.

в теге «positions» прописываем наш модуль

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

 
<positions>
 <position>left</position>
 <position>right</position>
 <position>top</position>
 <position>breadcrumb</position>
 <position>user1</position>
 <position>user2</position>
 <position>user3</position>
 <position>user4</position>
 <position>user33</position>
 <position>MY_NAME</position>
 <position>debug</position>
 <position>syndicate</position>
 </positions>

Затем смотрим в каком CSS файле прописан стиль того места, куда мы хотим поместить наш новый модуль и прописываем в этом файле нашему модулю желаемое положение и стиль.

Вариант 2 от 15.01.2013г. в ответ на комментарий Сергея:

Например, пусть нашей задачей будет вставить в header телефон фирмы в шаблон ja_purity.
Исходные данные: стандартный шаблон ja_purity. Пример реализации сайт www.android55.ru вставлено в header три модуля (icq, адрес, корзина). Я рассматриваю первый блок с icq.

Мои действия:

Открываю index.php для просмотра/правки через FileZilla /сайт.ru/docs/templates/ja_purity
Ищем, где в файле index.php прописан header. У меня это место выглядит так:

<div id="ja-wrapper">
<!-- BEGIN: HEADER -->
<div id="ja-headerwrap">
<div id="ja-header" class="clearfix" style="background: url(/images/header/<?php echo ...и т.д.

Я вставляю "волшебную строчку" (пример кода которой найден в интернете)

<div id="supertopst1"><jdoc:include type="modules" name="supertop1" /></div>

где supertop1 - это имя нашего нового модуля,
supertopst1 - это имя стиля нашего нового модуля.

Теперь всё выглядит так:

<div id="ja-wrapper">
<!-- BEGIN: HEADER -->
<div id="ja-headerwrap">
<div id="supertopst1"><jdoc:include type="modules" name="supertop1" /></div>
<div id="ja-header" class="clearfix" style="background: url(/images/header/<?php echo ...и т.д.

Сохраняем, закрываем.

Теперь, чтобы открыть файл templateDetails.xml из папки /сайт.ru/docs/templates/ja_purity я копирую файл templateDetails.xml к себе на комп и открываю на компе Блокнотом, чтобы отредактировать.
Редактирую: в теге «positions» прописываем наш модуль.
Было

<positions>
<position>hornav</position>
<position>breadcrumbs</position>
и т.д.

стало

<positions>
<position>supertop1</position>
<position>hornav</position>
<position>breadcrumbs</position>
и т.д.

Сохраняем, закрываем, файл копируем обратно на сайт в папку /сайт.ru/docs/templates/ja_purity

Никаких изменений в отображении страницы на сайте пока нет.

Теперь с помощью Firebug смотрим в каком CSS файле прописан стиль того места, куда мы хотим поместить наш новый модуль. В моем случае это файл template.css по адресу /сайт.ru/docs/templates/ja_purity/css

Открываю template.css для просмотра/правки через FileZilla /сайт.ru/docs/templates/ja_purity/css
Ищу, где прописаны стили header:

/* HEADER --------------- */
#ja-headerwrap {
background: #333333;
color: #000;
и т.д.
}
#ja-header {
position: relative;
height: 80px;
}
.ja-headermask {
display: block;
и т.д.
}
и т.д.

и прописываю свой блок.
Получается так:

/* HEADER --------------- */
#ja-headerwrap {
background: #333333;
color: #000;
и т.д.
}
 #supertopst1{
position: absolute;
background: #fff;
border-radius: 10px 0 0 10px;
opacity: 0.8;filter: alpha(Opacity=80);
height: 80px;
width: 200px;
left: 220px;
top: 0px;
z-index: 100;
}
#ja-header {
position: relative;
height: 80px;
}
.ja-headermask {
display: block;
и т.д.
}
и т.д.

Сохраняем.
Стиль блока с сайта www.android55.ru. У Вас, естественно может быть другим.

Теперь как обычно заходим в админку сайта в Менеджер модулей. Создаем новый модуль, например просто "Произвольный HTML-код", открываем закладку Позиция, в которой уже видим наш новый блок supertop1, выбираем. Пишем номер телефона в Пользовательском тексте. Сохраняем. Включаем модуль. И теперь телефон отображается на сайте в нашем новом блоке в районе шапки сайта:)