|
Шаблоны Joomla. Часть 2.
(Подгоняем шаблон под себя. Замена рисунков)
Уровень: Новичок - Пользователь Шаблоны Joomla для пользователя. Чтобы увидеть список доступных шаблонов в Вашей версии CMS Joomla, войдите в панель управления сайтом и выберите пункт меню Сайт > Шаблоны > Шаблоны сайта. Можно ли редактировать шаблоны и что под этим понимается? Да, можно. Для этого в окне управления шаблонами есть две кнопки: «Ред. HTML» и «Ред. CSS». Поясним, что это такое. Вам предоставляется возможность редактировать 2 файла, которые описывают шаблон. Удобство такой формы редактирования в том, что Вам не надо знать, где они находятся и как называются. При выборе «Ред. HTML» открывается файл с кодом шаблона. Это обычный файл описания веб-страницы с использованием языков html и php. Не надо его бояться. Некоторые фрагменты его можно изменять, даже не зная этих языков.
В файле кода шаблона описываются следующие моменты. Задается разметка страницы: в каком месте страницы находятся стандартные позиции шаблона. Могут указываться имена файлов для загрузки графических изображений в шаблоне, но не обязательно, изображения также могут указываться в файле с описанием стилей шаблона. В начале кода указывается, откуда загружать файл стилей, и его имя. Нам открыть файл стилей достаточно просто, надо нажать кнопку «Редактировать CSS». Для его модификации необходимо знать язык HTML, что требует уровня подготовки «веб-мастер».
Есть еще несколько файлов, описывающих шаблоны. Но о них мы расскажем в следующем выпуске рассылки. Еще мы расскажем, как устанавливать свободные шаблоны Joomla, найденные в сети самостоятельно, и что в них может потребоваться исправлять. Замена рисунков в шаблоне. Отправная точка текущего практического занятия такая: шаблон выбран из тех, что установлены вместе с самой CMS. Присмотримся к нему внимательнее. С высокой степенью вероятности выбранный Вами шаблон содержит рисунки, не соответствующие тематике Вашего сайта. Например, разработчики шаблона часто загоняют в него свой логотип или эмблему. Понятно, что Вы захотите изменить этот рисунок на «лого» своего сайта. Как это сделать? Технически очень просто.
Все описанные ниже действия мы проделали сами, изменяя шаблон vivacious13, установленный на нашем сайте. На месте рисунка с логотипом Joomla был другой рисунок (оригинальный вид шаблона Вы можете посмтреть на демо-сайте). Итак, рассказываем. Шаг 1. Чтобы рисунок заменить, необходимо иметь на руках готовый рисунок Вашей эмблемы. Как и где создавать рисунки? Мы пока не будем разбирать эту тему. Рассмотрим другой случай. Мы, например, создаем сайт о CMS Joomla и хотим поместить на него логотип этой CMS. Ясно, что таких рисунков в сети должно быть много, попробуем найти что-нибудь подходящее. Но прежде чем искать, необходимо выяснить размер рисунка, который хотим заменить. Зачем? Если новый рисунок будет меньше текущего, то такое допустимо, Если же новый рисунок будет больше, то шаблон может развалиться. Шаг 2. Определяем размер рисунка, а за одно, и имя, файла, в котором он хранится. Все рисунки шаблона есть графические файлы, у каждого файла есть свое имя. Какое имя у заменяемого рисунка? Чтобы узнать это, открываем в браузере сайт, жмем на рисунке правой кнопкой мыши и в появившемся контекстном меню выбираем пункт Сохранить рисунок как… (может быть и другой вариант: Сохранить фон как…). В появившемся окне Сохранение рисунка ищем поле Имя файла, в нем указано имя рисунка, например, Logo.gif. Итак, имя увидели и запомнили. Как определить размер рисунка? Самый простой способ в нашей ситуации – следующий. Мы сейчас находимся в окне Сохранение рисунка и смело жмем кнопку Сохранить. Далее повторим наши действия, описанные в начале этого пункта (повторно откроем окно Сохранение рисунка). Теперь ищем сохраненный файл в списке файлов, нажимаем на нем правой кнопкой мыши и в контекстном меню выбираем пункт Свойства, в появившемся окне выбираем вкладку Сводка, если в низу вкладки видим кнопку Дополнительно, то нажимаем ее. Цель ДОСТИГНУТА! В окне видим таблицу, вверху которой указаны ширина и высота рисунка, запомним их или запишем. Шаг 3. Ищем эмблему Joomla в сети. Заходим на Яндекс и посылаем запрос «Joomla». Можно бродить по сайтам, которые выдаст поисковик и искать на них подходящий рисунок, а можно поступить умнее. На странице с результатами поиска должна быть ссылка «Joomla в картинках». Нажимаем на нее и видим кучу картинок, среди которых находим подходящий рисунок, не забывая про требуемый размер. Щелкаем мышкой на понравившемся рисунке и он появляется в натуральную величину. Теперь сохраняем его на диск, как делали это на шаге 2. Сохранили рисунок joomla.jpg. ГОТОВО! Рисунок найден! Шаг 4. Восстанавливаем в памяти название текущего шаблона. Заходим в панель управления CMS. Выбираем пункт меню Сайт > Шаблоны > Шаблоны сайта. В появившемся списке ищем шаблон, отмеченный галочкой, и запоминаем его имя. Шаг 5. Дошли до самого главного! Закачиваем новый рисунок на сайт в папку с рисунками для текущего шаблона. Если работаете на локальной машине с Денвером, то идете сразу в папку www сайта, который правите.
Если изменять шаблон прямо в Интернете, необходимо помнить следующее. Замена файлов рисунков шаблона с панели управления Joomla невозможна. Данную операцию можно произвести, зайдя на сайт по протоколу ftp, или через файловый менеджер панели управления Вашего хостинга. Мы заходим на сайт по протоколу ftp и отрываем там папку, в которую установлена CMS. Далее последовательно открываем папки templates \ <имя_шаблона> \ images. На локальной машине надо открывать те же папки. В папке images должен быть рисунок Logo.gif, который мы хотим заменить. Есть два варианта замены. Если старый и новый рисунок имеют одинаковые расширения (gif, jpg и т.д.), достаточно задать имя нового рисунка, как у старого и загрузить его с локального диска в папку images. Если у рисунков расширения разные, такой фокус может не пройти. То есть замена имени файла, сохраненого на шаге 3 (joomla.jpg), на имя Logo.gif не желательна. Чтобы сделать все грамотно, необходимо изменить имя рисунка в коде шаблона, а заодно и текстовую подсказку для рисунка, если она есть. В этом случае в папку images загружаем рисунок joomla.jpg. Шаг 6. Редактируем код шаблона (есть 2 варианта). Для страховки перед изменением файла сохраняйте его оригинальную копию!
Вариант 1. Редактируем файл с кодом шаблона по ftp-протоколу. Преимущества: легко создать резервную копию файла.
Мы только что закачали новый рисунок для шаблона. Файл с кодом шаблона находится близко! Выходим из папки images и видим файл index.php. Как его редактировать? Если Вы зашли на сайт через ftp-клиент, то можно редактировать файл сразу на сервере, если позволяет ftp-клиент, или скачать файл на местный диск. Далее открываем файл в текстовом редакторе, ищем в нем имя старого файла (через функцию поиска). Нашли?! Тогда текст «Logo.gif» заменяем на «Joomla.jpg». Как заменить текстовую подсказку для рисунка? Если рядом есть свойство alt="…..", то исправьте текст подсказки на свой.
Вариант 2. Редактируем с панели управления Joomla. Так редактировать быстрее. Но! Будьте внимательны! После сохранения изменений старой версии файла не останется и отмена операции невозможна. Если вы допустили ошибки при редактировании и не поймете, где, придется разбираться.
Для этого варианта в панели открываем окно Управление шаблонами, нажимаем кнопку Ред. HTML, в результате откроется окно HTML-редактор шаблона. В коде шаблона надо найти строку «Logo.gif» с помощью функции поиска браузера (вызывается нажатием <Ctrl>+<F>). Нашли?! Тогда заменяем имя на Joomla.jpg Внимание! Некоторые рисунки прописываются в файле стилей шаблона. Для его изменения надо выйти из HTML-редактора и нажать кнопку Ред. CSS.
ФИНАЛ! Сохраняем файл! Открываем сайт в браузере и любуемся результатами! Тема следующего выпуска. Шаблоны Joomla. Часть 3.
(Подгоняем шаблон под себя. Редактирование стилей) Желаем успехов! Ведуший рассылки Леонид Мальков и "efft" Lab
Просмотров: 54811
|
