Overschrijf de stijlen van de audiospeler met je eigen CSS wanneer de ingebouwde kleur- en lay-outopties niet voldoende zijn. Werkt op zowel de inline speler als de plakkerige voettekstvariant.
Waar je aangepaste CSS toevoegt
Op thema-niveau (aanbevolen)
Gebruik de customizer van je thema:
- Weergave → Aanpassen → Aanvullende CSS
- Plak je regels
- Publiceren
Dit blijft behouden bij thema-updates en wissels naar een child-thema.
Op plug-in-niveau
In Tekst naar spraak → Geavanceerd → Aangepaste CSS plak je CSS die alleen wordt geladen op pagina's met de speler. Handig voor stijlen die je specifiek aan de plug-in wilt koppelen.
Speler-elementen die je kunt targeten
Elk element in de speler heeft een stabiele klassenaam. Belangrijke selectors:
/* De volledige spelercontainer */
.mementor-tts-player { }
/* Afspeelknop */
.mementor-tts-play-button { }
/* Voortgangsbalk (lineair) */
.mementor-tts-progress { }
/* Golfvormbalken (PRO) */
.mementor-tts-waveform-bar { }
/* Tijdweergave */
.mementor-tts-time { }
/* Snelheidsselector */
.mementor-tts-speed { }
/* Volumeschuifregelaar */
.mementor-tts-volume { }
/* Downloadlink */
.mementor-tts-download { }
/* Plakkerige voettekst (PRO) */
.mementor-tts-sticky-footer { }
Gebruik de browser-inspector om de volledige HTML-structuur te verkennen en precies te vinden wat je wilt targeten.
Veelgebruikte voorbeelden
Pas de randradius van je thema aan
.mementor-tts-player {
border-radius: 12px;
}
Verberg een specifieke bediening
.mementor-tts-loop {
display: none !important;
}
Gebruik eerst de UI-instellingen van de plug-in. Overschrijf alleen met CSS als de instelling ontbreekt.
Maak de afspeelknop groter
.mementor-tts-play-button {
width: 56px;
height: 56px;
}
Aangepaste schaduw op de plakkerige voettekst
.mementor-tts-sticky-footer {
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
}
Aangepaste typografie
.mementor-tts-player {
font-family: "Your Theme Font", sans-serif;
}
.mementor-tts-time {
font-variant-numeric: tabular-nums;
}
CSS-variabelen
De speler biedt CSS-aangepaste eigenschappen die je kunt overschrijven:
.mementor-tts-player {
--player-bg-color: #jouw-kleur;
--player-text-color: #jouw-kleur;
--player-play-color: #jouw-kleur;
}
Dit is de schoonste manier om kleuren opnieuw in te stellen zonder specifieke regels te overschrijven.
Specificiteitsvoetangels
TTSWP gebruikt html body .mementor-tts-* selectors in zijn standaard CSS om thema-overschrijvingen te verslaan. Om vanuit je thema te overschrijven, match je deze specificiteit of overtref je die:
html body .mementor-tts-player {
background: #000;
}
Of gebruik !important met mate.
Testen met de browser-inspector
Na het toevoegen van aangepaste CSS:
- Open een bericht met audio op de front-end.
- Klik met de rechtermuisknop op de speler → Inspecteren.
- Bekijk het paneel Berekend om te zien welke regels van kracht zijn.