Исходный шаблон Helium на вкладке Styles имеет 2 цветовых оттенка (Accent Colors)
Чтобы добавить дополнительный цвет - Accent Color 3, воспользуемся документацией к Gantry 5.
В документации на сайте docs.gantry.org можно найти пути решения.
В папке шаблона Helium есть папка blueprints/styles/accent.yaml, копируем этот файл к себе для дальнейшего изменения.
Если внести изменения непосредственно в accent.yaml , то при обновлении шаблона Helium наши дополнения исчезнут.
Поэтому в папке custom надо создать переопределение: custom/****/accent (измененный).yaml,
Согласно трем золотым правилам переопределения Gantry 5,
если файл взят из шаблона + из папки blueprints/styles , то надо создать переопределение ---> custom/blueprints/styles/accent(измененный).yaml
1 шаг - добавляем строки в исходный файл accent.yaml
измененный yaml код:
name: Accent Colors
description: Accent colors for the Helium theme
type: core
form:
fields:
color-1:
type: input.colorpicker
label: Accent Color 1
default: "#4db2b3"
color-2:
type: input.colorpicker
label: Accent Color 2
default: "#8f4dae"
color-3:
type: input.colorpicker
label: Accent Color 3
default: "#a9b33a"
2 шаг - создадим переопределение custom/blueprints/styles/accent (измененный).yaml.
То есть в папке custom создадим папку blueprints, в ней папку styles и загрузим туда файл accent.yaml (измененный). Эта операция в дальнейшем при обновлении шаблона Helium (Hydrogen или др.) не позволит уничтожить ваши модернизации (улучшения), что очень важно для проекта.
3 шаг - заходим в административную панель нашего шаблона на вкладку Styles и сразу видим:
4 шаг - появление на шаблоне новой переменной $accent-color-3 поможет лишь в тех случая, когда та или иная частица затребует эти предустановленне данные с помощью кода
color: accent-color-3 !important;
Что бывает крайне редко. Обычно в scss файле используется стандартный код
color: accent-color-3;
Поэтому изменения цвета с помощью модификации файла accent.yaml в Gantry5 не прокатит, необходимо дополнительно внести модификацию (новый цвет accent-color-3) в ваш файл color.scss и preset.yaml
5 шаг - дополняем файлы color.scss и preset.yaml необходимым кодом и нажимаем затем кнопку Recompile CSS
color.scss
$accent-color-3: #a9b33a;
preset.yaml
accent:
color-1: '#4db2b3'
color-2: '#8f4dae'
color-3: '#a9b33a'
P.S.
Чтобы полноценно задействовать в шаблоне дополнительный цвет Accent Color 3 необходимо провести модификацию файла presets.yaml (папка Layout в корневой папке шаблона) (задать переменную в preset1 - стр. 14, а затем добавить строчки с кодом в preset2, preset3 и т.д. ), а для этого согласно правилам переопределения создать путь custom/layout/preset.yaml (измененный) - это позволит в дальнейшем быстро менять цветовую гамму нашего шаблона.
