Стили шапки шаблона

Движок Joomla 1.5-2.5 немобилен, поэтому возникают сложности с отображением сайта на смартфонах и айфонах, а это занижение позиций и потеря трафика. Радикальное решение проблемы – это миграция на Joomla 3, которая адаптивна, но тут возникает много геморройных ситуаций, так как некоторые настолько переделали CMS, что сохранить функциональность сайта после переноса невозможно.

Если вы не радикал, но хотите чтобы сайт нормально отображался в мобильных устройствах, то оптимальный вариант – это адаптивный шаблон. Совсем без геморроя не получится, то анальных шишек будет в разы меньше, чем при миграции. В этом я попытаюсь убедить на примере адаптивного шаблона Yoo Big Easy, который я легко поставил на Joomla 1.5, по идее, он должен ставиться на более поздние версии CMS (объясню почему ниже).  Шаблон скачать можно внизу страницы, так что не обвиняйте в показе пряника на расстоянии.

Особенности шаблона

Шаблон Yoo Big Easy разработали немецкие программисты из конторы YooTheme, используя для него фреймворк Warp. Отсюда растут ногу у уверенности в совместимости с Joomla 1.7-2.5. Шаблон позволяет настраивать отображение сайта на обычных компьютерах и мобильных устройствах. Для оптимизатора:

  1. - Выбор 7 цветов оформления,
  2. - Ручная установка ширины шаблона и сайтбара,
  3. - Переключение шрифтов в админке,
  4. - Куча других полезных настроек.

Ещё вчера проблема отображения сайтах Joomla 1.5 на мобильных устройствах решалась с помощью Joomla Mobile, но сегодня тут возникли сложности. При обычной версии компонента буржуйский Page Speed не видит мобильной версии сайта, отсюда автоматическое ухудшение позиций web-ресурса в мобильной выдаче. Покупать Joomla Mobile Pro за 50$ или искать адаптивный шаблон – вот какие перспективы стоят перед оптимизатором и Yoo Big Easy не худшее решение.

Настройка адаптивного шаблона

Настройка

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

Для начала посмотрите через ?tp=1 позиции модулей, и настройте их вывод на новых местах. Если у вас включен плагин NoDoubles, то выключите его, иначе позиций не увидите. Так как позиции старого и нового шаблона практически не совпадают, кроме footer, то советую не выключать модули, а копировать их и настраивать дубль на вывод в новом адаптивном шаблоне. Так вы можете быстро переключиться на старый шаблон, если с настройкой нового возникнут сложности.

Например, у меня поиск по сайту стоит от Яндекса. Я отметил галочкой модуль и нажал «Копировать», после чего зашёл в копию, включил её и изменил позицию на sidebar-b. Получается у меня включено одновременно два модуля поиска, но они не конфликтуют, так как один показывается в одном шаблоне, второй в другом. У меня надо было копировать и перенастраивать модули:

  1. - Последних комментариев,
  2. - Меню,
  3. - Хлебных крошек,
  4. - Последних статей,
  5. - Поиска,
  6. - Кода Google AdSense.

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

месторасположение файла template

Да, перенесите фавикон в корень и пропишите в templates

<link rel="SHORTCUT ICON" href="/favicon.ico" type="image/x-icon">/.

CSS

В шаблоне Yoo Big Easy стили CSS расположены в папках warp/css и css от корня. Сложностей особых нет. Лично я за часа два изменил цвет фона, шрифты, отображение модулей и убрал копирайт. Сложности возникли с шапкой, так как по умолчанию её почти нет, картинки нет точно.

Решается проблема с шапкой так:

  1. - Возьмите шапку из старого шаблона,
  2. - При необходимости измените её размер под настройки ширины шаблона,
  3. - Загрузите картинку в папку шаблона image.

Теперь в файл css/layout.css внесите изменения. У меня css шапки выглядит так:

#header { display: block; width: 1100px;  (ширина должна совпадать с шириной шаблона в настройках админки) height: 203px; (на свой вкус и цвет) background: url(../images/logo.png) 0 0 no-repeat; top: 9px; right: 0px;

Копирайт вырезается из шаблона, в отличие от любимого index.php, в адаптивном Yoo Big Easy это Template, который находится в папке Layouts.

Если выключили цвет оформления синий, то изменить фон можно в файле css/background/fabric_blue. Создайте свою картинку-фон укажите её адрес в строке файла background-image и закиньте фон по указанному адресу. У меня это /images/background/. Строка выглядит

background-image: url("../../images/background/fabric_blue_img1.jpg").

Соответственно, фон находится в "../../images/background/

Остальное добьёте интуитивно с помощью мата и желания сэкономить 50$ на покупке версии Pro от Joomla Mobile.

Скачать шаблон с настройками по умолчанию можно тут.

Комментарии   

0 #2 Administrator 20.02.2017 22:42
Не получится поставить этот шаблон через Joomla Mobile - компонент с чужими разработками не работает. Я давно уже пришёл к решению, что лучше всего адаптив, на мой взгляд, любая мобильная версия уступает.
Цитировать
+1 #1 Илья 20.02.2017 17:43
Интересно, но я не понял можно ли настроить так, чтобы в десктопной версии отображался старый шаблон, а при заходе с мобильного - новый?
В базовой версии mobile joomla в настройках видел, что можно выбрать шаблон для мобильных. И вот пришла идея попробовать выводить шаблон, который Вы предлагаете через mobile joomla, но чутье подсказывает, что ничего не выйдет...
Интересно услышать Ваше мнение.
Цитировать

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


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