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

Box 2

Стиль этого элемента HTML настроен так, чтобы посетители проявляли удивление, просматривая страницу вашего сайта.

button button-4

Изначально нам предлагается следующие варианты блоков с бесплатного шаблона 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.

button

Box Gradient

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

button button-3 white

Title Gradient

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

button button-3 black

Title Gradient

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

button button-gradient

Box 1

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

button button-3

Box 2

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

button button-3 white

Box 3

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

button button-2

Box 4

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

button button-4

Box 5

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

button button-3

Box 6

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

button-6

Box Grey

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

Read More

Box Pink

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

Read More

Box Red

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

Read More

Box Purple

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

Read More

Box Orange

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

Read More

Box Blue

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

Read More

Title 1

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

Read More

Title 2

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

Read More

Title 3

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

Read More

Title 4

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

Read More

Title 5

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

Read More

Title 6

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

Read More

Title Grey

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

Read More

Title Pink

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

Read More

Title Red

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

Read More

Title Purple

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

Read More

Title Orange

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

Read More

Title Blue

Lorem ipsum dolor sit amet, consecetur adipiscing elit donec sit amet nibh.

Read More

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