Anula los estilos del reproductor de audio con tu propio CSS cuando las opciones integradas de color y diseño no sean suficientes. Funciona tanto en el reproductor en línea como en la variante de pie de página fijo.
Dónde agregar CSS personalizado
A nivel del tema (recomendado)
Usa el personalizador de tu tema:
- Apariencia → Personalizar → CSS adicional
- Pega tus reglas
- Publicar
Esto sobrevive a las actualizaciones del tema y los cambios de tema hijo.
A nivel del plugin
En Texto a Voz → Avanzado → CSS personalizado, pega el CSS que se carga solo en las páginas con el reproductor. Útil para estilos que quieres vincular específicamente al plugin.
Elementos del reproductor a los que puedes apuntar
Cada elemento del reproductor tiene un nombre de clase estable. Selectores clave:
/* El contenedor completo del reproductor */
.mementor-tts-player { }
/* Botón de reproducción */
.mementor-tts-play-button { }
/* Barra de progreso (lineal) */
.mementor-tts-progress { }
/* Barras de forma de onda (PRO) */
.mementor-tts-waveform-bar { }
/* Visualización de tiempo */
.mementor-tts-time { }
/* Selector de velocidad */
.mementor-tts-speed { }
/* Control deslizante de volumen */
.mementor-tts-volume { }
/* Enlace de descarga */
.mementor-tts-download { }
/* Pie de página fijo (PRO) */
.mementor-tts-sticky-footer { }
Usa el inspector del navegador para explorar el árbol HTML completo y encontrar exactamente lo que quieres apuntar.
Ejemplos comunes
Adaptar el radio de borde de tu tema
.mementor-tts-player {
border-radius: 12px;
}
Ocultar un control específico
.mementor-tts-loop {
display: none !important;
}
Usa primero la configuración de la interfaz del plugin. Solo anula con CSS cuando falta la opción.
Hacer el botón de reproducción más grande
.mementor-tts-play-button {
width: 56px;
height: 56px;
}
Sombra personalizada en el pie de página fijo
.mementor-tts-sticky-footer {
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
}
Tipografía personalizada
.mementor-tts-player {
font-family: "Your Theme Font", sans-serif;
}
.mementor-tts-time {
font-variant-numeric: tabular-nums;
}
Variables CSS
El reproductor expone propiedades personalizadas CSS que puedes anular:
.mementor-tts-player {
--player-bg-color: #your-color;
--player-text-color: #your-color;
--player-play-color: #your-color;
}
Esta es la forma más limpia de cambiar los colores sin anular reglas específicas.
Problemas de especificidad
TTSWP usa selectores html body .mementor-tts-* en su CSS predeterminado para superar las anulaciones del tema. Para anular desde tu tema, iguala o supera esta especificidad:
html body .mementor-tts-player {
background: #000;
}
O usa !important con moderación.
Prueba con el inspector del navegador
Después de agregar CSS personalizado:
- Abre cualquier entrada con audio en el front-end.
- Haz clic derecho en el reproductor y selecciona Inspeccionar.
- Revisa el panel Computed para ver qué reglas están ganando.