Для того чтобы правильно дорабатывать стили, необходимо выполнить следующее:

  1. Определить, к какой группе и подгруппе стилей относится доработка
  2. Добавить недостающие переменные в соответствующий файл _Variables.less
  3. Добавить стили в соответствующий _Settings.less
  4. Получить актуальный пакет тем оформления
  5. Доработать батник RebuildLessThemes.bat
  6. Запустить батник 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. После выполнения рекомендаций открыть батник текстовым редактором и настроить следующее:

  1. Темы, которые надо компилировать.
  2. Путь к BaseStyles.less.

По умолчанию тем пять (рекомендуется тему BaseTheme сразу убрать). Необходимо оставить одну или несколько, для которых все и делается. После этого настроить путь к BaseStyles.less.

В пути не должно быть кириллицы.

6.Если все настроено правильно, то после запуска батника и обновления страницы будут отображены добавленные стили.