Управление темами сайта. Как создать новую тему дизайна сайта
В системе используется 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 для обработки случаев, когда темный элемент выводится на темном фоне или аналогичный случай со светлыми фоном и элементом.
См также:
- Параметры стилизации Bootstap - https://bootstrap-4.ru/docs/4.0/getting-started/options/
- Элементы стилизации в разметке страниц Falcon Space
Google поиск по нашей документации
- Руководства
- Основа Falcon Space
- Основные компоненты
- Возможности
- Коммуникация с пользователем
- Дизайн, стилизация, юзабилити Панели с тенью и со скруглением Добавление анимации Как стилизовать иконку Ограничения по изменению дизайна Изменение стилизации через CSS Анимация элементов. Как работать с анимацией Как сделать анимацию иконок Управление темами сайта. Как создать новую тему дизайна сайта Как сделать липкую панель сверху страницы CSS. Как внедрить свои стили CSS на каждой странице портала CSS. Кастомные CSS файлы для страницы Руководство по юзабилити сайтов на базе Falcon Space. Как улучшить свой сайт Как улучшить внешний вид личного кабинета на сайте - элементы стилизации в разметке страниц Falcon Space Как внедрить форму настроек внешнего вида сайта Как внедрять готовую верстку в страницу Верстка. Как внедрить новый шрифт в проект CSS. Как через CSS управлять стилями конкретных страниц Гид по стилям Falcon Space Кастом разметка верхней панели (TopMakeup) Как поменять степень затемнения фона у диалогового окна Верстка. Как поменять столбцы местами на смартфоне Управление анимацией для форм, таблиц Как сделать основное меню горизонтальным Как сделать основное меню белым Управление иконкой в окне alert справа вверху окна Как сделать полную кастомизацию верхней полоски сайта (customHeader) Как сделать дизайн сайта со скругленными элементами (или без скруглений) Вывод на экран денежных сумм (отображение рублей, валюты) - as-money Как увеличить картинку на странице Визуализация воронки на основе данных Создание своей темы для сайта Горячие клавиши Falcon Space Как сделать модальное окно определенной ширины Панели показа подсказок (для базовых инструкций по странице)
- Лендинги
- Универсальный API
- Примеры интеграций
- Каталоги
- Навигация
- Документы
- Дополнительные компоненты
- Продвижение, SEO
- Системные моменты
- Системное администрирование
- HOWTO
- Таблицы
- Формы
- Загрузка файлов, картинок
- Работа с SQL
- HOWTO JS
- HOWTO Верстка
- Решение проблем
Выгода от использования Falcon Space
В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
- Шаг 1. Создать концепт проекта
- Шаг 2. Получить оценку бюджета (КП)
- Шаг 3. Заключить договор
- Шаг 4. Создать совместно техническое задание
- Шаг 5. Поэтапная реализация проекта