कस्टम CSS

जब बिल्ट-इन रंग और लेआउट विकल्प पर्याप्त न हों, तो अपने खुद के CSS से ऑडियो प्लेयर की स्टाइल बदलें। यह इनलाइन प्लेयर और स्टिकी फुटर वेरिएंट दोनों पर काम करता है।

#कस्टम CSS कहाँ जोड़ें

#थीम-लेवल (अनुशंसित)

अपने थीम के कस्टमाइज़र का उपयोग करें:

1. Appearance → Customize → Additional CSS
2. अपने नियम पेस्ट करें
3. Publish

यह थीम अपडेट और चाइल्ड-थीम बदलाव के बाद भी बना रहता है।

#प्लगिन-लेवल

टेक्स्ट टू स्पीच → Advanced → Custom CSS में वह CSS पेस्ट करें जो केवल प्लेयर वाले पेजों पर लोड हो। यह तब उपयोगी है जब आप स्टाइल को खास तौर पर प्लगिन से जोड़ना चाहते हैं।

#जिन प्लेयर एलिमेंट्स को टारगेट कर सकते हैं

प्लेयर के हर एलिमेंट में एक स्थिर क्लास नाम है। मुख्य सिलेक्टर:

/* पूरा प्लेयर कंटेनर */
.mementor-tts-player { }

/* प्ले बटन */
.mementor-tts-play-button { }

/* प्रोग्रेस बार (लीनियर) */
.mementor-tts-progress { }

/* वेवफॉर्म बार्स (PRO) */
.mementor-tts-waveform-bar { }

/* टाइम डिस्प्ले */
.mementor-tts-time { }

/* स्पीड सिलेक्टर */
.mementor-tts-speed { }

/* वॉल्यूम स्लाइडर */
.mementor-tts-volume { }

/* डाउनलोड लिंक */
.mementor-tts-download { }

/* स्टिकी फुटर (PRO) */
.mementor-tts-sticky-footer { }

पूरे HTML ट्री को एक्सप्लोर करने और सही टारगेट ढूंढने के लिए ब्राउज़र इंस्पेक्टर का उपयोग करें।

#सामान्य उदाहरण

#अपनी थीम का बॉर्डर रेडियस मिलाएं

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

#किसी खास कंट्रोल को छुपाएं

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

पहले प्लगिन की UI सेटिंग्स का उपयोग करें। CSS से तभी ओवरराइड करें जब सेटिंग मौजूद न हो।

#प्ले बटन को बड़ा करें

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

#स्टिकी फुटर पर कस्टम शैडो

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

#कस्टम टाइपोग्राफी

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

#CSS वेरिएबल्स

प्लेयर CSS कस्टम प्रॉपर्टीज़ को ओवरराइड करने की सुविधा देता है:

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

खास नियमों को ओवरराइड किए बिना रंग बदलने का यह सबसे साफ तरीका है।

#स्पेसिफिसिटी की सावधानियां

TTSWP अपने डिफॉल्ट CSS में html body .mementor-tts-* सिलेक्टर का उपयोग करता है ताकि थीम ओवरराइड को मात दी जा सके। अपनी थीम से ओवरराइड करने के लिए, इस स्पेसिफिसिटी को मैच करें या इससे ज्यादा रखें:

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

या !important का सीमित उपयोग करें।

#ब्राउज़र इंस्पेक्टर से टेस्ट करें

कस्टम CSS जोड़ने के बाद:

1. फ्रंट-एंड पर ऑडियो वाला कोई भी पोस्ट खोलें।
2. प्लेयर पर राइट-क्लिक करें → Inspect।
3. Computed पैनल में देखें कि कौन से नियम लागू हो रहे हैं।