Управление темами сайта. Как создать новую тему дизайна сайта
В системе используется Bootstrap 4. Вы можете сгенерировать в системе свою тему на основе темы по умолчанию: указать свои параметры Bootstrap и скомпилировать тему на основе новых параметров Bootstrap.
Управление темами осуществляется с /themes (с 30.03.2023) (в меню пункт "Темы стилизации сйта").
Что необходимо для работы механизма тем:
1. В GetLauout параметр theme устанавливается из designSettings.
2. Есть папка темы example (она копируется при создании новой темы).
3. В корне приложения есть /dart-sass для компиляции sass.
Для создания новой темы делаем следующее:
- Кнопка Создать и название темы (латинскими буквами без пробелов). В итоге создается тема (запись в as_themes и папка в /uploads/themes - по подобию папки темы example).
- Меняем параметры темы (ссылка Переменные Bootstap). Прописываем свой кастом Sass с задействованием переменных Bootstrap.
- Нажимаем справа кнопку Компиляция Sass.
- Устанавливаем тему (кнопка-галка на основе темы) и просматриваем в отдельной вкладке.
См. также - Создание темы для сайта
ВНИМАНИЕ! Никогда не обновляйте саму страницу themes для просмотра темы. Может так случиться, что тема получилась битая (не скомпилировалась) и вы ее установили. Тогда в этом случае вся верстка полетит на сайте.
Чтобы это исправить, необходимо через базу поправить значение темы через такой код:
-- установка темы по умолчанию
update as_designSettings set value=''
where code='theme'
При компиляции файла Sass выдаются ошибки, вы также можете посмотреть выходной файл CSS (убедиться, что там все ок по файлу).
Советы:
- убирайте из параметров темы !default элементы (иначе они не повлияют на применяемое свойство CSS). !default задает свойство только в том случае, если оно ранее не было задано.
- нельзя просто одним махом заменить variables файл - если в ней не будет хотя бы одного требуемого параметра, то тема не скомпилируется.
- всегда держите запасную открытую вкладку /themes на случай если сломается тема и сайт не будет корректно отображаться. Будет возможность установить дефолт тему.
- делайте изменения итеративно - чуть поправили, скомпилировали, посмотрели результат. Так проще выявлять неточности в Sass.
- если вы делаете темную тему, то проверять надо на множестве разных страниц - вероятно в отдельных местах потребуется писать кастом sass для обработки случаев, когда темный элемент выводится на темном фоне или аналогичный случай со светлыми фоном и элементом.
См также:
- Параметры стилизации Bootstap - https://bootstrap-4.ru/docs/4.0/getting-started/options/
- Элементы стилизации в разметке страниц Falcon Space