Переопределение стиля элемента управления

Разработчик может изменить стандартный стиль элемента управления с помощью дополнительных CSS-правил.

Изменение внутренних стилей стандартных элементов управления не рекомендуется. Поддержка обратной совместимости верстки элементов управления не гарантируется Docsvision.

Изменение стандартного стиля

Чтобы изменить стандартный стиль элемента управления, выполните следующие действия:

Создайте CSS-файл с классом с правилами, переопределяющими стандартный стиль элемента управления.

CSS-правила, используемые стандартным стилем элемента управления, можно определить с помощью инструментов разработчика, предоставляемых веб-браузером. Пример приведён в конце пункта; также смотрите примеры в репозитории Docsvision на Github.

Создайте в папке \%WebCinstallDir%\5.5\Site\Content\Modules каталог для размещения файлов собственного Решения. В названии папки предпочтительно использовать только латиницу, не использовать пробелы и спецсимволы.
Скопируйте CSS-файл, полученный на шаге 1, в созданный каталог Решения.
Укажите название CSS-класса, реализованного на шаге 1, в программе Конструктор Web-разметок в свойстве Дополнительные css классы изменяемого элемента управления. Сохраните разметку.
Перезапустите IIS.

Перезапуск необходим только при добавлении нового файла, при изменении — не требуется.

Пример переопределения стиля

В качестве примера далее приведена последовательность действий при изменении цвета фона элемента управления Строка.

+ . Создадим файл style.css со следующим содержимым:

.new-textbox input
{
	background-color: yellow !important;
}

+ Класс new-textbox определяет правило, которое применяется к элементу input, и устанавливает желтый цвет для фоновой заливки.

Класс был сформирован следующим образом:

Открыли разметку карточки с элементом управления Строка. В данном случае — разметка создания карточки исходящего документа.
Открыли код элемента управления Строка (в разметке карточки — поле Тема) с помощью инструментов разработчика.

Рисунок 1. Код элемента управления в веб-браузере Chrome
Нашли в структуре элемента управления Строка элемент, требующий изменения фоновой заливки. Данным элементом является input (поле для ввода).

Для создания селектора CSS-класса, который позволит установить стиль для элемента input, достаточно в селекторе указать название тега (input) и установить приоритет important для свойства background-color (фоновая заливка).
Создадим для Решения папку {\%WebCinstallDir%}\5.5\Site\Content\Modules\SuperSolution.
Скопируем файл style.css в папку {\%WebCinstallDir%}\5.5\Site\Content\Modules\SuperSolution.
Укажем название класса new-textbox в свойстве Дополнительные css классы элемента управления Строка в программе Конструктор Web-разметок и сохраним разметку.

Рисунок 2. Дополнительные CSS-классы в настройках элемента управления TextBox
Перезапустим IIS.
Запустим карточку с настроенной разметкой для проверки применения стиля.

Рисунок 3. Разметка карточки с собственным стилем поля Тема