Рейтинг:   / 2
ПлохоОтлично 

Изменяем шаблон в Joomla.

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

Вот его скриншот.

Как изменить шаблон Joomla 1.5

После установки шаблона его структуру можно посмотреть по адресу
C:\WebServers\home\ваш сайт\www\templates\siteground-j15-36.

Как изменить шаблон Joomla 1.5
Теперь разберём что к чему.
• В папке css хранятся таблицы стилей для сайта. Самый главный файл template.css
• В папке images находятся изображения, которые используются для построения дизайна.
• Файл index.php является основным файлом шаблона. В нём прописан код шаблона, как в  HTML.
• Файл template_thumbnall.png содержит маленькое изображение шаблона, его можно посмотреть наведя мышку на шаблон в менеджере шаблонов ( в Админпанели).
• Файл templates.php содержит вспомогательные элементы шаблона.
• В файле params.ini находятся параметры конфигурации.
tempateDetails.xml содержит в себе все данные о шаблоне, такие как имена авторов, файлы шаблона, позиции в шаблоне.
В основном при изменении используют три файла: template.css, index.php и templateDetails.xml.

Изменение "шапки" сайта.

Самый простой способ это замена файла header.jpg в папке images на свой файл-картинку такого же размера. В нашем шаблоне размер хедера составляет 718 х 186 пикселей.
В других шаблонах этот файл может называться logo.jpg.

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

Для этого запомните размер старого хедера. Например, я поменял высоту со 186 пикс. на 155, ширину не трогал. То есть у меня получилась картинка размером 718 х 155.
Откройте файл template.css, лучше с помощью WordPad.
Нажмите Правка - Найти... В открывшемся окошке введите число 186, это старая высота шапки и нажмите Найти Далее. Windows найдёт это значение, и его остаётся только изменить на новое. После чего Сохранить файл.

Как изменить шаблон Joomla 1.5
В нашем template.css этот размер прописан один раз. В других шаблонах может быть указан несколько раз. В будущем, для полной уверенности проверяйте поиском файлы до конца, пока не всплывёт сообщение о завершении поиска.

 

Изменение размера текста и шрифта в шаблоне.

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

Я сделал размер шрифта 15 пикселей. Убрал шрифт Tahoma, теперь он стал Arial.

Также прошу обратить внимание на свойство line-height. Это расстояние между строк. Может задаваться в пикселях, процентах и относительных единицах, например 1.3em = 13px.
Я заметил, во многих шаблонах это расстояние маленькое, что затрудняет чтение и напрягает глаза.
Здесь же можно изменить и цвет шрифта, свойство color. А можете добавить и новое свойство.

Теперь пробуем изменить размер и цвет ссылок.

Это тоже делается в template.css.
a: link, a: visited и a: hover. Отвечают за: обычные ссылки, посещённые и активные (в момент наведения мышью) соответственно.
Их свойства обозначены чуть ниже класса body.


Размер можно задать отдельным свойством, font-size, и дописать его к остальным.
После изменения не забудте сохранить файл и обновить сайт для просмотра изменений.

Как вы наверное уже заметили ссылки изменились, но не все. Ссылки главного меню так и остались маленькие.
Это потому что мы изменили только основные ссылки. Свойства ссылок главного меню указаны отдельно.
Для того чтобы найти где, нужно проделать несколько действий. Мы ведь незнаем куда их спрятали авторы шаблона.
Итак, выделяем и копируем надпись Главное меню.
Щёлкаем правой кнопкой мыши по сайту и из открывшегося окна выбираем пункт Исходный код или HTML-код, взависимости от вашего браузера.

Нажимаем Правка - Найти, и вставляем туда скопированную надпись.
Жмём Найти.

Находим, смотрим внимательно откуда что идёт. Знание основ CSS тут как раз пригодится.

Как видим наше главное меню находиться в блоке с классом module_menu, и этот блок находится в другом блоке с id="leftcolumn". Разгадка где-то рядом.

Опять же открываем наш template.css и при помощи Правка - Найти... ищем свойства ссылок.

Сначала пробуем искать все значения с классом module_menu. Смотрим на такие значения как font-size...

Таких свойств обнаружить не удалось, в этом классе не указаны размеры ссылок.

Теперь ищем значения с leftcolumn. Их много, поэтому повнимательней.
Также обращайте внимание на комментарии, они могут оказаться полезными.

Как изменить шаблон Joomla

Например комментарий /* LEFT COL H3 */ говорит о свойствах текста заключенного в тэг h3 и находящийся в левой колонке. Это как раз надпись Главное меню, название модулей и т.д.

Чуть ниже этого блока стилей начинается блок /*LEFT COL LINK*/ , он отвечает за ссылки в левой колонке, то что мы и искали. Пожалуйста! Изменяйте как вам хочется.

Ещё ниже будет блок /*LEFT COL CURRENT LINK*/ , он также отвечает за ссылки, но которые открыты в данный момент.

На этом пока закончу.

Во второй части рассмотрим другие моменты. Желаю удачи!

Оставьте комментарий

Добавить комментарий


Защитный код
Обновить

Комментарии   

 
-3 # Григорий 19.09.2010 17:42
Здравствуйте, а где же вторая часть?
Спасибо.
Григорий
Цитировать
 
 
+3 # Олег Касьянов 21.09.2010 23:36
Скоро будет, пока времени очень не хватает.
Цитировать
 
 
+1 # Валерка 05.11.2010 18:04
Ну наконец-то нормальная статья!!Респект и уважуха)Сам сижу и разбираюсь с джумлой, так что перечитал много - а эта статья на голову выше остальных!!!
Цитировать
 
 
# Амир Дакаскос 07.12.2010 21:48
Все просто и доступно... Без воды)))

з.ы. А почему у меня в блокноте не открывает в нормальном виде сразу? Открывает вместо переноса на другую строгу квадратики... Приходится вставлять в Ворд, исправлять, а оттуда обратно копировать в блокнот...
Цитировать
 
 
-2 # Амир Дакаскос 07.12.2010 21:59
Ах да... И еще..
А где именно нужно менять рисунок header.jpg? В директорию, которую установил, или на виртуальном диске Z?

Дело в том, что я пробывал просто переименовывать эту папку, а сайт все равно отоброжает картинки... И файла header.jpg у меня нет вообще...
Цитировать
 
 
# Олег Касьянов 07.12.2010 22:23
- Файлы .php лучше редактировать в WordPad,обычный блокнот некорректно отображает.

- Все изменения происходят на диске С:
- В разных шаблонах, разные названия шапок: header, head, logo и т.п.
Цитировать
 
 
-1 # дима 30.11.2011 14:06
Цитирую Administrator:
- Файлы .php лучше редактировать в WordPad,обычный блокнот некорректно отображает.

- Все изменения происходят на диске С:
- В разных шаблонах, разные названия шапок: header, head, logo и т.п.


Лучше всего редактировать файлы php в notepad ++. |Сам пользуюсь этой прогой. Ну а если обычного редактора не хватает, тогда Dreamweaver в руки и вперед))
Цитировать
 
 
-2 # sid 17.01.2011 08:43
http://www.joomlatown.net/rabota-s-joomla/delaem-site/107-edit-template-2
Цитировать
 
 
-1 # Владимир 19.01.2011 19:16
Первый раз за несколько месяцев нашел в интернете как найти расположение кода в шаблоне joomla...
Цитировать
 
 
-2 # Илья 07.02.2011 21:24
спасибо, все понятно и доступно
Цитировать
 
 
-1 # Татьяна Ш. 22.02.2011 20:49
У меня такая ситуация: чисто из любопытства сменила один шаблон (milkyway), который загружался по умолчанию, на другой (beez). Теперь хочу вернуть прежний. Захожу в Менеджер шаблонов своего сайта. Жму на нужный шаблон (мilkyway), жму Изменить. Получаю:
Параметры Файл параметров \templates\rhuk_milk yway\params.ini is Недоступен на запись!

Как вернуть прежний шаблон? Спасибо!
Цитировать
 
 
+2 # Олег Касьянов 22.02.2011 22:40
Так же ставите на нём галочку(точечку) и выбираете его по умолчанию. Все вопросы в личку.Задать вопрос кнопочка есть.
Цитировать
 
 
-1 # оля 06.05.2011 13:27
где эта кнопочка?! :-? у меня столько вопросов к Вам!
Цитировать
 
 
-1 # Олег Касьянов 06.05.2011 17:19
Под шапкой,в верхнем выпадающем меню. Крайняя справа.
Цитировать
 
 
-2 # julia 31.03.2011 13:48
спасибо! очень хорошая статья и очень доходчиво
Цитировать
 
 
-2 # оля 06.05.2011 13:25
Все доходчиво, понятно, как раз то, что надо! Но... что делать если сайт был разработан кем-то другим, а точнее где найти файл в котором все это можно менять?
Цитировать
 
 
-2 # tania 12.07.2011 10:27
вопрос такой. не оч поняла где найти и заменить шапку. Не могу найти в админ панели где хранятся эелементы шаблонов, шапка и прочие подгружаемые картиночки.Версия joomla 1.5.23. Хочется снести ту что в шаблоне и подставить вместо нее свою.
Цитировать
 
 
# Олег Касьянов 13.07.2011 02:14
Все файлы и элементы шаблона хранятся не в админ панели, а на хостинге(денвере) в папке templates/ваш_шаблон
Цитировать
 
 
-2 # Алексей 20.07.2011 13:31
а как мне поменять банер.jpg на банер.gif и какой код вставить в php заместо старого?
Цитировать
 
 
-2 # Алексей 20.07.2011 13:37
Цитирую Алексей:
а как мне поменять банер.jpg на банер.gif и какой код вставить в php заместо старого?


верней шапку
Цитировать
 
 
-1 # Олег Касьянов 20.07.2011 17:22
Сделать gif-изображение и подставить вместо .jpg
В файле стилей шаблона (template.css) изменить расширение файла с .jpg на .gif
Цитировать
 
 
-1 # Алексей 20.07.2011 18:29
большое спасибо до меня самого доперла!

а можно ли добавить фоновую музыку, если да то каким способам?
Цитировать
 
 
-1 # Олег Касьянов 21.07.2011 02:15
Ради бога, пожалейте своих пользователей.Сейчас не 90-е года, музыку они могут послушать когда захотят в другом месте и такую, которая им нравится.
А так можно попробовать плагин AllVideos или другое подобное расширение.
Цитировать
 
 
-2 # Алексей 21.07.2011 11:36
Цитирую Administrator:
Ради бога, пожалейте своих пользователей.Сейчас не 90-е года, музыку они могут послушать когда захотят в другом месте и такую, которая им нравится.
А так можно попробовать плагин AllVideos или другое подобное расширение.


Я тоже самое говорю но шеф настаивает )))) спс получилось только почему то в опере играет а в хроме и мозиле нет. Делал через JBGMusic
Цитировать
 
 
-3 # Алексей 21.07.2011 11:51
У меня последний вопрос мозг уже вскипел, надо сделать меню на зеленом фоне и чтобы когда наводишь например "Главная" обводилась белым цветом(желательно плавные углы). Все почти получилось но возникла такая проблем-ка фон сзади кнопок белый, подскажи как его можно закрасить в такой же цвет. (((( может модуль на подобие этого знаешь?
меню надо такое http://my.megagroup.ru/design/data/2011/03/4621_2_e38b38a5e3d8275.jpg

а вот сайт как сейчас у меня: invest2014.ru

(((
Цитировать
 
 
-1 # Олег Касьянов 21.07.2011 17:22
Есть компонент для создания меню SWMenu. В нём можно загружать фоновые изображения для кнопок,при наведении,когда пункт выбран и т.д.
А так стили отвечающие за фон кнопок можно найти при помощи FireFox+FireBug и изменить на нужный.Также и с формой кнопок,сейчас новые браузеры поддерживают radius у блоков.
http://www.joomlatown.net/vveden/delaem-site/57-edit-template
Цитировать
 
 
-2 # Алексей 21.07.2011 17:49
Большое спасибо очень сильно помогли мне я только 3 ий день с joomla.
Цитировать
 
 
-2 # Алексей 21.07.2011 19:06
Цитирую Алексей:
Большое спасибо очень сильно помогли мне я только 3 ий день с joomla.



Я просто в шоке 0_о меню супер настроит даже младенец я просто сам тупил )))))
Цитировать
 
 
-2 # Алексей 22.07.2011 06:31
а что нужно сделать чтобы на страничке можно было также добавлять Коментарии, а также сделать типо онлайн ответ.
Цитировать
 
 
-2 # Алексей 22.07.2011 13:12
Цитирую Алексей:
а что нужно сделать чтобы на страничке можно было также добавлять Коментарии, а также сделать типо онлайн ответ.


у меня все получилось только почему то сообщения сразу не появляются их сначала надо от модерировать а исправить не могу (
Цитировать
 
 
-1 # Алексей 22.07.2011 13:16
Цитирую Алексей:
Цитирую Алексей:
а что нужно сделать чтобы на страничке можно было также добавлять Коментарии, а также сделать типо онлайн ответ.


у меня все получилось только почему то сообщения сразу не появляются их сначала надо от модерировать а исправить не могу (


и английская
Цитировать
 
 
-1 # Олег Касьянов 22.07.2011 22:02
Смотря что вы установили для комментариев, в любом случае в настройках это должно выключаться.
Цитировать
 
 
-2 # Алексей 22.07.2011 13:55
КАК изменить ширину комментариев то они вылазиют за рамки
Цитировать
 
 
-1 # Олег Касьянов 22.07.2011 22:03
При помощи CSS, а что за шаблон стоит?
Цитировать
 
 
-2 # Алексей 23.07.2011 09:20
Помоги пожалуйста не чего не пойму на всех страницах пропал фон за буквами, кроме страницы Задай вопрос, я уже все перепробовал не чего не помогат, что делать не знаю сайт invest2014.ru
Цитировать
 
 
# Олег Касьянов 23.07.2011 11:39
Все вопросы через форму: http://www.joomlatown.net/ask-question
Цитировать
 
 
-1 # danunahren 31.08.2011 10:16
Скачал шаблон, но не могу сделать, чтобы главное меню выглядело как на демо сайте шаблона. Там есть смена внешнего вида с помощью других префиксов модуля меня, но и с ними меню выглядит не так. На сайте шаблона всё по английски и перевожу с помощью гугл хром, может что и не понял. Вы не можете помочь с этим делом?
Цитировать
 
 
# Олег Касьянов 31.08.2011 15:07
Пришлите архив, посмотрю. Может что то получится
joomlatown(сабака)yandex.ru
Цитировать
 
 
+1 # danunahren 31.08.2011 19:03
Хорошо. Спасибо за помощь.
Цитировать
 
 
-1 # danunahren 01.09.2011 02:55
Олег, огромное спасибо, что помогли разобраться. Сам бы я доходил очень долго.
Цитировать
 
 
# Inseo 25.10.2011 09:50
Олег,спасибо за просвещение . СПАСИБО за твой труд и помощь .Дмитрий.
Цитировать
 
 
# Дмитрий 25.10.2011 10:06
Буду продолжать постижение вебмастеринга. :roll:
Цитировать
 
 
-1 # Наталья 19.01.2012 13:30
Здравствуйте, админ и гости сайта! у меня вопрос очень важный для меня, на форумах ответа так и не нашла... Внезапно уменьшился шрифт на моем сайте, размер шаблона не изменился, т.е. ctrl+ тут не причем. На других пользователях моего компьютера отображается нормально - как и прежде, браузер у них тот же, что и у меня - Мозила. Где искать разгадку? Подскажите, пожалуйста... :sigh: :-?
Цитировать
 
 
-1 # Олег Касьянов 19.01.2012 14:38
Для начала попробуйте почистить кеш браузера.
Инсрументы - стереть недавнюю историю
Цитировать
 
 
-1 # Наталья 20.01.2012 00:27
Спасибо за отклик! Сделала все, как Вы сказали. Но ничего не произошло, зато в анализаторе сайтов нашла строчку Кодировка сервера / страницы: Неверная кодировка / utf-8 (Unicode, worldwide). Не знаю что с этим делать : где искать эти настройки?
Цитировать
 
 
-1 # Олег Касьянов 20.01.2012 01:51
UTF8 - это правильная кодировка.
Кстати в настройках браузера шрифт тоже можно изменить - если это не указано в стилях шаблона.
Попробуйте ещё посмотреть настройки шрифтов в мозиле.
Цитировать
 
 
# Константин из С-Пб 06.04.2012 19:47
Благодарю за толковое и понятное объяснение как изменить шаблон. Я сделал все, как у вас написано и все получилось! Очень доволен.
Цитировать
 
 
# Олег Касьянов 19.04.2012 18:48
Рад был помочь!
:-)
Цитировать
 
 
# kolidija 19.04.2012 17:12
Спасибо за интересную и подробную статью.Но я опять не нашла ответ на свой вопрос.Я создаю пункт меню шаблон "список категории".Вывожу на странице начала трех статей.При нажатии на "подробнее",движок выдает один текст при голом шаблоне и без картинок.С чем это может быть связано?Подскажите,п ожалуйста.Заранее благодарна.
Цитировать
 
 
# Олег Касьянов 19.04.2012 19:14
Трудно так сказать, смотреть надо.
Может шаблон виноват, может браузер, может сама Joomla. На всякий случай вот http://www.joomlatown.net/vveden/faq-joomla/152-qlekarstvoq-ot-mnogih-problem-i-gljukov
Цитировать
 
 
# Наталья 19.07.2012 21:07
Здравствуйте, пытаюсь изменить шапку в своем шаблоне поменяла нужный файл в папке images на свой файл-картинку такого же размера, при запуске картинка изменилась, но когда решила вернуть ту картинку,что была первоначально почему то не получается. Делаю все те же действия, а картинка на самом сайте картинка шапки остается без изменений.
Можете подсказать почему не меняется картинка?
Цитировать
 
 
# Олег Касьянов 20.07.2012 01:42
Попробуйте очистить кеш Joomla, а потом браузера.
Цитировать
 
 
# Наталья 20.07.2012 10:32
Спасибо большое за совет и статью. :-)
Цитировать
 
 
# MAr 24.07.2012 14:38
делал все как написано в админпанели не чего не изменилось шапка да и вообще весь шаблон не появился в чем причина? Там стоят стандартные новые не добавляются.хотелось бы увидеть видео с подробным инструкциями о смене шапки и всего шаблона я думаю большинство народу меня поддержит Так я вообще не чего не понял что тут написано....(Для того чтобы изменить шаблон, нужно немного знать его структуру)-знаем а вот дальше не понял.После установки шаблона-КАК ЕГО уСТаНоВИТЬ?(чтобы он появился в Админпанели)
Цитировать
 
 
# Олег Касьянов 24.07.2012 20:41
Шаблон устанавливается как обычное расширение.
После установки его можно увидеть в менеджере шаблонов.
Расширения -> Менеджер шаблонов.
Чтобы он включился, его нужно сделать шаблоном по умолчанию.
Цитировать
 
 
+1 # Согул 16.10.2012 23:07
Здраствуйте можите почистить шаблон от ссылок?
Цитировать
 
 
+1 # Олег Касьянов 17.10.2012 11:56
Здравствуйте, могу - но немного позже. Сейчас много работы. Где то на следующей неделе. Если что пишите через форму обратной связи http://www.joomlatown.net/ask-qwestion
Цитировать
 
 
# Шамильхан 05.12.2012 15:02
Я понимаю что не совсем по теме. Но как мне на своем сайте сделать такой же оригинальный вид комментирования чтоб и Вконтакте, и фейсбук и JComments и твитер желательно.
Цитировать
 
 
# Олег Касьянов 05.12.2012 15:13
Для этого достаточно установить плагин SocComments, но твиттера там нет.
freejoom.ru/soccomments.html
Цитировать
 
 
# Дизайн студия Сергея Бурмистро 03.02.2013 14:58
Столкнулся с тем, что нужно было изменить шрифт слогана сайта joomla 1.5 шаблона сделанного в Artisteer. Решение: в файле Ваш_сайт/templates/в аш_шаблон/css/templa te/css/ открыть файл template.css в нем найти строку с текстом "art-slogan, .art-slogan a, .art-slogan a:link, .art-slogan a:visited, .art-slogan a:hover" нижее ее будут описаны параметры слогана. В том числе Используемые шрифты находятся в строке font-family: Там заменяете название шрифта на нужное Вам.
Причем первое название в кавычках стоит по-умолчанию.
Желаю Всех БЛАГ! Заходите в гости http://vk.com/r__a__y
Цитировать
 
 
# Марат 10.02.2013 12:21
Спасибо огромное!
Очень всё просто и понятно!
Занес ваш сайт в закладки!
Пока только на беспатентном хостинге тренируюсь.
Но правда делал с использованием CSS.
Заходите полюбопытствовать!
http://ed-wilson.narod.ru/
Цитировать
 
 
# Олег Касьянов 10.02.2013 16:16
Неплохо!
:-)
Посмотрел урок про "лупу в фотошопе", полезно... недавно с этим сталкивался.
Цитировать
 
 
# Евгений 23.08.2013 18:35
У меня вопрос. В шаблонах используется строка кода:
JHtml::_('behavior.framework', true);
Если исключить данную строку из кода шаблона, как измениться работа шаблона?
Насколько критично наличие данной строки в коде шаблона?
Что в шаблоне перестанет работать без этого кода?
Буду ждать ответ профи. Спасибо.
Цитировать
 
 
# Олег Касьянов 23.08.2013 22:33
Эта строчка подключает скрипты mootools.
Mootools нужен для правильной работы некоторых расширений Joomla.
Цитировать
 
 
# Ольга34 09.11.2013 19:43
Скажите пожалуйста, а как изменить шаблон на Joomla 3
Цитировать
 
 
# Олег Касьянов 10.11.2013 11:11
Ольга, всё также как и в любой другой Joomla.
Самое главное это понимать HTML и CSS
Цитировать
 
 
# asa123 08.03.2014 20:22
Спасибо за статью полезная !!! :-)
Цитировать