Overstyr lyttespillerstilene med din egen CSS når de innebygde farge- og layoutalternativene ikke strekker til. Fungerer på både den innebygde spilleren og den klebrige bunntekstvarianten.
Hvor du legger til egendefinert CSS
Temnivå (anbefalt)
Bruk temafunksjonen for tilpasning:
- Utseende → Tilpass → Ekstra CSS
- Lim inn reglene dine
- Publiser
Dette overlever temaoppdateringer og bytte av undertema.
Plugin-nivå
Under Tekst til Tale → Avansert → Egendefinert CSS limer du inn CSS som bare lastes på sider med lyttespilleren. Nyttig for stiler du vil knytte spesifikt til plugin-en.
Spillerelementer du kan målrette
Hvert element i spilleren har et stabilt klassenavn. Viktige selektorer:
/* Hele spillerbeholderen */
.mementor-tts-player { }
/* Avspillingsknapp */
.mementor-tts-play-button { }
/* Fremdriftslinje (lineær) */
.mementor-tts-progress { }
/* Bølgeformstriper (PRO) */
.mementor-tts-waveform-bar { }
/* Tidsvisning */
.mementor-tts-time { }
/* Hastighetsvekter */
.mementor-tts-speed { }
/* Volumglider */
.mementor-tts-volume { }
/* Nedlastingslenke */
.mementor-tts-download { }
/* Klebrig bunntekst (PRO) */
.mementor-tts-sticky-footer { }
Bruk nettleserinspektøren til å utforske hele HTML-treet og finne nøyaktig det du vil målrette.
Vanlige eksempler
Match temafeltets kantradius
.mementor-tts-player {
border-radius: 12px;
}
Skjul en bestemt kontroll
.mementor-tts-loop {
display: none !important;
}
Bruk plugin-ens UI-innstillinger først. Overst bare med CSS når innstillingen mangler.
Gjør avspillingsknappen større
.mementor-tts-play-button {
width: 56px;
height: 56px;
}
Egendefinert skygge på den klebrige bunnteksten
.mementor-tts-sticky-footer {
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
}
Egendefinert typografi
.mementor-tts-player {
font-family: "Your Theme Font", sans-serif;
}
.mementor-tts-time {
font-variant-numeric: tabular-nums;
}
CSS-variabler
Spilleren eksponerer CSS-egendefinerte egenskaper du kan overstyre:
.mementor-tts-player {
--player-bg-color: #your-color;
--player-text-color: #your-color;
--player-play-color: #your-color;
}
Dette er den reneste måten å endre farger på uten å overstyre spesifikke regler.
Spesifisitetsfeller
TTSWP bruker html body .mementor-tts-*-selektorer i standard-CSS for å overstyre temaendringer. For å overstyre fra temaet ditt må du matche eller overgå denne spesifisiteten:
html body .mementor-tts-player {
background: #000;
}
Eller bruk !important med måte.
Test med nettleserinspektøren
Etter at du har lagt til egendefinert CSS:
- Åpne et innlegg med lyd på forsiden.
- Høyreklikk på spilleren og velg Inspiser.
- Sjekk Beregnet-panelet for å se hvilke regler som vinner.