شرح طريقة تحويل خيارات إلى أزرار Toggle Switch احترافية في XenForo

[codeNET]

طريقة تحويل خيارات إلى أزرار Toggle Switch احترافية في XenForo
هل تبحث عن لمسة جمالية لصفحة إعدادات الحساب في منتداك؟ في هذا الشرح سنتعلم كيفية استبدال صناديق الاختيار التقليدية بأزرار تبديل (Toggle Buttons) عصرية باستخدام CSS فقط وبدون الحاجة لإضافات معقدة.
الملفات المطلوب تعديلها:

1. قالب account_preferences
2. قالب extra.less

---

أولاً: تعديل الهيكل البرمجي (Template)
من لوحة الإدارة > المظهر > القوالب، ابحث عن account_preferences:
1. ابحث عن السطر التالي:

label="{{ phrase('alert') }}"

أضف الكلاس التالي بجانبه مباشرة:

class="toggle-switch"

2. ابحث عن السطر التالي:

label="{{ phrase('push') }}"

أضف الكلاس التالي بجانبه مباشرة:

class="toggle-switch"

احفظ القالب وانتقل للخطوة التالية.

---

ثانياً: إضافة لمسة التصميم (CSS/Less)
ابحث عن قالب extra.less وأضف الكود التالي في نهايته:

/* تحويل خيارات التنبيهات إلى أزرار تبديل - تصميم كود نت */
.toggle-switch {
position: relative;
width: 50px;
height: 24px;
-webkit-appearance: none;
appearance: none;
background-color: #ca3b3b;
outline: none;
cursor: pointer;
border-radius: 12px;
transition: background-color 0.3s;
display: inline-block;
vertical-align: middle;
}
.toggle-switch:checked {
background-color: #66bb6a;
}

---

إعداد وشرح: مهدي حميد
المصدر: منتدى كود نت
تنويه: جميع الحقوق محفوظة لكاتب الموضوع وللمنتدى، يمنع نقل الشرح إلى أي موقع آخر دون ذكر المصدر بشكل صريح.

 

[BoElias]

بارك الله فيك حبيب

 

[akm]

تسلم ايدك