Как изменить шаблон Joomla: Редактирование шаблона Joomla
Опубликовано: 01.09.2018
Здравствуйте, друзья! В прошлой статье я рассказывала о том, как правильно выбрать, скачать и установить шаблон joomla , и пообещала следующий пост посвятить редактированию установленного шаблона. Однако, немного поразмыслив, я поняла, что одним постом здесь не отделаешься. Чтобы подробно рассказать о том, как изменить шаблон Joomla и настроить его под свои нужды, нужно начинать целую отдельную серию статей.
Сегодня я представляю вам первую статью из цикла “ Как изменить шаблон joomla ”. Начнем мы, пожалуй, с самого простого: будем учиться менять графику на сайте.
Что нам понадобится
Браузер Mozilla Firefox Фотошоп (или аналог вроде GIMPа или кореловского фотопэйнта, я буду пользоваться именно фотошопом)Меняем графическое оформление шаблона, или попросту говоря, картинки
Я для изучения беру простенький шаблон. На его примере покажу принцип, по которому вы сможете изменить абсолютно любой графический элемент в шаблоне Joomla любой сложности.
Ручное редактирование стиля элементов шаблона Joomla 3 Protostar
Да, кстати, оговорюсь сразу, что хотя этот способ и универсальный, но не всегда им обязательно пользоваться. В сложные шаблоны уже чаще всего встроена панель управления, используя которую вы легко настроите внешний вид шаблона без манипуляций, которые я продемонстрирую ниже.
Установка и настройка шаблона для Joomla 3
Итак, приступим.
Вот так выглядит в оригинале шаблон, который мы будем изменять.
Я выделила элементы, которые нужно сменить в первую очередь:
Логотип – обязательно поменять на свой собственный. Я напишу Web-Koshka.ru, например На скрине непонятно, но это слайдшоу из трех фотографий. Вообще шаблон изначально архитектурной тематики, поэтому и фотографии в тему. Заменю на свои – кошачьи. Подвал – какой-то он тускло-серый, сменим на мой любимый голубой.Переходим в папку с сайтом, находим папочку “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-Кошка!
