Tilsidesæt lydafspillerens stilarter med din egen CSS, når de indbyggede farve- og layoutindstillinger ikke er nok. Virker på både den inline afspiller og den faste sidefodvariant.
Hvor du tilføjer brugerdefineret CSS
Tema-niveau (anbefalet)
Brug dit temas tilpasningsfunktion:
- Udseende - Tilpas - Yderligere CSS
- Indsæt dine regler
- Udgiv
Dette overlever temaopdateringer og skift af underordnede temaer.
Plugin-niveau
I Tekst til tale - Avanceret - Brugerdefineret CSS indsætter du CSS, der kun indlæses på sider med afspilleren. Nyttigt til stilarter, du vil knytte specifikt til pluginnet.
Afspillerelementer du kan rette mod
Hvert element i afspilleren har et stabilt klassenavn. Vigtige selektorer:
/* Hele afspillerens container */
.mementor-tts-player { }
/* Afspil-knap */
.mementor-tts-play-button { }
/* Fremdriftslinje (lineær) */
.mementor-tts-progress { }
/* Bølgeformsstænger (PRO) */
.mementor-tts-waveform-bar { }
/* Tidsvisning */
.mementor-tts-time { }
/* Hastighedsvælger */
.mementor-tts-speed { }
/* Lydstyrkeskyder */
.mementor-tts-volume { }
/* Downloadlink */
.mementor-tts-download { }
/* Fast sidefod (PRO) */
.mementor-tts-sticky-footer { }
Brug browserinspektøren til at udforske hele HTML-træet og finde præcis det, du vil rette mod.
Almindelige eksempler
Match dit temas kantradius
.mementor-tts-player {
border-radius: 12px;
}
Skjul en bestemt kontrol
.mementor-tts-loop {
display: none !important;
}
Brug pluginnets UI-indstillinger først. Tilsidesæt kun med CSS, når indstillingen mangler.
Gør afspil-knappen større
.mementor-tts-play-button {
width: 56px;
height: 56px;
}
Brugerdefineret skygge på den faste sidefod
.mementor-tts-sticky-footer {
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
}
Brugerdefineret typografi
.mementor-tts-player {
font-family: "Your Theme Font", sans-serif;
}
.mementor-tts-time {
font-variant-numeric: tabular-nums;
}
CSS-variabler
Afspilleren eksponerer brugerdefinerede CSS-egenskaber, du kan tilsidesætte:
.mementor-tts-player {
--player-bg-color: #din-farve;
--player-text-color: #din-farve;
--player-play-color: #din-farve;
}
Dette er den reneste måde at ændre farver på uden at tilsidesætte specifikke regler.
Specificitets-faldgruber
TTSWP bruger html body .mementor-tts-*-selektorer i sin standard-CSS for at overstyre temaets tilsidesættelser. For at tilsidesætte fra dit tema skal du matche eller overskride denne specificitet:
html body .mementor-tts-player {
background: #000;
}
Eller brug !important med måde.
Test med browserinspektøren
Efter du har tilføjet brugerdefineret CSS:
- Åbn et indlæg med lyd på frontend.
- Højreklik på afspilleren - Undersøg.
- Tjek panelet Beregnet for at se, hvilke regler der vinder.