Überschreibe die Audio-Player-Stile mit eigenem CSS, wenn die integrierten Farb- und Layout-Optionen nicht ausreichen. Funktioniert sowohl beim Inline-Player als auch beim klebenden Footer.
Wo du benutzerdefiniertes CSS hinzufügst
Auf Theme-Ebene (empfohlen)
Nutze den Customizer deines Themes:
- Darstellung → Anpassen → Zusätzliches CSS
- Füge deine Regeln ein
- Veröffentlichen
Das bleibt bei Theme-Updates und Child-Theme-Wechseln erhalten.
Auf Plugin-Ebene
Unter Text-zu-Sprache → Erweitert → Benutzerdefiniertes CSS fügst du CSS ein, das nur auf Seiten mit dem Player geladen wird. Nützlich für Stile, die du gezielt an das Plugin knüpfen möchtest.
Player-Elemente, die du ansprechen kannst
Jedes Element im Player hat einen stabilen Klassennamen. Wichtige Selektoren:
/* Der gesamte Player-Container */
.mementor-tts-player { }
/* Play-Button */
.mementor-tts-play-button { }
/* Fortschrittsbalken (linear) */
.mementor-tts-progress { }
/* Wellenform-Balken (PRO) */
.mementor-tts-waveform-bar { }
/* Zeitanzeige */
.mementor-tts-time { }
/* Geschwindigkeitsauswahl */
.mementor-tts-speed { }
/* Lautstärkeregler */
.mementor-tts-volume { }
/* Download-Link */
.mementor-tts-download { }
/* Klebriger Footer (PRO) */
.mementor-tts-sticky-footer { }
Nutze den Browser-Inspektor, um den gesamten HTML-Baum zu erkunden und genau das zu finden, was du ansprechen möchtest.
Häufige Beispiele
Eckenradius des Themes übernehmen
.mementor-tts-player {
border-radius: 12px;
}
Ein bestimmtes Steuerelement ausblenden
.mementor-tts-loop {
display: none !important;
}
Nutze zuerst die UI-Einstellungen des Plugins. Greife nur dann auf CSS zurück, wenn die Einstellung fehlt.
Play-Button größer machen
.mementor-tts-play-button {
width: 56px;
height: 56px;
}
Benutzerdefinierten Schatten am klebenden Footer
.mementor-tts-sticky-footer {
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
}
Benutzerdefinierte Typografie
.mementor-tts-player {
font-family: "Your Theme Font", sans-serif;
}
.mementor-tts-time {
font-variant-numeric: tabular-nums;
}
CSS-Variablen
Der Player stellt CSS-Custom-Properties bereit, die du überschreiben kannst:
.mementor-tts-player {
--player-bg-color: #your-color;
--player-text-color: #your-color;
--player-play-color: #your-color;
}
Das ist der sauberste Weg, Farben neu zu gestalten, ohne einzelne Regeln zu überschreiben.
Probleme mit der Spezifizität
TTSWP verwendet html body .mementor-tts-*-Selektoren in seinem Standard-CSS, um Theme-Überschreibungen zu schlagen. Um vom Theme aus zu überschreiben, musst du diese Spezifizität erreichen oder übertreffen:
html body .mementor-tts-player {
background: #000;
}
Oder verwende !important sparsam.
Mit dem Browser-Inspektor testen
Nachdem du benutzerdefiniertes CSS hinzugefügt hast:
- Öffne einen beliebigen Beitrag mit Audio im Frontend.
- Rechtsklick auf den Player - Untersuchen.
- Überprüfe das Berechnete Panel, um zu sehen, welche Regeln wirksam sind.