Любой шаблон от Gantry5 имеет, как правило, несколько предустановленных стилей, идущих в комплекте с базовым стилем. При этом увеличить количество цветов шаблона, например с 2-х до 6-и цветов, достаточно просто. В Gantry5 это можно осуществить с помощью yaml- и scss- файлов. Yaml позволяет создать в административной панели блок с заданными цветовыми решениями, а scss отобразить все это на стороне браузера пользователя.
Стиль этого элемента HTML настроен так, чтобы посетители проявляли удивление, просматривая страницу вашего сайта.
ButtonСтиль этого элемента HTML настроен так, чтобы посетители проявляли удивление, просматривая страницу вашего сайта.
ButtonBox 2
Стиль этого элемента HTML настроен так, чтобы посетители проявляли удивление, просматривая страницу вашего сайта.
Button-2
Изначально нам предлагается следующие варианты блоков с бесплатного шаблона Helium
Простой заменой файла variations.scss в папке helium мы кардинально меняем стиль блоков. В данном ниже примере взят стиль блоков от шаблона PHOENIX ROCKETTHEME с небольшой коррекцией (добавлено box-gradient, title-gradient - изначально этих блоков там нету). Стили кнопок (button) с небольшим дополнением (добавлен атрибут border-radius) также взяты от PHOENIX - файл typography.scss
Box Gradient -> Title Gradient
Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.
buttonBox Gradient
Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.
button button-3 whiteTitle Gradient
Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.
button button-3 blackTitle Gradient
Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.
button button-gradientBox 2
Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.
button button-3 whiteКонечно, не все идеально, но это лучший вариант от шаблонов ROCKETTHEME - советую посмотреть файлы variations.scss от ANTARES и AKUATIK - и дополнить стили блоков на свой выбор, пройдясь по шаблонам от ROCKETTHEME в разделе block variations.
Как же всю "эту красоту" можно внедрить малой кровью у себя на сайте?
На этот случай есть документация разработчика - http://docs.gantry.org
Другой вариант - помощь данного сайта и сайта о Ganrty5 - https://tehnoklimat21.ru/index.php/lichnyj-kabinet/particles-dlya-gantry5
В кратце суть такова.
1 этап
Во-первых, если у Вас еще не установлен любой шаблон от Rockettheme на Gantry5, то Вам надо скачать в свою CMS JOOMLA3 новый плагин joomla-pkg_gantry5_v5.4.37.zip и сам шаблон helium ( joomla-tpl_g5_helium_v5.4.37.zip ) или hydrogen ( joomla-tpl_g5_hydrogen_v5.4.37.zip ) с портала - http://gantry.org/downloads
2 этап
Во-вторых, в папке custom вашего скачанного бесплатного шаблона создать несколько папок, которые помогут нам полностью модернизировать стили без ущерба основному шаблону.
3 этап
Пока нас будет интересовать папка scss. Создадим внутри её дополнительно другие папки (рекомендовано разработчиком Gantry5) и файл custom.scss. Названия соответствуют установленному изначально шаблону, который Вы хотите улучшить (это папки helium и helium-joomla). Почти все шаблоны Rockettheme устроены идентично - поэтому метод подойдет ко всем шаблонам.
Согласно правилу переопределения (золотое правило модернизации шаблона Gantry5), все замены можно осуществить следуя принципам
4 этап
Сайт разработчика намеренно изначально не дает принципа замены стилизации одного шаблона на другой - предлагается "покупать" понравившиеся шаблоны. Но пользователи Gantry давно уже нашли выход из этой ситуации - скачивают любой найденный шаблон от Rockettheme и копируют нужные файлы к себе на свой шаблон в папку custom.
Так как именно шаблон обеспечивает стилизацию блоков, то требуется создать внутри папки helium дополнительные папки
Нас интересует папка styles. Именно сюда нам надо перенести скопированные стили от Phoenix.
5 этап
Большой интерес возникает у фронтенд-разработчика, надо ли активировать скопированные стили и как избежать orange-предупреждений и ошибок типа 500.
И здесь наступает кульминация модернизации шаблона - именно последовательность подключения файлов типа .scss влияет на весь процесс модернизации - будут ли предупреждения об отсутствии переменной, функции или миксина.
На одном шаблоне все может происходить замечательно - без каких-либо ошибок, а на другом сайте те же манипуляции ни к чему не приводят и требуется помощь професcионала по Gantry5.