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

1. Определить к какой группе и подгруппе стилей относится доработка
2. Добавить недостающие переменные в соответствующий файл _Variables.less
3. Добавить стили в соответствующий _Settings.less
4. Получить актуальный пакет тем оформления
5. Доработать батник RebuildLessThemes.bat
6. Запустить батник RebuildLessThemes.bat

Рассмотрим подробней каждый пункт.

1.Как сказано в этой статье каждая тема поделена на три группы.

• Контролы (Controls),
• Формы (Forms),
• Библиотеки (Libraries).

В каждом таком группе есть подгруппы. Прежде чем добавлять стили необходимо определить к какому блоку они относятся. Если необходимо добавить отступы к основному меню страницы - то это формы. Если нужно докрутить DateTimePicker - это контролы. Если изменить внешний вид календаря - это библиотеки.

2.Здесь нужно обратить внимание на назначение _Variables.less. Этот файл содержит все переменны, использующиеся в данном наборе стилей. К таким переменным относятся: классы, идентификаторы, цвета, отступы. Пример записи представлен ниже.

/* Наименования классов. */
@pageHeaderClass: page-header; // Хедер.
@pageBlockTreeId: pageBlockTreeview; // Блок меню.

/* Цвета. */
@linksColor: #000;
@linksHoveredColor: #12a1e5;
@linksFocusedColor: #3a88d5;

/* Отсутпы. */
@menuPadding: 25;

Note: Название переменной должна нести определенный смысл. Если переменная является классом, то в конце к названию необходимо добавить 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 добавляем нужное нам правило.

Note: Если правило уже существует, и какое-то из свойств необходимо переопределить, то в _Settings.less нужно написать полный путь к необходимому элементу. Иначе, новое правило не перекроет существующее.

4.Для того, чтобы изменения вступили в свои права, необходимо из .less-файла получить .css-файл. Структура сделана таким образом, что из множества .less’ок получается один большой .css-файд (BaseStyles.css). Существует ряд программ, позволяющих компилировать .css, но некоторые, грубо говоря, тупят, у других проблема с компиляцией путей картинок. Поэтому был написан собственный батник, который легко компилирует все, что нужно. Он находится в папке Tools и ее можно забрать отсюда \ru\Flexberry Distr\CASEBERRY Subsystems\WebSystem. Необходимо скачать всю папку и добавить в любое место проекта (чекинить ее не нужно!). В папке Tools лежит три три файла: собстенно less.js, текстовый файлик readme, и сам батник RebuildLessThemes. Чтобы батник правильно работал необходимо выполнить действия, описаные в readme. После этого, открываем батник текстовым редактором и настраиваемый следующее:

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

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

Note: В пути не должно быть русских букв.

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