So ändern Sie Farbschema und Erscheinungsbild des List Filter Webparts

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

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.

Fügen Sie im Ausschnitt-Dialog Ihre Stile ein und klicken Sie auf Einfügen.

CSS-Referenz

Verwenden Sie die folgenden CSS-Klassen, um die Steuerelemente des Filterbereichs anzusprechen:

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

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

Ergebnis:

Beschriftungsstil ändern

Beispiel 2. Stil der Feldbeschriftung ändern

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

Ergebnis:

Farbe der Liste

Beispiel 3. Farbe des Listensteuerelements ändern

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

Ergebnis:

Ausrichtung der Schaltflächen

Beispiel 4. Die Schaltflächen „Filtern“ und „Exportieren“ nach rechts verschieben

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

Ergebnis: