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

УРОК 1

Все течет и все меняется, вот уже разработчики Joomla заявили, что заканчивают поддерживать версию 1.5 и всем настоятельно рекомендуют обратить свое внимание на версию 2.5.

В этой серии уроков мы будем разбирать  как сделать шаблон для Joomla 2.5 Что такое шаблон для сайта вы можете узнать из статьи «Шаблон для Joomla сайта».

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

Предлагаю вам создать собственный шаблон для Joomla 2.5. Я долго думала, как помочь чайникам освоить искусство верстки шаблонов, и мне пришла в голову мысль сделать универсальный шаблон и полностью его прокомментировать, чтобы было понятно даже деревянным чайникам, что от куда берется и куда выводится. Используя, мой шаблон вы сможете создать свой собственный с уникальным дизайном.

Представляю вашему вниманию простой универсальный шаблон Likom25 с «чистым кодом». Содержимое шаблона и его представление полностью отделены друг от друга. Шаблон создан на основе каскадных таблиц стилей CSS,  что является важнейшим критерием соответствия веб-сайта современным веб-стандартам. Подобного рода шаблоны хорошо воспринимаются поисковыми машинами. Для простоты кода шаблон имеет фиксированную ширину 950 px и трехколоночную схему размещения элементов с возможностью, сворачивания колонок при отсутствии в них контента.

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

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

На следующем уроке вы узнаете из каких файлов состоит шаблон для Joomla 2.5

Прежде, чем приступить к обучению, вам необходимо скачать установочный пакет шаблона Likom25.

 

Комментарии 

 
# Эдуард 18.04.2012 15:55
Здравствуйте, Светлана, спасибо за шаблон и серию статей. Но у меня при установке шаблона внешний вид не такой как на скриншоте. Если подробнее, то стиль div id="page" применяется только к блокам "pathway", "breadcrumbs", "user1", "header", и "topmenu ". Т.е., другими словами, только к верхней части страницы. Контент сайта и модули, например, должны быть на белом фоне, а у меня фон #e1edef. По сути, оформление "body". В чём ошибка?
Ответить | Ответить с цитатой | Цитировать
 
 
# Эдуард 19.04.2012 19:14
Хотя при предварительном просмотре через менеджер шаблонов все отображается как надо... Не понимаю...
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 21.04.2012 20:17
Все элементы страницы заключены в div "page", прописывайте в таблицах стилей какое нужно вам оформление. Для каждого модуля можно задать свой фон, для контента тоже .contentpaneopen
Ответить | Ответить с цитатой | Цитировать
 
 
# Эдуард 21.04.2012 20:36
Это и так понятно. Но я в коде ничего не менял. Я же написал, что стиль div "page"(по сути фон для содержимого сайта)почему-то применился ТОЛЬКО к верхней части сайта. А должен ко всем блокам! Читайте выше. Т.е. содержимое модулей на голубом фоне, а сам модуль на белом фоне. А у меня модули на фоне "body"!
Вот как у меня:


А так должно быть:
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 26.04.2012 19:04
Если честно, то я не могу понять, что у Вас происходит у меня все ставится идеально.
Eсть один вариант выяснить - браузер мазила и приложение к нему Firebug, с его помощью Вы сможете проанализироват ь показ каждого DIVа. У Вас сворачивается div page, будто в нем нет контента, но он есть. Может Вы случайно поковырялись в файле index.php?
Ответить | Ответить с цитатой | Цитировать
 
 
# Эдуард 26.04.2012 19:46
Я смотрел через firebug. ''page'' является родительским для всей страницы. Я действительно ковырял код, но потом переустановил шаблон с нуля. И такой вид шаблона был изначально, я просто не замечал. После хотел доработать и тогда заметил косяк. Но самое интересное почему предварительный просмотр шаблона показывает нормально?!
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 27.04.2012 06:24
Эдуард попробуйте применить свойство overflow:hidden к page. Хотя я все-таки не могу понять, что у Вас происходит с шаблоном
Ответить | Ответить с цитатой | Цитировать
 
 
# Эдуард 30.04.2012 19:58
Цитирую Administrator:
Эдуард попробуйте применить свойство overflow:hidden к page. Хотя я все-таки не могу понять, что у Вас происходит с шаблоном

Да действительно помогло "overflow:hidden ",но не могу понять, что это даёт. Я сделал тестовый http://38monet.com/ сайт. Посмотрите пожалуйста, может так вы сможете определить в чём была ошибка.
Ответить | Ответить с цитатой | Цитировать
 
 
# xSPiRiTx 08.05.2012 04:45
в Joomla 2.5.4 вообще шаблон криво работает!
Из админки ставится успешно, а вот в настройках шаблонов если зайти на редактирование html поле пустое. также и с css.
если зайти в директорию /templates - там открытые блокнотом файлы нормально содержат стили
Ответить | Ответить с цитатой | Цитировать
 
 
# xSPiRiTx 08.05.2012 05:02
вот просто брал из файлов index.php, template.css, menu.css данные и вставлял их в эти же файлы в админку....такое ощущение, что они в БД не внеслись.

Но все равно происходит ужас:


в стандартном шаблоне вот так: (модуль логина, меню с одним пунктом Home и материал на главной - все отображается)
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 08.05.2012 12:16
Цитирую xSPiRiTx:
вот просто брал из файлов index.php, template.css, menu.css данные и вставлял их в эти же файлы в админку....такое ощущение, что они в БД не внеслись.

Но все равно происходит ужас:


в стандартном шаблоне вот так: (модуль логина, меню с одним пунктом Home и материал на главной - все отображается)

Что вы там творите? Какой-то бред делаете! Что? Куда вы копируете?
Код спрятан, чтобы вам чайникам в голову не пришло редактировать его из админпанели. Запомните одно очень важное правило НИКОГДА, слышите НИКОГДА не редактируйте код шаблона из админпанели!!!! !!
Редактор кода в Joomla не дает возможность откатиться на несколько шагов назад, в случае ошибки при редактировании кода!!!
Все мастера вносят изменения в код только при помощи специальных редакторов, самый лучший это Dreamweaver, который не только покажет ошибки при редактировании, но и дает возможность откатиться далеко назад.
Если ваш сайт находится на локалке, то открываете нужный вам файл в редакторе, вносите изменения, нажимаете кнопку сохранить (файл не закрываете) и смотрите тут же результаты. Если они вас не устраивают, то откатываетесь назад.
Если сайт стоит на хостинге, то тем более НЕ НАДО КОВЫРЯТЬСЯ В КОДЕ ИЗ АДМИНПАНЕЛИ! Покосите сайт по своей глупости, потом будете рвать перья из попы!
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 08.05.2012 12:25
Посмотрите на скриншот, именно этот действующий шаблон вы скачали, я его не руками рисовала. Судя по тому бреду , что вы творите, я не могу дать никаких гарантий, что внешний вид вашего сайта будет соответствовать моему скриншоту. Вы еще в коде поковыряйтесь, у вас еще не такой ужас получится!
Ответить | Ответить с цитатой | Цитировать
 
 
# Эдуард 08.05.2012 12:35
Цитирую Administrator:
Посмотрите на скриншот, именно этот действующий шаблон вы скачали, я его не руками рисовала. Судя по тому бреду , что вы творите, я не могу дать никаких гарантий, что внешний вид вашего сайта будет соответствовать моему скриншоту. Вы еще в коде поковыряйтесь, у вас еще не такой ужас получится!

Вы не совсем правы! Может "xSPiRiTx" и делал что-то лишнее, но ведь у него на сайте та же ошибка, что и у меня. Это значит, что в шаблоне чего-то не хватает. Может просто свойства overflow... Поправьте меня если я не прав.
Ответить | Ответить с цитатой | Цитировать
 
 
# xSPiRiTx 08.05.2012 05:05
пересмотрите...скорее всего шаблон плохо подделан под Joomla 2.5.4! а очень жаль!!!
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 08.05.2012 12:26
Цитирую xSPiRiTx:
пересмотрите...скорее всего шаблон плохо подделан под Joomla 2.5.4! а очень жаль!!!

Учиться, учиться и учиться. И все будет работать! Удачи!
Ответить | Ответить с цитатой | Цитировать
 
 
# Эдуард 08.05.2012 12:36
Цитирую xSPiRiTx:
пересмотрите...

Присоединяюсь.
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 08.05.2012 14:24
Ребята, я бы "подделала". но что? Поймите меня правильно. Я протестировала шаблон во всех браузерах - у меня нет проблем, иначе, я бы их обязательно исправила.
Ответить | Ответить с цитатой | Цитировать
 
 
# Эдуард 08.05.2012 14:32
Цитирую Administrator:
Ребята, я бы "подделала". но что? Поймите меня правильно. Я протестировала шаблон во всех браузерах - у меня нет проблем, иначе, я бы их обязательно исправила.

Я специально создал тестовый сайт, чтобы вы могли увидеть воочию, что происходит с шаблоном(писал выше:http://38monet.com/). Лично я для себя решил проблему добавлением свойства "overflow:hidden ". Но хочется разобраться подробнее, что это даёт и почему через админку показывает правильно. Чтобы потом не возникало подобных проблем.
Ответить | Ответить с цитатой | Цитировать
 
 
# xSPiRiTx 08.05.2012 19:25
Цитата:
решил проблему добавлением свойства "overflow:hidden "

а можно подробнее что это и куда добавлять?
Ответить | Ответить с цитатой | Цитировать
 
 
# Эдуард 08.05.2012 22:07
Читай выше в комментариях...
Ответить | Ответить с цитатой | Цитировать
 
 
# Эдуард 08.05.2012 14:37
Я не хочу вас обвинять, просто хочу научиться. Иначе бы я не заходил на ваш сайт.
P.S.: А за шаблон огромное спасибо. Долго искал простую болванку, и нашёл вашу для j1.5. Думал как переделать и тут как раз вы сами добавили для j2.5.
Ответить | Ответить с цитатой | Цитировать
 
 
# xSPiRiTx 08.05.2012 19:24
Да! мы же не наезжаем, а просто тестируем шаблонку на своих сайтах и пушем о том, что не работает и что не так!
Напишите как правильно его установить на сырую чистую Joomla 2.5.4 без демо-данных. может тут кроется секрет?
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 09.05.2012 18:57
Может и кроется, т.к. я никогда не использую демо-данные. Как устанавливать? Как всегда!Создайте штуки четыре маленьких статьи, меню горизонтальное, вертикальное и тогда тестируйте.
Ответить | Ответить с цитатой | Цитировать
 
 
# xSPiRiTx 27.05.2012 00:38
ну если не я один одни и те же жалобы подал значит проблема не во мне! Шаблон функционирует не полностью.

1) у меня отсутствует Поиск в шапке около хлебных крошек
2) использую стандартное вертикальное меню Main Menu - не можете подсказать как присвоить ей свой css?!
Ответить | Ответить с цитатой | Цитировать
 
 
# xSPiRiTx 27.05.2012 00:58
по поиску разобрался. это я дурак модуль не создал и посему логично он не отображался =)
Ответить | Ответить с цитатой | Цитировать
 
 
# xSPiRiTx 31.05.2012 00:50
объясните пожалуйста такую аномалию:
в опциях убираю показ автора, даты публикации, количество просмотров, категорию материала - а они как были так и остались.

CSS у вас от Joomla 1.5 и к версии 2.5 не подходит, потому что некоторые стили не работают!
Ответить | Ответить с цитатой | Цитировать
 
 
# xSPiRiTx 31.05.2012 00:51
вот просто поставьте новую чистую Joomla 2.5.4, скачайте архив со своего сайта и проверьте!
Ответить | Ответить с цитатой | Цитировать
 
 
# xSPiRiTx 31.05.2012 04:55
показ автора, дата публикации и т.п. моя ошибка - в параметрах меню убирается!

а вот кодировка файлов и ваших комментариев в html и css это беда! У вас там виндовая кодировка cp1251, а у меня и на серверах юниксовая UTF-8.
Эту оплошность тоже возьмите на вооружение!
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 01.06.2012 07:44
Я работаю с программой Dreamweaver. В ней все комментарии читаются отлично. В архиве эта программа есть. Возьмите ее на вооружение, она позволит избежать вам множества ошибок при правке кода. Судя по комментариям, вы просто невнимательно прочли все уроки, поэтому и шаблон у вас работает некорректно.
Ответить | Ответить с цитатой | Цитировать
 
 
# xSPiRiTx 01.06.2012 08:48
да у меня же Linux =)))
получается, что у вас шаблон не кроссплатформен ный. Там делов на несколько минут, но зато этих 30 комментариев бы не было. Вы нам помогаете, мы вам по мере возможностей тоже.
Вот кроссплатформен ность бы решили.
проблемы решил пересохраняя рабочие документы в кодировку UTF-8 без BOM.
Ответить | Ответить с цитатой | Цитировать
 
 
# Эдуард 01.06.2012 15:12
Цитирую xSPiRiTx:
да у меня же Linux =)))
получается, что у вас шаблон не кроссплатформен ный. Там делов на несколько минут, но зато этих 30 комментариев бы не было. Вы нам помогаете, мы вам по мере возможностей тоже.
Вот кроссплатформен ность бы решили.
проблемы решил пересохраняя рабочие документы в кодировку UTF-8 без BOM.

Про кроссплатформен ность вы чушь несете... При чем здесь линукс и винда?!! Да вы хоть на телефоне через смс редактируйте- всё будет отлично работать! Главное кодировку правильную поставить: UTF-8 без BOM. А вы Светлана, вы действительно зря не в той кодировке сохраняли. Работать будет, но могут возникнуть проблемы, зависит от сервера. К примеру слоган сайта на русском языке не будет отображаться(в шапке), будут крякозябры. Поэтому все файлы в Joomla необходимо сохранять в UTF-8 без BOM,
Это аксиома.
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 04.06.2012 13:28
По поводу файлов таблиц стилей даже не парюсь, они у меня всегда работают корректно, а вот configuration.php сохраняю иногда в формате UTF-8 без BOM все зависит от обстоятельств. А по поводу сохранения всех файлов Joomla в формате UTF - это вы круто завернули.
Что касается кроссплатформен ности, то поддреживаю полностью Эдуарда, при чем тут операционная система. Страницы сайтов читает браузер. Но бывают такие случаи, когда разные браузеры по разному читают код HTML, вернее таблицы стилей, поэтому, что касается шаблонов разговор идет о кроссбраузернос ти.
Ответить | Ответить с цитатой | Цитировать
 
 
# xSPiRiTx 04.06.2012 14:19
вы чего???? как это причем какая ОС???? браузер читает в той кодировке, которую ему указали!
я щас ваш шаблон поставлю на никсовый сервак и получу кракозябры пока сам вручную не укажу UTF-8
Ответить | Ответить с цитатой | Цитировать
 
 
# Эдуард 04.06.2012 14:00
Спорить не буду,т.к. я не профи. Руководствуюсь мнением более опытных, например: http://ktonanovenkogo.ru/vokrug-da-okolo/kodirovka-teksta-krakozyabry-ascii-yunikod-utf-8-rasshirennaya-ascii-windows-1251-cp866-koi8-r-problemy-s-kodirovkoj.html
Да и сам уже несколько раз сталкивался с проблемами из-за неправильной кодировке. В частности в вашем файле index.php в шапке слоган отображался кракозябрами, пока не изменил кодировку.
Ответить | Ответить с цитатой | Цитировать
 
 
# Эдуард 04.06.2012 14:34
Цитирую xSPiRiTx:
вы чего???? как это причем какая ОС???? браузер читает в той кодировке, которую ему указали!
я щас ваш шаблон поставлю на никсовый сервак и получу кракозябры пока сам вручную не укажу UTF-8

У меня на линукс-сервере всё отображается корректно кроме русских букв. Если я поставлю на виндоус-сервер БУДЕТ ТОЖЕ САМОЕ! Вы сами себе противоречите:''браузер читает ту кодировку, которую ему указали''. Или вы думает, что поставив шаблон на виндоус-сервер у вас уйдут кракозябры?!
Ответить | Ответить с цитатой | Цитировать
 
 
# xSPiRiTx 04.06.2012 15:15
а то, что виндовые серверы в utf-8 настроены не?

и как это понимать, что у тебя отображается все корректно, кроме русских букв 0_о мы о них как раз тут и рассуждаем, что они не отображаются корректно!

а о том и говорю, что поставив даже на виндовый сервер нужно кодировку utf-8 иметь! а не ту, в которой сохранены файлы шаблона через дримвейвер. С этого я и начал бучу!
Ответить | Ответить с цитатой | Цитировать
 
 
# Эдуард 04.06.2012 15:53
Цитирую xSPiRiTx:
и как это понимать, что у тебя отображается все корректно, кроме русских букв 0_о мы о них как раз тут и рассуждаем, что они не отображаются корректно!

Вы сами путаете и себя и других,пишите одно,а имеете в виду ДРУГОЕ.Я лично не вижу в комментах, что вас не устраивают русские буквы, зато вижу что не устраивают css стили. И лично я начал из-за css, а кодировку я сразу же поменял. Прошу заметить: ОТОБРАЖЕНИЕ РУССКИХ СЛОВ НЕ ЗАВИСИТ ОТ CSS СТИЛЕЙ! Это первое.
Ответить | Ответить с цитатой | Цитировать
 
 
# Эдуард 04.06.2012 15:54
Цитирую xSPiRiTx:
а о том и говорю, что поставив даже на виндовый сервер нужно кодировку utf-8 иметь! а не ту, в которой сохранены файлы шаблона через дримвейвер. С этого я и начал бучу!

Если и там и там кодировку нужно менять, то причём тут ОС? Это второе. Я же говорю, вы сами себе противоречите.
Короче предлагаю поставить точку. Проблема неправильного отображения page, решается добавлением свойства "overflow:hidden ". Кодировку в файлах нужно ставить UTF-8 без BOM. Всё.
P.S.: Иначе мы так и будем тратить своё время.
Ответить | Ответить с цитатой | Цитировать
 
 
# xSPiRiTx 04.06.2012 16:21
хорошо.
добавлю тока, что css стили и хтмл главной страницы в файлах не устраивало тем, что там комменты на русском в кодировке, отличное от utf-8
Ответить | Ответить с цитатой | Цитировать
 
 
# andr 05.12.2012 15:35
Здравствуйте! Спасибо за Ваши уроки! У меня тоже были проблемы с фоном контента и кодировкой, при этом ничего не менял в коде. Все разрешилось благодаря вопросам-ответам тут, думаю что следует подредактироват ь данный установочный пакет (т.к. это проблема у всех, независимо от системы и дримвивера и др. прог). Дальше было легче во всем разобраться. Не получились только модули в позиции bottom с произвольным HTML-кодом, имеющие суффикс _bot. Они у меня выстроились не в горизонтальную, а в вертикальную линию друг под другом и оформление было отличным от превью. Показать не могу, т.к. сайт готов и блоки эти пока не нужны, но хотелось бы чтобы все работало, вдруг понадобиться. Но сейчас возник вопрос как сделать на главной странице вверху контента такой же прямоуголный блок красного цвета с текстом?
Ответить | Ответить с цитатой | Цитировать
 
 
# Вячеслав 29.01.2013 10:46
В процессе научения чему либо не бывает "глупых" вопросов. Отношение же некоего админа к так называемым "чайникам" весьма предвзятое и неуважительное. Настоящий учитель не смотрит с высока на тех, кто ещё не имеет представления о чём то. На то и процесс научения, дабы заполнить пустоту знаниями и научится делать, то есть приобрести навык.
Ответить | Ответить с цитатой | Цитировать
 
 
# Руслан 14.02.2013 06:29
Спасибо большое за руководство и за шаблон. Очень помогает. Даже я, полный чайник, начинаю что-то понимать.
Скажите будет ли работать этот шаблон на joomla 3? И что нужно изменить или адаптировать для joomla 3?
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 14.02.2013 18:02
Цитирую Руслан:
Спасибо большое за руководство и за шаблон. Очень помогает. Даже я, полный чайник, начинаю что-то понимать.
Скажите будет ли работать этот шаблон на joomla 3? И что нужно изменить или адаптировать для joomla 3?

Посмотрите здесь http://likbez-net.ru/razrabotka-shablona-sajta-dlya-joomla-30/155-fajl-templatedetailsxml-urok-3.html
Ответить | Ответить с цитатой | Цитировать
 
Главная Разработка шаблона сайта для Joomla 2.5 Как сделать шаблон для Joomla 2.5