Редактирование шаблона Joomla. Часть первая: займемся графикой

Здравствуйте, друзья! В прошлой статье я рассказывала о том, как правильно выбрать, скачать и установить шаблон joomla, и пообещала следующий пост посвятить редактированию установленного шаблона. Однако, немного поразмыслив, я поняла, что одним постом здесь не отделаешься. Чтобы подробно рассказать о том, как изменить шаблон Joomla и настроить его под свои нужды, нужно начинать целую отдельную серию статей.

Сегодня я представляю вам первую статью из цикла “Как изменить шаблон joomla”.  Начнем мы, пожалуй, с самого простого:  будем учиться менять графику на сайте.

Что нам понадобится

1. Браузер Mozilla Firefox
2. Фотошоп (или аналог вроде GIMPа или кореловского фотопэйнта, я буду пользоваться именно фотошопом)

Меняем графическое оформление шаблона, или попросту говоря, картинки

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

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

Итак, приступим.

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

Я выделила элементы, которые нужно сменить в первую очередь:

1. Логотип – обязательно поменять на свой собственный. Я напишу Web-Koshka.ru, например
2. На скрине непонятно, но это слайдшоу из трех фотографий. Вообще шаблон изначально архитектурной тематики, поэтому и фотографии в тему. Заменю на свои – кошачьи.
3. Подвал – какой-то он тускло-серый, сменим на мой любимый голубой.

Переходим в папку с сайтом, находим папочку “templates” – в ней хранятся все шаблоны, которые установлены у нас на сайте. Находим в ней папку с названием шаблона, который будем видоизменять. Открываем.

Вся графика, которая использовалась при создании шаблона, расположена в одной папке, которая чаще всего называется “images”. Если у вас в каталоге с шаблоном нет папки с таким названием, просто поищите, в какой из папок хранятся картинки. Она-то нам и нужна. У меня этот путь выглядит так: Z:\home\web-koshka\www\templates\as002035free\images. Выделенные фрагменты, естественно, будут отличаться.

Теперь среди всего этого многообразия:

ищем изображение-логотип (выделен на скрине).  Все, самую сложную работу мы уже выполнили. Дальше – дело техники.

Щелкаем по изображению правой кнопкой мыши, выбираем “свойства”, заходим во вкладочку “подробно”.

Нас интересует, во-первых, размер изображения, а во-вторых, его формат. У меня логотип картинка формата png размером 330 на 120 пикселей.

Запускаем фотошоп, создаем в нем новый документ размером с нашу картинку – 330*120 px, даем волю фантазии, и заменяем оригинал на созданный нами логотип. Главное, не забываем выставить при сохранении нужный формат (png в моем случае) и подтвердить замену.

Поскольку я сейчас работаю параллельно с вами, одновременно делаю еще и скрины, то не стала тратить время на лого и сделала вот такую картинку:

Теперь я сохраняю ее в папку Z:\home\web-koshka\www\templates\as002035free\images под именем “companyname” и выставляю расширение “png”.

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

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

Аналогично я могу заменить изображения в слайдере – простой подменой картинок. Однако я не вижу среди изображений тех, которые выводит слайдер. Дело в том, что в шаблоне, который я редактирую, все файлы слайдера собраны в отдельную папку, которая так и называется — «slider». Войдя в нее, мы найдем папку «images», где хранятся все изображения, которые используются слайдером. В эту папку с заменой и поместим нужные фотографии.

Та же история и с фоном, и с футером, только в этих случаях картинкa представлена вертикальной полоской, которая повторяется по горизонтали, формируя фон того или иного элемента. У меня за фон всего сайта отвечает файл bg.body.png. Приставка bg означает background – фон, body – элемент, к которому она относится – весь документ в нашем случае. Аналогично, за фон футера отвечает файл bg.footer, то есть по названию картинки можно в принципе определить, за какой элемент она отвечает.

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

В Firefox встроен очень полезный инструмент для каждого веб-мастера (да и вообще этот браузер, на мой взгляд, самый адекватный, удобный и быстрый как просто для пользователя, так и для веб-мастера). Если вы не можете определить, какой картинкой выводится тот или иной элемент, просто щелкните по нему правой кнопкой мыши, выберите “исследовать элемент”:

Нас интересует окно справа, если оно не раскрылось, откройте его, нажав на “стиль” в правом нижнем углу. В этом окне отображаются все css-стили, которые применяются к интересующему нас объекту. Про css сейчас разговор вести не будем, тем более, в ближайшем будущем у меня запланирована статья, которая будет посвящена как раз основам этого языка стилевой разметки веб-страниц. Нас сейчас интересует свойство “background-image”, в котором как раз и прописан путь к картинке, которая относится к этому объекту. Если вдруг вы не нашли это свойство в списке, попробуйте переключить контейнеры внизу, возможно, фон определен для родительского или, наоборот, дочернего элемента, который по размеру совпадает с интересующим нас.

Есть и еще один способ узнать, какое изображение относится к тому или иному элементу. Опять-таки ПКМ (щелчок правой кнопкой мыши) в нужном месте, и в контекстном меню выбрать «открыть фоновое изображение».  Правда, не всегда помогает, но как вариант — вполне сгодится.

Читаю я все это, и мне просто страшно становится за тех людей, которые впервые столкнулись с этим и читают сейчас мою инструкцию. Хочу вас успокоить – на самом деле все, что я тут так страшно описывала, понятно прямо-таки на интуитивном уровне. Даже если вы не знаете, что такое контейнеры и блоки, ни слова и ни знака не понимаете в окошке “стили”, вы все равно, потыкав те кнопочки, которые я обозначила, найдете то, что ищете.

Так вообще всегда бывает, у меня, во всяком случае, – пока раздумываешь над каким-то делом, в котором пока не очень понимаешь, оно кажется просто мега-сложным и невыполнимым. Стоит начать – и все, хоть и с затруднениями, начинает получаться. В итоге дело сделано, а я приобрела новый, свой собственный опыт. Так что “глаза боятся, а руки делают”!

В общем, после всех изменений мой шаблон выглядит так:

Надеюсь, вы уловили основной принцип, по которому можно заменить абсолютно любую картинку у вас на сайте: определить, какой файл отвечает за вывод этой картинки и заменить ее на свою. Именно по такому принципу вы можете изменить шаблон joomla практически до неузнаваемости!

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