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

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

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

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

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

    CSS-правила, используемые стандартным стилем элемента управления, можно определить с помощью инструментов разработчика, предоставляемых веб-браузером. Пример приведён в конце пункта; также смотрите примеры в репозитории Docsvision на Github.
  2. Создайте в папке /lib/docsvision/webclient/Content/Modules каталог для размещения файлов собственного Решения. В названии папки предпочтительно использовать только латиницу, не использовать пробелы и спецсимволы.

  3. Скопируйте CSS-файл, полученный на шаге 1, в созданный каталог Решения.

  4. Укажите название CSS-класса, реализованного на шаге 1, в программе Конструктор Web-разметок в свойстве Дополнительные css классы изменяемого элемента управления. Сохраните разметку.

  5. Перезапустите dvwebclient или обновите страницу в браузере, отключив кэширование. Перезапуск необходим только при добавлении нового файла, при изменении — не требуется.

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

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

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

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

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

Класс был сформирован следующим образом:
  1. Открыли разметку карточки с элементом управления Строка. В данном случае — разметка создания карточки исходящего документа.

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

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

    Для создания селектора CSS-класса, который позволит установить стиль для элемента input, достаточно в селекторе указать название тега (input) и установить приоритет important для свойства background-color (фоновая заливка).

  4. Создадим для Решения папку /lib/docsvision/webclient/Content/Modules/SuperSolution.

  5. Скопируем файл style.css в папку /lib/docsvision/webclient/Content/Modules/SuperSolution.

  6. Укажем название класса new-textbox в свойстве Дополнительные css классы элемента управления Строка в программе Конструктор Web-разметок и сохраним разметку.

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

  8. Запустим карточку с настроенной разметкой для проверки применения стиля.

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