Åsidosätt ljudspelarens stilar med din egen CSS när de inbyggda färg- och layoutalternativen inte räcker till. Fungerar på både den infogade spelaren och den klibbiga sidfotsvarianten.
Var du lägger till anpassad CSS
Temnivå (rekommenderas)
Använd temats anpassningsverktyg:
- Utseende → Anpassa → Ytterligare CSS
- Klistra in dina regler
- Publicera
Detta överlever temauppdateringar och byten av underteman.
Pluginnivå
I Text till tal → Avancerat → Anpassad CSS klistrar du in CSS som bara laddas på sidor med spelaren. Praktiskt för stilar du vill koppla specifikt till pluginet.
Spelarelement du kan rikta in dig på
Varje element i spelaren har ett stabilt klassnamn. Viktiga selektorer:
/* Hela spelarcontainern */
.mementor-tts-player { }
/* Uppspelningsknapp */
.mementor-tts-play-button { }
/* Förloppsfält (linjärt) */
.mementor-tts-progress { }
/* Vågformsstaplar (PRO) */
.mementor-tts-waveform-bar { }
/* Tidsvisning */
.mementor-tts-time { }
/* Hastighetsväljar */
.mementor-tts-speed { }
/* Volymreglage */
.mementor-tts-volume { }
/* Nedladdningslänk */
.mementor-tts-download { }
/* Klibbig sidfot (PRO) */
.mementor-tts-sticky-footer { }
Använd webbläsarens inspector för att utforska hela HTML-trädet och hitta exakt vad du vill rikta in dig på.
Vanliga exempel
Matcha temats kantradie
.mementor-tts-player {
border-radius: 12px;
}
Dölj en specifik kontroll
.mementor-tts-loop {
display: none !important;
}
Använd pluginets UI-inställningar först. Åsidosätt bara med CSS när inställningen saknas.
Gör uppspelningsknappen större
.mementor-tts-play-button {
width: 56px;
height: 56px;
}
Anpassad skugga på den klibbiga sidfoten
.mementor-tts-sticky-footer {
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
}
Anpassad typografi
.mementor-tts-player {
font-family: "Your Theme Font", sans-serif;
}
.mementor-tts-time {
font-variant-numeric: tabular-nums;
}
CSS-variabler
Spelaren exponerar anpassade CSS-egenskaper som du kan åsidosätta:
.mementor-tts-player {
--player-bg-color: #your-color;
--player-text-color: #your-color;
--player-play-color: #your-color;
}
Detta är det renaste sättet att ändra färger utan att åsidosätta specifika regler.
Specificitetsfällor
TTSWP använder html body .mementor-tts-*-selektorer i sin standard-CSS för att slå ut temaåsidosättningar. För att åsidosätta från ditt tema, matcha eller överträffa denna specificitet:
html body .mementor-tts-player {
background: #000;
}
Eller använd !important sparsamt.
Testa med webbläsarens inspector
Efter att du lagt till anpassad CSS:
- Öppna ett inlägg med ljud i klientvyn.
- Högerklicka på spelaren och välj Inspektera.
- Kontrollera panelen Beräknat för att se vilka regler som gäller.