How to Change the Color Scheme and Appearance of the List Filter Web Part

This article explains how to change the color scheme and appearance of the Vitextra List Filter web part.

Introduction

The Vitextra List Filter Web Part lets you build a custom filtering panel to search for data in a SharePoint list or document library. The panel is made up of controls such as buttons, lists, and labels.

This article describes how to restyle the filter panel to match your corporate portal's branding or theme. Every control that List Filter renders has a specific CSS class, so you can target it and apply your own color theme.

Apply Styles

To style the filter panel, you need to register your custom CSS on the page. The simplest way is to add a Script Editor web part to the page where the filter appears.

Open the page in edit mode, place the cursor in the web part zone, go to INSERT → Web Part, and choose Script Editor under the Media and Content category:

Click Add to insert the web part into the page.

Then click EDIT SNIPPET on the Script Editor web part.

In the snippet dialog, paste your styles and click Insert.

CSS References

Use the following CSS classes to target the controls of the filter panel:

Examples

The following examples show how to apply custom styles to the List Filter Web Part.

Change Color Scheme

There are six colors you can override in the Filter Web Part:

• primary (#0072c6)
• primary on hover (#004c84)
• primary on active (#00467a)
• secondary (#f4f4f4)
• secondary on hover (#e2e2e2)
• secondary on active (#0072c6)

The primary color is used for the Filter and Export buttons; the secondary color is used for the toolbar buttons Share, Fields, and Settings.

Example #1. Change the color scheme to orange

<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>

Result:

Change Label Style

Example #2. Change the field label style

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

Result:

Color of the List

Example #3. Change the color of the list control

<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>

Result:

Alignment of the buttons

Example #4. Move the Filter and Export buttons to the right

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

Result: