Для того чтобы правильно дорабатывать стили, необходимо выполнить следующее:
- Определить, к какой группе и подгруппе стилей относится доработка
- Добавить недостающие переменные в соответствующий файл _Variables.less
- Добавить стили в соответствующий _Settings.less
- Получить актуальный пакет тем оформления
- Доработать батник RebuildLessThemes.bat
- Запустить батник RebuildLessThemes.bat
О каждом пункте подробнее.
1.Как сказано в статье Базовая тема Flexberry ASP.NET и ее связь с другими темами, каждая тема поделена на три группы.
- Контролы (Controls),
- Формы (Forms),
- Библиотеки (Libraries).
В каждом группе есть подгруппы. Прежде чем добавлять стили, необходимо определить, к какому блоку они относятся. Если необходимо добавить отступы к основному меню страницы - то это формы. Если нужно дополнить DateTimePicker - это контролы. Если изменить внешний вид календаря - это библиотеки.
2.Здесь нужно обратить внимание на назначение _Variables.less. Этот файл содержит все переменные, использующиеся в данном наборе стилей. К таким переменным относятся: классы, идентификаторы, цвета, отступы.
/* Наименования классов. */
@pageHeaderClass: page-header; // Хедер.
@pageBlockTreeId: pageBlockTreeview; // Блок меню.
/* Цвета. */
@linksColor: #000;
@linksHoveredColor: #12a1e5;
@linksFocusedColor: #3a88d5;
/* Отстутпы. */
@menuPadding: 25;
Название переменной должно нести определенный смысл. Если переменная является классом, то в конце к названию необходимо добавить Class. Если идентификатором - Id. Если это цвет - необходимо указать состояние, когда он применяется (Hovered, Focused, Seleced, Disabled и т.д), его тип (Background, Border, TextShadow, BoxShadow) и добавить в конце Color.
3.После того как добавлены все необходимые переменные, надо добавить стили в _Settings.less. Данный файл импортируется таким образом, что перекрывает существующие стили. В таком случае можно не использовать !important.
Например, необходимо увеличить высоту пунктов основного меню. Ознакомившись со структурой тем, очевидно, что необходимое изменение затронет главную страницу (MainPage), которая относится к формам (Forms). Следует найти нужную папку, в которой есть три файла “_Settings.less”, “_Variables.less”, “MainPage.less”. Определить, какого селектора коснется изменение. Найти соответствующую переменную в “_Variables.less”. Если она там отсутствует - добавить. После этого в “_Settings.less” добавить нужное правило.
Если правило уже существует, и какое-то из свойств необходимо переопределить, то в _Settings.less нужно написать полный путь к необходимому элементу. Иначе новое правило не перекроет существующее.
4.Для того чтобы изменения вступили в свои права, необходимо из .less-файла получить .css-файл. Структура сделана таким образом, что из множества .less’ок получается один большой .css-файд (BaseStyles.css). Существует ряд программ, позволяющих компилировать .css, но с некоторыми возникают сложности. Для решения этих проблем был написан батник, который легко компилирует все, что нужно. Он находится в папке Tools и его можно запросить у Службы поддержки Flexberry. Полученную папку необходимо добавить в любое место проекта (чекинить ее не нужно!). В папке Tools лежит три три файла: less.js, файл readme и RebuildLessThemes. Чтобы батник правильно работал, необходимо выполнить действия, описаные в readme. После выполнения рекомендаций открыть батник текстовым редактором и настроить следующее:
- Темы, которые надо компилировать.
- Путь к BaseStyles.less.
По умолчанию тем пять (рекомендуется тему BaseTheme сразу убрать). Необходимо оставить одну или несколько, для которых все и делается. После этого настроить путь к BaseStyles.less.
В пути не должно быть кириллицы.
6.Если все настроено правильно, то после запуска батника и обновления страницы будут отображены добавленные стили.