CSS مخصص

تجاوز أنماط مشغل الصوت بواسطة CSS الخاص بك عندما لا تكفي خيارات الألوان والتخطيط المدمجة. يعمل على المشغل المضمّن والنسخة الثابتة في التذييل.

#أين تضيف CSS المخصص

#على مستوى الثيم (موصى به)

استخدم أداة تخصيص ثيمك:

1. المظهر - تخصيص - CSS إضافي
2. الصق قواعدك
3. نشر

هذا يبقى سليماً بعد تحديثات الثيم وتبديل الثيمات الفرعية.

#على مستوى الإضافة

في تحويل النص إلى كلام - متقدم - 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;
}

استخدم إعدادات واجهة الإضافة أولاً. لا تتجاوز بواسطة 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 محددات html body .mementor-tts-* في CSS الافتراضي للتغلب على تجاوزات الثيم. للتجاوز من ثيمك، طابق هذه الخصوصية أو تجاوزها:

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

أو استخدم !important باعتدال.

#الاختبار بأداة فحص المتصفح

بعد إضافة CSS مخصص:

1. افتح أي منشور يحتوي على صوت في الواجهة الأمامية.
2. انقر بزر الماوس الأيمن على المشغل - فحص.
3. تحقق من لوحة Computed لترى القواعد الفائزة.