Управление темами сайта. Как создать новую тему дизайна сайта

В системе используется Bootstrap 4. Вы можете сгенерировать в системе свою тему на основе темы по умолчанию: указать свои параметры Bootstrap и скомпилировать тему на основе новых параметров Bootstrap. 

Управление темами осуществляется с /themes (с 30.03.2023) (в меню пункт "Темы стилизации сйта"). 

Что необходимо для работы механизма тем: 

1. В GetLauout параметр theme устанавливается из designSettings.

2. Есть папка темы example (она копируется при создании новой темы). 

3. Обновлено ядро (и это решение на базе Core версии, где есть sass компиляция(dart-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 для обработки случаев, когда темный элемент выводится на темном фоне или аналогичный случай со светлыми фоном и элементом. 

См также:

  1. Параметры стилизации Bootstap - https://bootstrap-4.ru/docs/4.0/getting-started/options/
  2. Элементы стилизации в разметке страниц Falcon Space
Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Выгода от использования Falcon Space

В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
Нужна бесплатная консультация?
Планируете делать веб-проект?
Сайт использует Cookie. Правила конфиденциальности OK