При установке на любой шаблон Gantry 5 нескольких типовых частиц от Rockettheme может наблюдаться ситуация, когда при очередной установке новой частицы вдруг нарушается вся структура сайта (сдвигаются кнопки, пропадает навигация, изменяются размеры и толщина букв и т.д., вплоть до исчезновения модулей на странице).
У меня на учебном шаблоне Helium установлено более 100 частиц Gantry 5 с различными модификациями тех или иных частиц. При этом число модицикаций некоторых частиц достигает 10. Так например, при установке очередной частицы Image Grid, встречающейся на всех шаблонах от Rockettheme, наблюдались те или иные ошибки в стилях в уже установленных и ранее корректноработающих частицах Image Grid.
Оказалось, стили каждой модификации частицы имеют в своей структуре одни и те же классы CSS ( g-imagegrid / g-imagegrid-desc / g-imagegrid-item и т.д.). Ссылки на эти классы есть в файлах ****.html.twig и ****.scss. Ссылки в виде опций стиля могут встречаться и в файле ****.yaml
Чтобы избежать наложения стилей в однотипных классах, необходимо модифицировать частицу. Для этого нам понадобится программа Notepad ++
ШАГ 1
Скачиваем и открываем в этой программе наши новые файлы - imagegrid.yaml / imagegrid.html.twig / _imagegrid.scss.
В файле imagegrid.yaml наводим курсор и выделяем букву g и производим автозамену на ga (вторая буква напоминает, с какого шаблона взята частица , например, с шаблона acronyn) :
после автозамены получаем следующее:
сохраняем файл imagegrid.yaml и переходим к файлу imagegrid.html.twig
ШАГ 2
Модифицируем imagegrid.html.twig - заменяем буквы g на ga в этом файле во всех строках (только не меняйте g на ga в строке 7, где описывается класс заголовка частицы)
получим следующее:
ШАГ 3
Модифицируем файл _imagegrid.scss - провоим автозамену английских букв - g на ga
сохраняем файл и переходим к шагу 4.
ШАГ 4
Переносим модифицированные файлы в папку custom нашего шаблона Helium в соответствии с правилами переопределения и с моими рекомендациями (переименование файлов с учетом с какого шаблона получено - в данном случае ставим суффикс _acronym : imagegrid_acronym.yaml / imagegrid_acronym.html.twig / _imagegrid_acronym.scss, и вносим изменения в название частицы :
ШАГ 5
Активируем стили частицы в файле custom.scss и проводим рекомпиляцию стилей, нажав на кнопку Recompile CSS в административной панели активного шаблона (base outline или по умолчанию (default)).
Есть несколько вариантов активации. Лично мне нравится, когда в папке scss, находящейся по пути [custom/scss] создаются смыслосодержащие блоки (папки) - например папка acronym, в которой находятся все стили частиц с этого шаблона (или папка section, в которой находятся стили новых разделов - секций, установленных на шаблон Helium ). В этом случае активация проходит по принципу открытия последовательности папок (прописывается путь до файла через флэш "/" - см строку 29):
В простом случае активацию стиля можно осуществить записью - см. строку 27
P.S.
Если исходная частица имеет дополнительный файл ****.js и в ней есть вышеупомянутые css классы - то менять классы в этом файле не стоит (нарушится работа скриптов). В этом случае лучше отказаться от модификации и изменить другую частицу, без ***.js (или где не встречаются классы, подлежащие замене).