JL Slideshow

  • Эффект появления при "скролле" мышью

    AOS - анимация

    далее...

  • Возможность доп. анимации

    title - meta - description

    далее...

  • Слайд-шоу имеет несколько режимов

    push - pull - slide - fade - scale

    далее...

Любой шаблон на 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://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):

  • ПРАВИЛО ПЕРЕОПРЕДЕЛЕНИЯ АДМИНИСТРАТИВНЫХ ФАЙЛОВ ADMIN

administrator
components

Пример переопределения (создания пути) для файла в формате html.twig - замена файла на новый - [ root/administrator/components/com_gantry5/templates/***/about.html.twig ] ---> (g5_helium/custom/admin/templates/***/about (измененный).html.twig)