В этой статье описано, как изменить цветовую схему и внешний вид веб-части Vitextra List Filter.

Введение

Веб-часть Vitextra List Filter позволяет создать настраиваемую панель фильтрации для поиска данных в списке SharePoint или библиотеке документов. Панель состоит из таких элементов управления, как кнопки, списки и подписи.

В этой статье описано, как изменить оформление панели фильтра в соответствии с брендингом или темой вашего корпоративного портала. Каждый элемент управления, отрисовываемый List Filter, имеет собственный CSS-класс, поэтому вы можете обратиться к нему и применить свою цветовую тему.

Применение стилей

Чтобы оформить панель фильтра, необходимо зарегистрировать пользовательский CSS на странице. Проще всего это сделать, добавив веб-часть Редактор сценариев (Script Editor) на страницу, где отображается фильтр.

Откройте страницу в режиме редактирования, установите курсор в зону веб-частей, перейдите в ВСТАВКА → Веб-часть и выберите Редактор сценариев в категории Мультимедиа и содержимое:

Нажмите Добавить, чтобы вставить веб-часть на страницу.

Затем нажмите ИЗМЕНИТЬ ФРАГМЕНТ (EDIT SNIPPET) на веб-части «Редактор сценариев».

В диалоговом окне фрагмента вставьте свои стили и нажмите Вставить.

CSS-справочник

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

Примеры

Ниже приведены примеры применения пользовательских стилей к веб-части List Filter.

Изменение цветовой схемы

В веб-части фильтра можно переопределить шесть цветов:

• основной (#0072c6)
• основной при наведении (#004c84)
• основной при нажатии (#00467a)
• дополнительный (#f4f4f4)
• дополнительный при наведении (#e2e2e2)
• дополнительный при нажатии (#0072c6)

Основной цвет используется для кнопок Фильтр и Экспорт; дополнительный — для кнопок панели инструментов Поделиться, Поля и Настройки.

Пример №1. Изменение цветовой схемы на оранжевую

<style>
/* Color of the primary buttons */
.spfilter-footer button {
  background-color: #ca5010 !important;
  border-color: #ca5010 !important;
}

.spfilter-footer button:hover {
  background-color: #da3b01 !important;
  border-color: #da3b01 !important;
}

.spfilter-footer button:active {
  background-color: #a4262c !important;
  border-color: #a4262c !important;
}

/* Color of the secondary buttons */
.spfilter-toolbar button,
.spfilter-toolbar button:hover{
  background-color: #c19c00 !important;
  border-color: #c19c00 !important;
  color: #fff !important;
}

.spfilter-toolbar button:active {
  background-color: #ca5010 !important;
  border-color: #ca5010 !important;
}
</style>

Результат:

Изменение стиля подписи

Пример №2. Изменение стиля подписи поля

<style>
/* Field Label Style */
.spfilter-field-label {
  font-weight: normal;
  text-transform: uppercase;
}
</style>

Результат:

Цвет списка

Пример №3. Изменение цвета элемента «Список»

<style>
/* Active List Style */
.spfilter .k-dropdown-wrap.k-state-active {
  background-color: #ca5010 !important;
  border-color: #ca5010 !important;
}

/* Selected Item Style */
.spfilter .k-list>.k-item.k-state-focused {
  background-color: #c19c00 !important;
  border-color: #c19c00 !important;
  color: #fff !important;
}
</style>

Результат:

Выравнивание кнопок

Пример №4. Перемещение кнопок «Фильтр» и «Экспорт» вправо

<style>
/* Buttons position */
.spfilter-footer {
  text-align: right;
}
</style>

Результат: