Korvaa ääniohjelman tyylit omalla CSS:lläsi, kun sisäänrakennetut väri- ja asetteluasetukset eivät riitä. Toimii sekä upotetussa soittimessa että kiinteässä alatunnisteessa.
Mihin lisätä mukautettu CSS
Teemataso (suositeltava)
Käytä teemasi mukauttajaa:
- Ulkoasu - Mukauta - Lisää CSS
- Liitä säännöt
- Julkaise
Tämä säilyy teemapäivitysten ja alateeman vaihtojen jälkeen.
Lisäosataso
Kohdassa Puhesynteesi - Lisäasetukset - Mukautettu CSS voit liittää CSS:n, joka latautuu vain sivuilla, joilla soitin on käytössä. Hyödyllistä tyyleille, jotka haluat sitoa nimenomaan lisäosaan.
Soittimen elementit, joihin voit kohdistaa tyylit
Jokaisella soittimen elementillä on vakaa luokkanimi. Tärkeimmät selektorit:
/* Koko soittimen säilö */
.mementor-tts-player { }
/* Toistopainike */
.mementor-tts-play-button { }
/* Edistymispalkki (lineaarinen) */
.mementor-tts-progress { }
/* Aaltomuotopalkit (PRO) */
.mementor-tts-waveform-bar { }
/* Aikanäyttö */
.mementor-tts-time { }
/* Nopeusvalitsin */
.mementor-tts-speed { }
/* Äänenvoimakkuusliukusäädin */
.mementor-tts-volume { }
/* Lataauslinkki */
.mementor-tts-download { }
/* Kiinteä alatunniste (PRO) */
.mementor-tts-sticky-footer { }
Käytä selaimen tarkastustyökalua koko HTML-puun tutkimiseen ja löydä tarkalleen haluamasi kohde.
Yleisiä esimerkkejä
Sovita teemasi kulmien pyöristys
.mementor-tts-player {
border-radius: 12px;
}
Piilota tietty ohjain
.mementor-tts-loop {
display: none !important;
}
Käytä ensin lisäosan käyttöliittymäasetuksia. Korvaa CSS:llä vain, jos asetus puuttuu.
Suurenna toistopainike
.mementor-tts-play-button {
width: 56px;
height: 56px;
}
Mukautettu varjo kiinteään alatunnisteeseen
.mementor-tts-sticky-footer {
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
}
Mukautettu typografia
.mementor-tts-player {
font-family: "Your Theme Font", sans-serif;
}
.mementor-tts-time {
font-variant-numeric: tabular-nums;
}
CSS-muuttujat
Soitin tarjoaa CSS-mukautusominaisuuksia, jotka voit korvata:
.mementor-tts-player {
--player-bg-color: #oma-vari;
--player-text-color: #oma-vari;
--player-play-color: #oma-vari;
}
Tämä on selkein tapa muuttaa värejä ilman yksittäisten sääntöjen korvaamista.
Tarkkuustason ongelmat
TTSWP käyttää html body .mementor-tts-* -selektoreita oletustyylitiedostossaan ohittaakseen teeman muutokset. Voit korvata tyylit teemastasi, kun vastat tarkkuustasoon tai ylität sen:
html body .mementor-tts-player {
background: #000;
}
Tai käytä !important-määritettä harkiten.
Testaa selaimen tarkastustyökalulla
Mukautetun CSS:n lisäämisen jälkeen:
- Avaa julkaisupuolella jokin julkaisu, jossa on ääntä.
- Napsauta soitinta hiiren oikealla painikkeella ja valitse Tarkasta.
- Tarkista Laskettu-paneelista, mitkä säännöt ovat voimassa.