Dahili renk ve düzen seçenekleri yetmediğinde ses oynatıcı stillerini kendi CSS'inizle geçersiz kılın. Hem satır içi oynatıcıda hem de yapışkan alt bilgi varyantında çalışır.
Özel CSS nereye eklenir
Tema düzeyinde (önerilen)
Tema özelleştiricinizi kullanın:
- Görünüm → Özelleştir → Ek CSS
- Kurallarınızı yapıştırın
- Yayımla
Bu yöntem, tema güncellemelerinden ve alt tema değişikliklerinden etkilenmez.
Eklenti düzeyinde
Metin Okuma → Gelişmiş → Özel CSS bölümüne, yalnızca oynatıcının bulunduğu sayfalarda yüklenen CSS kodunu yapıştırın. Stilleri yalnızca eklentiyle ilişkilendirmek istediğinizde kullanışlıdır.
Hedefleyebileceğiniz oynatıcı öğeleri
Oynatıcıdaki her öğenin sabit bir sınıf adı vardır. Temel seçiciler:
/* Oynatıcı kapsayıcısının tamamı */
.mementor-tts-player { }
/* Oynat düğmesi */
.mementor-tts-play-button { }
/* İlerleme çubuğu (doğrusal) */
.mementor-tts-progress { }
/* Dalga formu çubukları (PRO) */
.mementor-tts-waveform-bar { }
/* Süre göstergesi */
.mementor-tts-time { }
/* Hız seçici */
.mementor-tts-speed { }
/* Ses düzeyi kaydırıcısı */
.mementor-tts-volume { }
/* İndirme bağlantısı */
.mementor-tts-download { }
/* Yapışkan alt bilgi (PRO) */
.mementor-tts-sticky-footer { }
Tam HTML ağacını keşfetmek ve hedeflemek istediğiniz öğeyi bulmak için tarayıcı denetçisini kullanın.
Yaygın örnekler
Temanızın köşe yuvarlamasına uyun
.mementor-tts-player {
border-radius: 12px;
}
Belirli bir kontrolü gizleyin
.mementor-tts-loop {
display: none !important;
}
Önce eklentinin arayüz ayarlarını kullanın. Yalnızca ilgili ayar yoksa CSS ile geçersiz kılın.
Oynat düğmesini büyütün
.mementor-tts-play-button {
width: 56px;
height: 56px;
}
Yapışkan alt bilgiye özel gölge ekleyin
.mementor-tts-sticky-footer {
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
}
Özel tipografi
.mementor-tts-player {
font-family: "Tema Fonunuz", sans-serif;
}
.mementor-tts-time {
font-variant-numeric: tabular-nums;
}
CSS değişkenleri
Oynatıcı, geçersiz kılabileceğiniz CSS özel özellikleri sunar:
.mementor-tts-player {
--player-bg-color: #renginiz;
--player-text-color: #renginiz;
--player-play-color: #renginiz;
}
Belirli kuralları geçersiz kılmadan renkleri yeniden biçimlendirmenin en temiz yolu budur.
Özgüllük sorunları
TTSWP, tema geçersiz kılmalarını aşmak için varsayılan CSS'inde html body .mementor-tts-* seçicilerini kullanır. Temanızdan geçersiz kılmak için bu özgüllüğü eşleyin veya aşın:
html body .mementor-tts-player {
background: #000;
}
Ya da !important kullanımını mümkün olduğunca az tutun.
Tarayıcı denetçisiyle test edin
Özel CSS ekledikten sonra:
- Ön yüzde sesli bir gönderi açın.
- Oynatıcıya sağ tıklayın → İncele.
- Hangi kuralların geçerli olduğunu görmek için Hesaplanan panelini kontrol edin.