Любой шаблон на Gantry 5 от Rockettheme можно модернизировать, улучшить. Не секрет, почти все ранние версии шаблонов - Antares, Acronym, Citadel, Ethereal, Flux, Galatea, Interstellar, Isotope, Notio, Protean, Remnant, Salient, Supra, Sienna, Versla, Xenon и др. - содержат те или иные ошибки. Конечно, Вы можете оформить платную подписку на эти шаблоны и регулярно получать обновления от разработчиков, не заморачиваясь - но этот путь не для меня. Во-первых, это дороговато - 49$, а во-вторых, вы получете только доспуп только к частицам одного шаблона, а их всего на коммерческом шаблоне около 30 штук.
Демонстрационные шаблоны от Rockettheme представлены на сайте: http://demo.rockettheme.com/joomla-templates
Rockettheme также предлагает 2 бесплатных шаблона - Hydrogen, Helium. - которые постоянно обновляются (в них устраняются ошибки, уязвимости и т.п.). Среди всех шаблонов, изначально лично мне больше понравился ранний Antares версия 1.1.0 - но его основная проблема - устаревший код (нет поддержки Lightcase, конфликт jQuery с другими расширениями, неправильно загружаются сценарии Mootools / jQuery, нет совместимости с PHP 7.1, отсутствуют шрифты в формате woff2, проблемы при просмотре сайта на планшете и др.).
Поэтому лучше модернизировать простой бесплатный шаблон Helium с поддержкой, чем ковыряться постоянно в коде шаблона Antares, выискивая ошибки и не понимая, почему что-то не работает.
Документация по модернизации шаблона на Gantry 5 находится на docs.gantry.org Используя браузерный переводчик, можно изучить основные приемы по созданию и внедрению новых частиц, атомов, секций и всего прочего, так необходимого для разработчиков сайта.
Других, более полных, ресурсов на просторах интернета пока не обнаружено. Хотя вру, есть целая индустрия по продаже готовых частиц Gantry5 :
- https://www.inspiretheme.com/gantry5-particles
- https://joomlead.com/gantry-5-particles
- http://vitaliykulikov.ru/katalog/chastitsy-dlya-gantry-5.html (закрыт - ошибка 500)
Почти все, что предлагают эти ресурсы можно найти и скачать бесплатно на сайте https://inet4ik.ru/razdely/fajlovyj-arkhiv (закрыт - перепрофилирован)
Главное для нас научиться работать с Gantry5 - понять как копировать, создавать, настраивать частицы и исправлять ошибки разработчиков шаблонов со встроенными частицами. На данный момент для скачивания предлагаются шаблоны, работающие на jQuery 1.12 - у них нет поддержки jQuery3 (хотя разработчик уже исправил эту несовместимость)
Существует 3 простых правила переноса, которые можно назвать "золотыми", без которых невозможно правильно модернизировать простой шаблон .
-
ПРАВИЛО ПЕРЕОПРЕДЕЛЕНИЯ СТИЛЕЙ (ТЕМАТИЧЕСКИХ КАТАЛОГОВ)
( + все, что мы видим визуально на вкладке Styles в административной панели шаблона)
admin blueprints blueprints/styles gantry lanquage layouts scss html
1. admin
Чтобы заменить стандартные изображения шаблона HELIUM в админ панели на любые другие изображения, отражающие вашу цветовую тематику шаблона, в папке custom надо создать путь custom/admin/images и загрузить туда 5-6 картинок в формате preset1.png ( preset2.png и т.п.) - они заменят идущие по умолчанию в шаблоне Helium (Hydrogen) картинки типа:
или
В зависимости от количества задействованных в шаблоне цветов (обычно это 3 цветовых решения) в папке custom надо создать путь custom/gantry и загрузить туда, например, скопированный с другого шаблона файл preset.yaml с указанием этих цветов через запись preset1, preset2 и т.д.
Это обеспечивает отображение в нижней части картинок полосы с чередованием задействованных цветов шаблона:
2. blueprints/styles
Создание (копирование с других коммерческих шаблонов) и переопределение файлов yaml обеспечивает администратора сайта инструментарием для быстрого визуального изменения шаблона (выбор шрифтов, цвет кнопок, стиль меню и др. )
Чтобы создать эти блоки в админ панели, надо в папке custom создать путь custom/blueprints/styles и загрузить туда файлы base.yaml, accent.yaml, font.yaml, button.yaml, menustyle.yaml и др. со взятыми данными (скопированным кодом) от других шаблонов ROCKETTHEME
Создав дополнительные файлы, вы получите в админ панели что-то вроде этого:
Таким образом, постепенно копируя код с других шаблонов, Вы модернизируете свой шаблон Helium, повышая его статус от простого шаблона до супер шаблона.
3. gantry
О файле preset.yaml уже было упомянуто выше. Здесь же создается цветовое решение для всех секций шаблона, в т.ч. и для вновь созданных:
Все значения переменных будут отражены в админ панели шаблона, но все они будут задействованы в шаблоне лишь при условии создания файла colors.scss в папке custom/scss, откуда в дальнейшем берутся данные (переменные в формате типа $navigation-background: rgba (255, 255 , 255, 0.5) !default или $navigation-background: #000000 !default) для создания цветовых решений для секций шаблона, для меню и т.д
4. scss
Для модернизации нашего шаблона это самая востребованная папка. Количество созданных и вложенных сюда подпапок может достигать 50-100 штук. И без них не обойтись !!!
Как правило почти все шаблоны на Gantry5 - это шаблоны от ROCKETTHEME. А все они имеют одну структуру. Поняв её, Вы запросто будете переносить данные с одного шаблона на другой, ничего не теряя и только преумножая свой супершаблон новыми стилевыми решениями.
Все шаблоны от Rockettheme устанавливаются в Joomla по умолчанию в папку templates и имеют схожую структуру как в Joomla3, так и в Joomla4
Прописав в папке custom точный путь (например, custom/fonts/exo) и поместив скопированные файлы, Вы можете провести процедуру активации новых стилей Recompile CSS через файл custom.scss или воспользоваться процедурой автоматической замены файлов scss старого шаблона на новые стилевые файлы scss от другого шаблона.
Но процедура автоматической замены (процедура переопределения стилей) скорее исключение из правил, чем стандартная ситуация по модернизации файла. И она требует от администратора (frontend-разработчика) определенных знаний Gantry5.
Пример простого переопределения стилей кнопок "вперед - назад" - прописать точный путь к измененному файлу _core.scss в папке custom [custom/scss/helium-joomla/styles/_core(измененный).scss ].
Стандартная процедура активации измененных файлов проходит через Recompile CSS
-
ПРАВИЛО ПЕРЕОПРЕДЕЛЕНИЯ ДЛЯ ДВИЖКА NUCLEUS
( + все, что мы увидим при нажатии настроечного колесика на вкладке Layout)
admin layouts particles scss templates templates/content twig twig/partials
Зайдите в административную панель вашего бесплатного шаблона Helium (Hydrogen) на вкладку Layout. Там Вы увидите настроечное колесико:
или
Настроечное колесико можно встретить во всех секциях (sections) и частицах (particles) - всем этим управляет движок nucleus (папка nucleus - [корневой каталог сайта/media/gantry5/engines/nucleus]).
Вкладка LAYOUT наиболее востребованная часть для переопределения стиля шаблона. Позволяет кардинально изменять вид секции шаблона, дополняя его image-background, overlay, clipping и variations (автоматическое использование задействованных классов CSS)
Пример переопределения (создания пути) для файла в формате yaml - замена файла на новый - [ root/media/gantry5/engines/nucleus/***/section.yaml ] ---> (g5_helium/custom/engine/***/section (измененный).yaml)
Например, результат такой модернизации (появление новых полей в секции slideshow - background-image и overlay):
administrator components
Пример переопределения (создания пути) для файла в формате html.twig - замена файла на новый - [ root/administrator/components/com_gantry5/templates/***/about.html.twig ] ---> (g5_helium/custom/admin/templates/***/about (измененный).html.twig)