---
title: "Farbschema des Vitextra List Filter Webparts ändern"
description: "So passen Sie das Vitextra List Filter Webpart mit eigenem CSS an: Schaltflächenfarben, Beschriftungsstile, Listensteuerelemente und Ausrichtung für Ihr SharePoint-Design."
url: https://vitextra.com/de/support/kb/10033
language: de
published: 2020-03-02
modified: 2026-11-02
products:
- "List Filter"
author: "Līga Ozola"
tags: ["SharePoint List Filter Gestaltung", "List Filter Webpart anpassen", "Vitextra List Filter CSS", "Filter-Webpart Farbe ändern", "SharePoint Webpart CSS", "spfilter CSS-Klassen", "Skript-Editor Webpart", "benutzerdefiniertes SharePoint-Design"]
---
# Farbschema des Vitextra List Filter Webparts ändern
So passen Sie das Vitextra List Filter Webpart mit eigenem CSS an: Schaltflächenfarben, Beschriftungsstile, Listensteuerelemente und Ausrichtung für Ihr SharePoint-Design.
In diesem Artikel wird beschrieben, wie Sie das Farbschema und das Erscheinungsbild des Vitextra List Filter Webparts ändern.
## Einführung
Mit dem [Vitextra List Filter Webpart](https://vitextra.com/de/products/list-filter) können Sie einen benutzerdefinierten Filterbereich erstellen, um Daten in einer SharePoint-Liste oder einer Dokumentbibliothek zu suchen. Der Bereich besteht aus Steuerelementen wie Schaltflächen, Listen und Beschriftungen.
Dieser Artikel beschreibt, wie Sie den Filterbereich an das Branding oder das Design Ihres Unternehmensportals anpassen. Jedes Steuerelement, das List Filter rendert, hat eine eigene CSS-Klasse, sodass Sie es gezielt ansprechen und Ihr eigenes Farbschema anwenden können.
## Stile anwenden
Um den Filterbereich zu gestalten, müssen Sie Ihr benutzerdefiniertes CSS auf der Seite registrieren. Am einfachsten fügen Sie dazu ein **Skript-Editor**-Webpart (Script Editor) auf der Seite hinzu, auf der der Filter angezeigt wird.
Öffnen Sie die Seite im Bearbeitungsmodus, setzen Sie den Cursor in die Webpart-Zone, gehen Sie zu **EINFÜGEN → Webpart** und wählen Sie **Skript-Editor** in der Kategorie **Medien und Inhalt**:
*Hinzufügen des Skript-Editor-Webparts zu einer SharePoint-Seite*
Klicken Sie auf **Hinzufügen**, um das Webpart in die Seite einzufügen.
Klicken Sie anschließend auf **AUSSCHNITT BEARBEITEN** (EDIT SNIPPET) im Skript-Editor-Webpart.
*Ausschnitt auf einer SharePoint-Seite bearbeiten*
Fügen Sie im Ausschnitt-Dialog Ihre Stile ein und klicken Sie auf **Einfügen**.
*Ausschnitt auf einer SharePoint-Seite bearbeiten*
💡 **Tipp**
Fügen Sie das Skript-Editor-Webpart am unteren Rand der Seite ein, damit es keine große Lücke im Layout hinterlässt.
## CSS-Referenz
Verwenden Sie die folgenden CSS-Klassen, um die Steuerelemente des Filterbereichs anzusprechen:
Element | Klasse | Übergeordnetes Element
--|--|--
Filterbereich | .spfilter |
Symbolleiste | .spfilter-toolbar | .spfilter
Bereich der Aktionsschaltflächen | .spfilter-footer | .spfilter
Schaltfläche „Filtern“ | .spfilter-button-filter | .spfilter-footer
Schaltfläche „Exportieren“ | .spfilter-button-export | .spfilter-footer
Feldcontainer | .spfilter-fields | .spfilter
Feld | .spfilter-field | .spfilter-fields
Feldbeschriftung | .spfilter-field-label | .spfilter-field
Filtersteuerelement | .spfilter-field-input | .spfilter-field
Listensteuerelement | .k-dropdown-wrap | .spfilter-field-input
📝 **Hinweis**
Überschreiben Sie die Stile des Listensteuerelements nicht direkt über den Selektor ```.k-dropdown-wrap```. Verwenden Sie stattdessen den spezifischeren Selektor ```.spfilter .k-dropdown-wrap```.
## Beispiele
Die folgenden Beispiele zeigen, wie Sie benutzerdefinierte Stile auf das List Filter Webpart anwenden.
### Farbschema ändern
Im Filter-Webpart können Sie sechs Farben überschreiben:
- primär (#0072c6)
- primär beim Daraufzeigen (#004c84)
- primär beim Aktivieren (#00467a)
- sekundär (#f4f4f4)
- sekundär beim Daraufzeigen (#e2e2e2)
- sekundär beim Aktivieren (#0072c6)
Die Primärfarbe wird für die Schaltflächen **Filtern** und **Exportieren** verwendet; die Sekundärfarbe für die Symbolleisten-Schaltflächen **Teilen**, **Felder** und **Einstellungen**.
Beispiel 1. Farbschema in Orange ändern
```
```
Ergebnis:
*SharePoint Filter Webpart. Benutzerdefiniertes Farbschema*
### Beschriftungsstil ändern
Beispiel 2. Stil der Feldbeschriftung ändern
```
```
Ergebnis:
*SharePoint Filter Webpart. Benutzerdefinierter Beschriftungsstil*
### Farbe der Liste
Beispiel 3. Farbe des Listensteuerelements ändern
```
```
Ergebnis:
*SharePoint Filter Webpart. Benutzerdefinierter Listenstil*
### Ausrichtung der Schaltflächen
Beispiel 4. Die Schaltflächen „Filtern“ und „Exportieren“ nach rechts verschieben
```
```
Ergebnis:
*SharePoint Filter Webpart. Rechtsbündige Schaltflächen*