Sovrascrivi gli stili del player audio con il tuo CSS quando le opzioni di colore e layout integrate non sono sufficienti. Funziona sia con il player inline che con la variante sticky footer.
Dove aggiungere il CSS personalizzato
A livello di tema (consigliato)
Usa il customizer del tuo tema:
- Aspetto → Personalizza → CSS aggiuntivo
- Incolla le tue regole
- Pubblica
Questo metodo sopravvive agli aggiornamenti del tema e ai cambi di tema figlio.
A livello di plugin
In Testo in Voce → Avanzato → CSS Personalizzato, incolla il CSS che si carica solo nelle pagine con il player. Utile per stili che vuoi legare specificamente al plugin.
Elementi del player che puoi selezionare
Ogni elemento del player ha un nome di classe stabile. Selettori principali:
/* Il contenitore intero del player */
.mementor-tts-player { }
/* Pulsante Play */
.mementor-tts-play-button { }
/* Barra di avanzamento (lineare) */
.mementor-tts-progress { }
/* Barre della forma d'onda (PRO) */
.mementor-tts-waveform-bar { }
/* Visualizzazione del tempo */
.mementor-tts-time { }
/* Selettore velocita */
.mementor-tts-speed { }
/* Cursore del volume */
.mementor-tts-volume { }
/* Link di download */
.mementor-tts-download { }
/* Sticky footer (PRO) */
.mementor-tts-sticky-footer { }
Usa il browser inspector per esplorare l'intera struttura HTML e trovare esattamente l'elemento che vuoi selezionare.
Esempi comuni
Adatta il border radius del tuo tema
.mementor-tts-player {
border-radius: 12px;
}
Nascondi un controllo specifico
.mementor-tts-loop {
display: none !important;
}
Usa prima le impostazioni UI del plugin. Usa il CSS solo quando l'impostazione non e disponibile.
Ingrandisci il pulsante Play
.mementor-tts-play-button {
width: 56px;
height: 56px;
}
Ombra personalizzata sullo sticky footer
.mementor-tts-sticky-footer {
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
}
Tipografia personalizzata
.mementor-tts-player {
font-family: "Il Tuo Font del Tema", sans-serif;
}
.mementor-tts-time {
font-variant-numeric: tabular-nums;
}
Variabili CSS
Il player espone proprieta CSS personalizzate che puoi sovrascrivere:
.mementor-tts-player {
--player-bg-color: #tuo-colore;
--player-text-color: #tuo-colore;
--player-play-color: #tuo-colore;
}
Questo e il modo piu pulito per ridefinire i colori senza sovrascrivere regole specifiche.
Problemi di specificita
TTSWP usa i selettori html body .mementor-tts-* nel suo CSS predefinito per prevalere sugli override del tema. Per sovrascrivere dal tuo tema, usa una specificita uguale o superiore:
html body .mementor-tts-player {
background: #000;
}
Oppure usa !important con parsimonia.
Testa con il browser inspector
Dopo aver aggiunto il CSS personalizzato:
- Apri qualsiasi articolo con audio nel frontend.
- Fai clic destro sul player → Ispeziona.
- Controlla il pannello Calcolato per vedere quali regole hanno la precedenza.