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

12 комментариев

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

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

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

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

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

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

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

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

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

редактирование шаблона joomla

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

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

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

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

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

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

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

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

редактирование шаблона joomla

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

редактирование шаблона joomla

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

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

12 коммент.
  1. DIN

    Читаю ваши статьи… Все очень доходчиво написано. Спасибо Вам за Ваш ресурс!

  2. Ivan

    Добрый день!
    Относительно замены картинки на свою: как заменить, установив те же размеры и название, понятно. Я попробовал установить картинку с теми же размерами, но с другим названием, в папку images я её установил с названием companyname1.png, которая стала рядом с companyname.png, но как её теперь переадресовать…

    • Иван, день добрый!
      Ну во-первых, можно просто поменять названия у картинок. Но если нужно именно указать новую, то необходимо изменить CSS. Для этого сначала нужно найти файл и строку, где используется это изображение. Удобно воспользоваться для этих целей встроенным инспектором FireFox. Вообще подробная инструкция относительно того, как «вычислять» код CSS, который нужно заменить, есть здесь и здесь.

      • Александр

        А как удалить всплывающее окно защиты перед запуском сайт бай десинг?

  3. Дмитрий

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

    • Дмитрий, нужно посмотреть этот элемент инспектором, встроенным в Хром или FireFox, алгоритм такой же, как здесь описан. Это может изображение, спрятанное в другой папке. Может быть, это текстовая ссылка, и тогда нужно поискать текст этой ссылки по файлам шаблона с использованием Тотал Коммандер, например.

      • Дмитрий

        Спасибо за ответ. Буду пробовать, хотя слабо представляю, что и как. У меня к Вам куча вопросов вообще то, но боюсь загрузить Вас) Все равно спасибо за внимание к моему вопросу.

  4. Сергей

    Доброго времени суток! Подскажите, у меня в шаблоне шапка просто белая, без всяких картинок и т.п. Но для красочности шаблона я хочу поместить в шапку свое изображение на всю ширину шаблона, как мне это осуществить.
    Спасибо!

  5. тимур

    СПАСИБО!!!

  6. Татьяна

    Кошечка, СПАСИБО! Нашла ответы на многие вопросы. Просто, доступно и образно. Я не могу решить, скорее всего, простую проблемку. Хватанула для первого раза (от жадности и самоуверенности) сложный шаблон Nicanian2, издеваюсь теперь над ним и над собой. На главной стр. слева есть Лого, при наведении на кот. появляется меню. Как мне это Лого вычленить и заменить — оно исчезает при наведении? Заранее спасибо.

  7. Ну что я могу сказать, манул не плохой. Но есть парочка но. Во первых не сказано, что все это можно делать на прямую с админки https://joomla.shneider-host.ru/blog/ustanovka-i-nastroika-joomla/kak-ustanovit-i-otredaktirovat-shablon-joomla — во вторых не советую использовать PNG ибо тяжелые они… Лучше максимально уменьшить вес страницы.

  8. Доброго времени суток, подскажите пожалуйста, мне понравился шаблон OT_Photographer, но он под 2,5, можно ли его установить на 3,4. Спасибо

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *