Как поменять логотип в шаблоне Joomla 3

логотипВ прошлом уроке мы выяснили для чего нужен и Как создать логотип для сайта?. Сегодня мы разберем несколько вариантов как можно поменять логотип в вашем сайте на Joomla 3. Первым делом необходимо заходить в настройки шаблона Joomla 3 и посмотреть, какие настройки там есть.  Многие разработчики в настройках своих шаблонов дают возможность редактирования логотипа, шапки шаблона, футера и многих других примочек. Установочный пакет движка Joomla 3 оснащён демо-шаблонами Beez3, Beez5 и protostar. Выбор и установка логотипа для всех этих шаблонов предусматривается в настройках.

Для этого нужно перейти в "Менеджер шаблонов"→"Стили" и выбрать шаблон по умолчанию. На скриншоте ниже приведен пример как установить логотип в стандартном шаблоне protostar, который устанавливается по умолчанию в пакете Joomla 3.

замена логотипа

Картинка, которая является логотипом, обычно имеет название logo и расширение SVG, JPG, PNG или GIF.  А располагается она, как правило, в директории: ваш_сайт/templates/название_шаблона/images.
Теперь давайте уточним место расположения изображения логотипа. Для удобства в работе я рекомендую сначала установить бесплатное расширение "View Image Info" для браузера Chrome.
Нажимаем правой кнопкой мыши по изображению с логотипом и выбираем в выпадающем окне "View Image Info".

"View Image Info"

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

логотип

Получив эту информацию, вы можете легко заменить изображение с логотипом, предварительно подготовив его с нужными размерами и расширением файла. Но как быть, если вам нужно установить логотип, изображение которого имеет, например, расширение отличное от уже установленного в шаблоне логотипа?
Сначала нужно определить в какой позиции вашего шаблона установлен логотип. Для определения позиций модулей в шаблонах Joomla 3 сразу после названия сайта нужно набирать такие символы:?tp=1. В строке браузера будет такой путь: localhost/ваш_сайт/?tp=1. Обновляем страницу (F5). На скриншоте приведен пример шаблона от студии YooTheme.

позиции в шаблоне

Если у вас не высветились позиции модулей, значит нужно в шаблоне включить просмотр позиций модулей. Для этого в административной панели сайта заходим в "Расширения" – "Менеджер шаблонов"- "Настройки" и включаем показ позиций.
Некоторые разработчики шаблонов для Joomla  практикуют вставку логотипа, используя модуль произвольного "HTML-кода". Зная позицию модуля, а именно "logo", нужно проверить её. Заходим в "Расширения" – "Менеджер модулей" и находим модуль в позиции "logo". Есть такой модуль и в нем указан путь к картинке  logo.svg.  

модуль в позиции "logo".

Дальше остаётся поменять название и, при необходимости, размеры изображения используя визуальный редактор. Мы создали свой логотип для сайта.

Пропишем размеры и путь к нашему новому логотипу:<p><img src="/images/yootheme/logo.png" alt="Создание сайтов CMS Joomla!" width="268" height="66" /></p>. Опубликуйте модуль «Произвольный HTML-код» в позиции на сайте "logo" и обновите страницу сайта. Ваш новый логотип появится в позиции "logo" на странице сайта.

новый лого

Сейчас мы проведём маленький эксперимент. Щелкните в правом верхнем углу экрана по кнопке для изменеия размера окна браузера

уменьшение окна браузера

Начинайте медленно уменьшать окно браузера потянув его за правый контур и в какой-то момент вы увидите, что у вас снова появился старый лого только маленьких размеров

мини логотип

Как же теперь сделать чтобы на этом месте появился наш маленький логотип? Снова заходим в "Расширения" – "Менеджер модулей" и ищем модуль произвольного "HTML-кода" в позиции "logo-small".

logo-small

В графическом редакторе измените размеры созданного нами логотипа до размеров, указанных на скриншоте выше. Сохраните его под названием logo_small.png и поместите в папку images/yootheme/logo_small.png.

Пропишем размеры и путь к нашему мини логотипу:<p><img src="/images/yootheme/logo_small.png" alt="Создание сайтов CMS Joomla!" width="135" height="40" /></p>. Опубликуйте модуль «Произвольный HTML-код» в позиции на сайте "logo-small" и обновите страницу сайта. Медленно уменьшайте окно браузера Ваш мини логотип появится в позиции "logo-small" на странице сайта.

А теперь рассмотрим пример шаблона от разработчика ThemeForest. Определим по вышеприведенному принципу в какой позиции шаблона установлен логотип.

логотип

Заходим в "Расширения" – "Менеджер модулей"  и выясняем, что в данном шаблоне логотип выводится не через модуль произвольного "HTML-кода".
Попробуем найти другой способ замены логотипа для этого шаблона. Проинспектируем логотип шаблона с помощью плагина Firebug установленного для браузера Mozilla Firefox.

Firebug для браузера Mozilla Firefox

В левой колонке "Стиль" видим, что путь к картинке с логотипом, его размеры прописаны в файле layout.css. Для того, чтобы найти путь к файлу layout.css среди прочих файлов шаблона, нужно на надпись layout.css(строка 259) навести курсор.
С помощью текстового редактора, например  Notepad++, открываем файл layout.css и находим строку 259. Здесь можно внести нужные вам изменения для того, чтобы вывести новый логотип .

файл CSS

Подвелём краткий итог: сегодня мы разобрали четыре способа замены логотипа в шаблоне CMS Joomla.
1-й вариант: Замена логотипа в стандартных настройках шаблона. Первым делом нужно всегда заходить в настройки шаблона и разбираться с его возможными параметрами по настройке.
2-й вариант: Просмотр размера и названия вашего текущего логотипа в папке с изображениями шаблона. Подготовка логотип с такими же размерами, названием и расширением файла. Загрузка изображения с заменой старого логотипа.
3-й вариант: Вывод нового логотипа в необходимой позиции на сайте, используя встроенный модуль "Произвольного HTML-кода".
4-й вариант: Изменение кода шаблона и применение CSS стилей оформления. Проинспектировав логотип шаблона с помощью плагина Firebug, находим файл CSS, отвечающий за позиционирование логотипа. Прописываем в файл CSS необходимые изменения и обновляем страницу сайта.
Удачи Вам в ваших начинаниях!

↓↓↓ Понравилась статья? Жми на кнопки! ↓↓↓

Комментарии   

Dmitry
0 # Dmitry 18.03.2016 00:02
Над логотипом появился текст названия сайта. Все советуют убрать это в дефолтном модуле, но там такого нет.
Ответить | Ответить с цитатой | Цитировать

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


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