CSS Kustom

Timpa gaya pemutar audio dengan CSS Anda sendiri ketika opsi warna dan tata letak bawaan tidak mencukupi. Berfungsi pada pemutar inline maupun varian footer sticky.

#Cara menambahkan CSS kustom

#Di level tema (direkomendasikan)

Gunakan customizer tema Anda:

1. Appearance → Customize → Additional CSS
2. Tempelkan aturan CSS Anda
3. Publish

Cara ini tetap bertahan setelah pembaruan tema dan penggantian child-theme.

#Di level plugin

Di Teks ke Ucapan → Advanced → Custom CSS, tempelkan CSS yang hanya dimuat pada halaman yang memiliki pemutar. Berguna untuk gaya yang ingin Anda kaitkan khusus dengan plugin.

#Elemen pemutar yang bisa ditargetkan

Setiap elemen dalam pemutar memiliki nama kelas yang stabil. Selektor utama:

/* Seluruh kontainer pemutar */
.mementor-tts-player { }

/* Tombol play */
.mementor-tts-play-button { }

/* Progress bar (linear) */
.mementor-tts-progress { }

/* Batang waveform (PRO) */
.mementor-tts-waveform-bar { }

/* Tampilan waktu */
.mementor-tts-time { }

/* Selektor kecepatan */
.mementor-tts-speed { }

/* Slider volume */
.mementor-tts-volume { }

/* Tautan unduhan */
.mementor-tts-download { }

/* Sticky footer (PRO) */
.mementor-tts-sticky-footer { }

Gunakan browser inspector untuk menjelajahi seluruh pohon HTML dan menemukan elemen yang ingin Anda targetkan.

#Contoh umum

#Sesuaikan border radius dengan tema Anda

.mementor-tts-player {
    border-radius: 12px;
}

#Sembunyikan kontrol tertentu

.mementor-tts-loop {
    display: none !important;
}

Gunakan pengaturan UI plugin terlebih dahulu. Timpa dengan CSS hanya jika pengaturan tersebut tidak tersedia.

#Perbesar tombol play

.mementor-tts-play-button {
    width: 56px;
    height: 56px;
}

#Bayangan kustom pada sticky footer

.mementor-tts-sticky-footer {
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
}

#Tipografi kustom

.mementor-tts-player {
    font-family: "Your Theme Font", sans-serif;
}
.mementor-tts-time {
    font-variant-numeric: tabular-nums;
}

#Variabel CSS

Pemutar mengekspos properti kustom CSS yang bisa Anda timpa:

.mementor-tts-player {
    --player-bg-color: #warna-anda;
    --player-text-color: #warna-anda;
    --player-play-color: #warna-anda;
}

Ini adalah cara paling bersih untuk mengubah warna tanpa menimpa aturan spesifik.

#Masalah spesifisitas

TTSWP menggunakan selektor html body .mementor-tts-* dalam CSS bawaannya agar tidak tertimpa oleh tema. Untuk menimpanya dari tema Anda, samakan atau lampaui spesifisitas ini:

html body .mementor-tts-player {
    background: #000;
}

Atau gunakan !important dengan hemat.

#Uji dengan browser inspector

Setelah menambahkan CSS kustom:

1. Buka postingan apa pun yang memiliki audio di halaman depan.
2. Klik kanan pemutar, lalu pilih Inspect.
3. Periksa panel Computed untuk melihat aturan mana yang berlaku.