Box (тест кнопок и блоков)

Любой шаблон от Gantry5 имеет, как правило, несколько предустановленных стилей, идущих в комплекте с базовым стилем. При этом увеличить количество цветов шаблона, например с 2-х до 6-и цветов, достаточно просто. В Gantry5 это можно осуществить с помощью yaml- и scss- файлов. Yaml позволяет создать в административной панели блок с заданными цветовыми решениями, а scss отобразить все это на стороне браузера пользователя.

Изначально нам предлагается следующие варианты блоков с бесплатного шаблона Helium

Простой заменой файла variations.scss в папке helium мы кардинально меняем стиль блоков. В данном ниже примере взят стиль блоков от шаблона PHOENIX ROCKETTHEME с небольшой коррекцией (добавлено box-gradient, title-gradient - изначально этих блоков там нету). Стили кнопок (button) с небольшим дополнением (добавлен атрибут border-radius) также взяты от PHOENIX - файл typography.scss

Конечно, не все идеально, но это лучший вариант от шаблонов 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.