Remplacez les styles du lecteur audio avec votre propre CSS quand les options de couleur et de mise en page intégrées ne suffisent pas. Fonctionne à la fois sur le lecteur intégré et la variante en pied de page fixe.
Où ajouter du CSS personnalisé
Au niveau du thème (recommandé)
Utilisez le personnalisateur de votre thème :
- Apparence → Personnaliser → CSS additionnel
- Collez vos règles
- Publier
Ceci résiste aux mises à jour du thème et aux changements de thème enfant.
Au niveau du plugin
Dans Synthèse vocale → Avancé → CSS personnalisé, collez le CSS qui se charge uniquement sur les pages avec le lecteur. Utile pour les styles que vous souhaitez lier spécifiquement au plugin.
Éléments du lecteur que vous pouvez cibler
Chaque élément du lecteur possède un nom de classe stable. Sélecteurs clés :
/* Le conteneur complet du lecteur */
.mementor-tts-player { }
/* Bouton de lecture */
.mementor-tts-play-button { }
/* Barre de progression (linéaire) */
.mementor-tts-progress { }
/* Barres de forme d'onde (PRO) */
.mementor-tts-waveform-bar { }
/* Affichage du temps */
.mementor-tts-time { }
/* Sélecteur de vitesse */
.mementor-tts-speed { }
/* Curseur de volume */
.mementor-tts-volume { }
/* Lien de téléchargement */
.mementor-tts-download { }
/* Pied de page fixe (PRO) */
.mementor-tts-sticky-footer { }
Utilisez l'inspecteur du navigateur pour explorer l'arbre HTML complet et trouver exactement ce que vous souhaitez cibler.
Exemples courants
Correspondre au rayon de bordure de votre thème
.mementor-tts-player {
border-radius: 12px;
}
Masquer un contrôle spécifique
.mementor-tts-loop {
display: none !important;
}
Utilisez d'abord les paramètres de l'interface du plugin. Ne remplacez avec du CSS que si le paramètre est absent.
Agrandir le bouton de lecture
.mementor-tts-play-button {
width: 56px;
height: 56px;
}
Ombre personnalisée sur le pied de page fixe
.mementor-tts-sticky-footer {
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
}
Typographie personnalisée
.mementor-tts-player {
font-family: "Police de votre thème", sans-serif;
}
.mementor-tts-time {
font-variant-numeric: tabular-nums;
}
Variables CSS
Le lecteur expose des propriétés personnalisées CSS que vous pouvez remplacer :
.mementor-tts-player {
--player-bg-color: #votre-couleur;
--player-text-color: #votre-couleur;
--player-play-color: #votre-couleur;
}
C'est la façon la plus propre de modifier les couleurs sans remplacer des règles spécifiques.
Problèmes de spécificité
TTSWP utilise les sélecteurs html body .mementor-tts-* dans son CSS par défaut pour prendre le dessus sur les remplacements du thème. Pour remplacer depuis votre thème, égalez ou dépassez cette spécificité :
html body .mementor-tts-player {
background: #000;
}
Ou utilisez !important avec parcimonie.
Testez avec l'inspecteur du navigateur
Après avoir ajouté du CSS personnalisé :
- Ouvrez n'importe quel article avec audio en front-end.
- Faites un clic droit sur le lecteur, puis Inspecter.
- Vérifiez le panneau Calculé pour voir quelles règles s'appliquent.