Styling von Wiedergabelisten
Überblick
Wenn Sie das Aussehen von Wiedergabelisten ändern möchten, können Sie dies mithilfe von CSS tun. In diesem Dokument sehen Sie eine Reihe von Stilen, die Sie ändern können. Natürlich gibt es zahlreiche mögliche Änderungen, und Sie müssen den richtigen Selektor finden, um Ihre Aufgabe zu erfüllen.
Styling einer vertikalen Wiedergabeliste
Das folgende Diagramm fasst die für eine vertikale Wiedergabeliste geänderten Stile zusammen. Deinem Diagramm folgt eine Tabelle, in der die Stile aufgeführt sind.
| Steuere die Farbe des Textes auf der Wiedergabeliste | .vjs-mouse.vjs-playlist { Farbe: # E9D2B3; }} |
| Kontrollieren Sie die Farbe des Leerzeichen zwischen Wiedergabelistenelementen |
.vjs-mouse.vjs-playlist { Hintergrundfarbe: # 161D6E; }} |
| Steuern Sie die Farbe des Dauertextes | .vjs-Wiedergabeliste .vjs-Wiedergabeliste-Dauer {. Farbe: # 9BB4DA; }} |
| Steuern Sie die Farbe des Dauerhintergrunds | .vjs-Wiedergabeliste .vjs-Wiedergabeliste-Dauer {. Hintergrundfarbe: # 1160AA; }} |
| Steuert den Abstand zwischen Playlist-Elementen | .vjs-playlist-vertikal .vjs-playlist-item {. Rand oben: 20px; }} |
Gestalten einer horizontalen Wiedergabeliste
Das folgende Diagramm fasst die für eine horizontale Wiedergabeliste geänderten Stile zusammen. Deinem Diagramm folgt eine Tabelle, in der die Stile aufgeführt sind.
| Steuere die Farbe des Textes auf der Wiedergabeliste | .vjs-mouse.vjs-playlist { Farbe: # E9D2B3; }} |
| Kontrollieren Sie die Farbe des Leerzeichen zwischen Wiedergabelistenelementen |
.vjs-mouse.vjs-playlist { Hintergrundfarbe: # 161D6E; }} |
| Steuern Sie die Farbe des Dauertextes | .vjs-Wiedergabeliste .vjs-Wiedergabeliste-Dauer {. Farbe: # 9BB4DA; }} |
| Steuern Sie die Farbe des Dauerhintergrunds | .vjs-Wiedergabeliste .vjs-Wiedergabeliste-Dauer {. Hintergrundfarbe: # 1160AA; }} |
| Steuert den Abstand zwischen Playlist-Elementen | .vjs-playlist-horizontal .vjs-playlist-item {. Rand links: 5px; }} |
Bildlaufleiste ausblenden
Eine Bildlaufleiste in der horizontalen Wiedergabeliste wird nicht benötigt, wird jedoch angezeigt. Wenn Sie die Bildlaufleiste ausblenden möchten, führt der folgende Stil genau das aus:
div.vjs-playlist.vjs-playlist-horizontal {
overflow-y: hidden;
}
Die folgenden Screenshots zeigen die Bildlaufleiste, die in der Wiedergabeliste angezeigt und dann ausgeblendet wird:
