Substitua os estilos do player de áudio com seu próprio CSS quando as opções integradas de cor e layout não forem suficientes. Funciona tanto no player inline quanto na variante de rodapé fixo.
Onde adicionar CSS personalizado
No tema (recomendado)
Use o personalizador do seu tema:
- Aparência → Personalizar → CSS Adicional
- Cole suas regras
- Publicar
Essa abordagem sobrevive a atualizações de tema e trocas de tema filho.
No plugin
Em Texto para Voz → Avançado → CSS Personalizado, cole o CSS que carrega apenas nas páginas com o player. Útil para estilos que você deseja vincular especificamente ao plugin.
Elementos do player que você pode selecionar
Cada elemento do player tem um nome de classe estável. Seletores principais:
/* O contêiner completo do player */
.mementor-tts-player { }
/* Botão de play */
.mementor-tts-play-button { }
/* Barra de progresso (linear) */
.mementor-tts-progress { }
/* Barras de forma de onda (PRO) */
.mementor-tts-waveform-bar { }
/* Exibição de tempo */
.mementor-tts-time { }
/* Seletor de velocidade */
.mementor-tts-speed { }
/* Controle de volume */
.mementor-tts-volume { }
/* Link de download */
.mementor-tts-download { }
/* Rodapé fixo (PRO) */
.mementor-tts-sticky-footer { }
Use o inspetor do navegador para explorar a árvore HTML completa e encontrar exatamente o que você quer selecionar.
Exemplos comuns
Combinar o border-radius do seu tema
.mementor-tts-player {
border-radius: 12px;
}
Ocultar um controle específico
.mementor-tts-loop {
display: none !important;
}
Use primeiro as configurações da interface do plugin. Só substitua com CSS quando a configuração não estiver disponível.
Deixar o botão de play maior
.mementor-tts-play-button {
width: 56px;
height: 56px;
}
Sombra personalizada no rodapé fixo
.mementor-tts-sticky-footer {
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
}
Tipografia personalizada
.mementor-tts-player {
font-family: "Fonte do Seu Tema", sans-serif;
}
.mementor-tts-time {
font-variant-numeric: tabular-nums;
}
Variáveis CSS
O player expõe propriedades CSS personalizadas que você pode substituir:
.mementor-tts-player {
--player-bg-color: #sua-cor;
--player-text-color: #sua-cor;
--player-play-color: #sua-cor;
}
Essa é a forma mais limpa de redefinir cores sem substituir regras específicas.
Problemas de especificidade
O TTSWP usa seletores html body .mementor-tts-* no seu CSS padrão para sobrepor as substituições do tema. Para substituir a partir do seu tema, iguale ou supere essa especificidade:
html body .mementor-tts-player {
background: #000;
}
Ou use !important com moderação.
Teste com o inspetor do navegador
Após adicionar CSS personalizado:
- Abra qualquer post com áudio no front-end.
- Clique com o botão direito no player e selecione Inspecionar.
- Verifique o painel Calculado para ver quais regras estão prevalecendo.