رائع! ستحتاج إما إلى تعديل ملف CSS الخاص بمظهر موقعك، أو إضافة التغييرات إلى مكون مظهر ثم تضمين هذا المكون في جميع مظاهر موقعك. لقد استخدمت نهج مكون المظهر في موقع الاختبار الخاص بي. إليك محاولة لعرض هذه العملية بالصور:
تأكد من إضافة مظهر موقعك (أو مظاهره) إلى حقل “تضمين المكون في هذه المظاهر”.
بمجرد الانتهاء من ذلك، انقر فوق الزر “تعديل CSS/HTML” وأضف ما يلي إلى علامة التبويب “Common CSS” في محرر المظهر:
.discourse-calendar-wrap {
border: 5px solid var(--primary);
}
.calendar.fc.fc-unthemed .fc-content,
.calendar.fc.fc-unthemed .fc-divider,
.calendar.fc.fc-unthemed .fc-list-heading td,
.calendar.fc.fc-unthemed .fc-list-view,
.calendar.fc.fc-unthemed .fc-popover,
.calendar.fc.fc-unthemed .fc-row,
.calendar.fc.fc-unthemed tbody,
.calendar.fc.fc-unthemed td,
.calendar.fc.fc-unthemed th,
.calendar.fc.fc-unthemed thead {
border-color: var(--primary);
}
ما يفعله هذا التغيير هو تعيين ألوان حدود التقويم إلى اللون “الأساسي” لموقعك - وهو نفس اللون المستخدم لنص الموقع. باستخدام المتغير --primary، يعمل التغيير مع كل من مخططات الألوان الفاتحة والداكنة:
بدلاً من استخدام var(--primary) لتعيين اللون، يمكنك ترميز لون سداسي عشري. على سبيل المثال #000000 للأسود:
.discourse-calendar-wrap {
border: 5px solid #000000;
}
أخبرني إذا رأيت أي آثار جانبية غير مرغوب فيها من هذا التغيير. من الممكن أن يكون القاعدة الثانية تحدد بعض العناصر التي تفضل تركها باللون الفاتح القديم.