شرح احتراف CSS وLESS في XenForo ومعرفة أهم الكلاسات وكيفية التحكم بتصميم المنتدى 03

الدرس الثالث: احتراف CSS وLESS في XenForo ومعرفة أهم الكلاسات وكيفية التحكم بتصميم المنتدى​

مقدمة​

من هنا نبدأ مرحلة التصميم الفعلي!

في الدرس الأول تعلمنا كيفية التعامل مع الاستايلات وإعداداتها، وفي الدرس الثاني تعرفنا على القوالب ووظيفة كل قالب داخل XenForo.

أما اليوم فسنتعلم واحدة من أهم المهارات التي يحتاج إليها كل مصمم استايلات: التعامل مع CSS وLESS وفهم الكلاسات Classes التي تتحكم في مظهر عناصر المنتدى.

إذا كنت تريد تغيير شكل الهيدر، أو تصميم الأقسام، أو تعديل بطاقات الأعضاء، أو التحكم في أزرار المنتدى والقوائم الجانبية، فإن فهم CSS هو المفتاح الأساسي لتنفيذ هذه التعديلات.

سنبدأ من الأساسيات، ثم ننتقل إلى فهم الكلاسات، وأدوات فحص العناصر، وكيفية تنظيم الأكواد داخل XenForo، مع تطبيقات عملية تساعدك على بناء تصميم خاص بك.

---

1- ما هو CSS وما علاقته بتصميم XenForo؟​

CSS هي لغة تنسيق صفحات الويب، وتستخدم للتحكم في الشكل المرئي للعناصر.

من خلالها نستطيع التحكم في:

• ألوان الخلفيات والنصوص.
• أحجام الخطوط وأنواعها.
• عرض وارتفاع العناصر.
• المسافات الداخلية والخارجية.
• الحدود والزوايا الدائرية.
• الظلال والتأثيرات.
• ترتيب العناصر داخل الصفحة.
• التصميم المتجاوب مع الهواتف والأجهزة المختلفة.

أما في XenForo، فتعمل قوالب HTML مع قوالب CSS وLESS وخصائص الاستايل Style Properties لإنتاج المظهر النهائي للمنتدى.

بمعنى بسيط: القالب يحدد العنصر ومحتواه، بينما CSS يتحكم في طريقة ظهوره.

XenForo Documentation +1

---

2- ما الفرق بين CSS وLESS؟​

قد تلاحظ عند العمل على XenForo وجود مصطلحين: CSS وLESS.

كلاهما يستخدم لتنسيق المظهر، لكن هناك اختلاف في الإمكانيات وطريقة كتابة الأكواد.

CSS​

هي لغة التنسيق الأساسية، وتستخدم لكتابة القواعد التي تتحكم في العناصر، مثل الألوان والخطوط والأحجام والخلفيات.

LESS​

هي لغة مبنية على CSS وتضيف إمكانيات تساعد على تنظيم الأكواد وإعادة استخدامها، مثل المتغيرات والتداخل Nesting والعمليات الحسابية.

في XenForo 2 ستتعامل كثيراً مع LESS، خصوصاً من خلال قالب extra.less.

ومن مميزات LESS:

• إمكانية تعريف متغيرات للألوان.
• تنظيم الأكواد داخل مجموعات.
• استخدام القواعد المتداخلة.
• تسهيل إعادة استخدام القيم.
• كتابة أكواد أكثر تنظيماً عند بناء استايلات كبيرة.

ملاحظة: كل CSS صالح تقريباً يمكن كتابته داخل LESS، لكن LESS يوفر إمكانيات إضافية لا يوفرها CSS التقليدي.

---

3- أين تكتب أكواد CSS وLESS في XenForo؟​

المكان الأكثر استخداماً لإضافة التعديلات المخصصة هو قالب:

extra.less

للوصول إليه:

لوحة تحكم الإدارة ← المظهر ← القوالب ← ابحث عن extra.less.

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

ومن الأفضل دائماً العمل على الاستايل الفرعي Child Style الذي أنشأناه في الدرس الأول.

لماذا نستخدم extra.less؟

لأنه يوفر مكاناً مركزياً لتنظيم التعديلات، ويسهل عليك الرجوع إليها وتعديلها مستقبلاً.

لكن لا يعني ذلك أن تضع جميع الأكواد في ملف واحد دون تنظيم؛ عندما يكبر المشروع، من الأفضل تقسيم التعديلات إلى مجموعات واضحة، أو استخدام قوالب LESS إضافية عند الحاجة.

---

4- فهم الكلاسات Classes والـ IDs​

هذه من أهم المهارات التي يجب أن يتقنها مصمم استايلات XenForo.

عندما تفتح المنتدى، ستجد أن كل عنصر تقريباً يحمل أسماء Classes أو IDs تساعد المتصفح على تحديده وتنسيقه.

ما هو Class؟​

هو اسم يتم إعطاؤه لعنصر أو مجموعة عناصر، ويمكن استخدامه لاستهداف هذه العناصر في CSS.

ما هو ID؟​

هو معرّف يستخدم لتحديد عنصر معين داخل الصفحة.

الفرق بينهما:​

ومن المهم أن تعرف أن العنصر الواحد يمكن أن يحمل أكثر من Class، ويمكن أن تتداخل الكلاسات مع بعضها لتحديد عناصر دقيقة.

مثلاً، قد تجد عنصراً يحمل كلاس خاصاً بالزر، وكلاس آخر يحدد لونه أو حجمه.

كيف تستفيد من ذلك؟

بدلاً من تعديل جميع الأزرار في المنتدى، تستطيع استهداف زر محدد داخل منطقة معينة، وبالتالي لا تؤثر تعديلاتك على بقية العناصر.

---

5- أهم الكلاسات التي يجب أن يعرفها مصمم XenForo​

هناك مجموعة من الكلاسات المتكررة في واجهة XenForo، ومن المفيد أن تتعرف عليها منذ البداية.

هذه أمثلة شائعة في استايل XenForo الافتراضي، وقد تختلف بعض التفاصيل بحسب الاستايل والإضافات.

كلاسات الهيكل العام​

كلاسات القوائم والعناصر​

كلاسات الصناديق والمحتوى​

كلاسات المواضيع والمشاركات​

كلاسات الأزرار والصور​

هذه القائمة ليست جميع كلاسات XenForo، وإنما مجموعة بداية تساعدك على فهم بنية التصميم.

ولا تعتمد على حفظ الأسماء فقط؛ الأهم أن تعرف كيف تتأكد من وجود الكلاس في الصفحة التي تعمل عليها.

---

6- كيف تستخدم Inspect للوصول إلى أي عنصر في المنتدى؟​

هذه الأداة من أهم الأدوات التي يستخدمها مصممو المواقع ومطورو الواجهات.

تسمح لك بفحص عناصر المنتدى ومعرفة الكلاسات والمعرفات والقواعد التي تتحكم في مظهر كل عنصر.

طريقة استخدامها:

• افتح المنتدى من متصفح Chrome.
• انتقل إلى العنصر الذي تريد تعديله.
• اضغط بزر الفأرة الأيمن عليه.
• اختر Inspect أو فحص.
• ستظهر لك نافذة أدوات المطور.
• ستشاهد بنية HTML الخاصة بالعنصر.
• تستطيع معرفة الكلاسات المستخدمة والقواعد التي تؤثر عليه.

ما الذي تستطيع معرفته من Inspect؟

• اسم Class الخاص بالعنصر.
• اسم ID إن وجد.
• لون الخلفية الحالي.
• حجم الخط.
• المسافات والحدود.
• العنصر الأب والعناصر الموجودة داخله.
• القواعد التي تم تطبيقها من ملفات CSS المختلفة.

ومن أهم المميزات أنك تستطيع تجربة تغيير الخصائص مباشرة داخل المتصفح قبل نقل التعديل إلى extra.less.

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

---

7- فهم ترتيب CSS وأولوية الأكواد​

من المشاكل التي تواجه المبتدئين أن يضيفوا كوداً جديداً، ثم يكتشفوا أن التعديل لم يظهر.

والسبب في كثير من الأحيان هو أولوية القواعد CSS Specificity.

عندما توجد عدة قواعد تستهدف العنصر نفسه، يحدد المتصفح أي قاعدة ستُطبق بناءً على قوة المحددات وترتيب القواعد وعوامل أخرى.

هناك عدة أمور يجب أن تفهمها:

أولاً: قوة المحدد Selector Specificity​

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

ثانياً: ترتيب الأكواد​

عندما تتساوى قوة المحددات، قد تكون القاعدة التي تأتي لاحقاً هي التي تطبق.

ثالثاً: !important​

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

أنصحك بعدم الاعتماد عليها بشكل عشوائي؛ لأنها قد تجعل إدارة الأكواد أكثر صعوبة، خصوصاً عندما يكبر الاستايل.

---

8- فهم المسافات والأحجام في CSS​

عندما تبدأ بتصميم المنتدى، ستحتاج إلى التحكم في المسافات بين العناصر وأحجامها.

ومن أهم الخصائص التي يجب أن تتعلمها:

ما الفرق بين Margin وPadding؟​

هذه من أكثر النقاط التي يخلط بينها المبتدئون.

• Margin: المسافة الموجودة خارج حدود العنصر.
• Padding: المسافة الموجودة داخل العنصر بين المحتوى والحدود.

عندما تريد زيادة المسافة بين صندوقين، غالباً ستستخدم Margin.

أما إذا أردت إبعاد النص عن حواف الصندوق، فستستخدم Padding.

---

9- كيف تصمم أجزاء المنتدى باستخدام CSS؟​

بعد أن تعرفت على الكلاسات والخصائص، حان الوقت لفهم طريقة استخدامها في التصميم.

عندما تريد تطوير شكل المنتدى، لا تبدأ بتعديل كل شيء دفعة واحدة.

قسّم التصميم إلى أجزاء:

الهيدر Header​

يحتوي على شعار المنتدى والمنطقة العلوية والعناصر المرتبطة بها.

القائمة الرئيسية Navigation​

تحتوي على روابط التنقل بين صفحات المنتدى.

منطقة المحتوى Content​

وهي المنطقة التي تظهر فيها الأقسام والمواضيع والمشاركات.

القوائم الجانبية Sidebar​

تحتوي على الإحصائيات والودجات والمعلومات الإضافية.

الفوتر Footer​

يمثل نهاية الصفحة، ويمكن تخصيصه لإظهار روابط المنتدى والمعلومات الإضافية.

ابدأ بتحديد كل منطقة، ثم تعرف على الكلاس الخاص بها، وبعد ذلك حدد الخصائص التي تريد تغييرها.

بهذه الطريقة تستطيع تطوير التصميم بشكل تدريجي دون التأثير على بقية أجزاء المنتدى.

---

10- استخدام ألوان الاستايل بطريقة احترافية​

من الأخطاء الشائعة كتابة ألوان ثابتة في جميع الأكواد، ثم مواجهة صعوبة عند الرغبة في تغيير هوية المنتدى.

في XenForo تستطيع استخدام خصائص الألوان Style Properties بدلاً من تكرار قيم HEX في كل مكان.

فعلى سبيل المثال، تستطيع استخدام خصائص النظام التي تبدأ بالبادئة:

@xf-

ومن الأمثلة المعروفة:

• @xf-textColor لون النصوص.
• @xf-contentBg خلفية المحتوى.
• @xf-linkColor لون الروابط.
• @xf-borderColor لون الحدود.

تستطيع الاستفادة من هذه القيم داخل قوالب LESS بدلاً من كتابة اللون يدوياً في كل مرة.

لماذا هذه الطريقة أفضل؟

لأنك عندما تغير لوناً أساسياً من خصائص الاستايل، تستطيع تحديث جميع العناصر التي تعتمد على هذه الخاصية دون البحث عن كل كود وتعديله منفرداً.

وهذه من أهم الطرق التي تساعدك على بناء استايل منظم وقابل للتطوير.

المصدر: Style Properties – توثيق XenForo الرسمي.

---

11- كيف تجعل تصميمك متوافقاً مع الهواتف؟​

لا يكفي أن يكون الاستايل جميلاً على الحاسوب فقط.

يجب أن يظهر المنتدى بصورة مناسبة على الهواتف والأجهزة اللوحية أيضاً.

وهنا يأتي دور Responsive Design.

وهو أسلوب تصميم يسمح للعناصر بالتكيف مع حجم الشاشة.

عند تطوير أي جزء من المنتدى، انتبه إلى:

• عدم خروج العناصر عن حدود الشاشة.
• عدم ظهور شريط تمرير أفقي غير ضروري.
• تناسب أحجام الخطوط مع الهاتف.
• ظهور القوائم والأزرار بشكل مناسب.
• عدم اختفاء معلومات مهمة من المشاركات.
• تناسب الصور مع مساحة العرض.

ومن الأفضل اختبار كل تعديل على أكثر من حجم شاشة، لأن بعض التغييرات التي تبدو ممتازة على الحاسوب قد تسبب مشاكل على الهاتف.

---

12- أخطاء يجب تجنبها عند كتابة CSS وLESS​

قبل أن تنهي هذا الدرس، هناك مجموعة من الأخطاء التي يجب أن تتجنبها:

• استخدام كلاس غير موجود في الصفحة.
• استهداف عناصر عامة دون الانتباه إلى تأثير التعديل.
• تكرار الأكواد نفسها مرات كثيرة.
• استخدام !important دون ضرورة.
• تعديل أكثر من عنصر في وقت واحد دون اختبار.
• استخدام ألوان ثابتة في كل مكان دون الاستفادة من خصائص الاستايل.
• تجاهل توافق التصميم مع الهواتف.
• عدم الاحتفاظ بنسخة احتياطية من الأكواد.
• وضع جميع التعديلات في ملف واحد دون تقسيم أو تعليقات.
• استخدام محددات معقدة تعتمد على ترتيب العناصر بدلاً من اختيار Class واضح ومستقر.

نصيحة احترافية: اجعل كل مجموعة أكواد مسؤولة عن جزء محدد من المنتدى، واستخدم التعليقات لتوضيح وظيفة كل مجموعة. هذا سيساعدك كثيراً عندما تعود إلى الأكواد بعد فترة.

---

13- المصادر الرسمية والمراجع المفيدة​

إذا أردت التعمق أكثر في هذا المجال، فأنصحك بالاطلاع على هذه المراجع:

• Style Properties – خصائص الاستايل: شرح التحكم بالألوان والخطوط والخصائص.
• Templates – نظام القوالب: شرح قوالب HTML وCSS وLESS.
• Styling – دليل تصميم الاستايلات: دليل نظام التصميم في XenForo.
• Template Syntax – مرجع لغة القوالب: مرجع تقني لفهم نظام القوالب.

---

ماذا سنتعلم في الدرس الرابع؟​

في الدرس القادم سنبدأ بتطبيق التعديلات على أجزاء المنتدى بصورة أكثر شمولاً، وسنركز على تطوير التصميم من الهيدر إلى الفوتر.

وسنتناول:

• إعادة تصميم الهيدر والشعار.
• تخصيص القائمة الرئيسية وأزرار التنقل.
• تطوير شكل الصفحة الرئيسية والأقسام.
• تصميم صناديق المواضيع والمشاركات.
• تعديل القوائم الجانبية والودجات.
• إنشاء عناصر تصميم إضافية.
• تطوير الفوتر وإضافة روابط ومعلومات جديدة.
• توحيد الألوان والمسافات بين جميع أجزاء المنتدى.

---

خاتمة الدرس الثالث​

وصلنا إلى نهاية الدرس الثالث من سلسلة احتراف تعديل وتصميم استايلات XenForo.

تعرفنا اليوم على CSS وLESS، والفرق بينهما، وكيفية استخدام الكلاسات والمعرفات، وأهم العناصر المستخدمة في XenForo، بالإضافة إلى طريقة فحص العناصر باستخدام Inspect والتحكم في الألوان والمسافات والأحجام.

تذكر أن المصمم المحترف لا يعتمد على نسخ الأكواد الجاهزة فقط، بل يفهم وظيفة كل كلاس، ويعرف أين يستخدمه، وكيف يطور التصميم دون التأثير على بقية أجزاء المنتدى.

تابعوا الدرس الرابع: تطوير وتصميم واجهة XenForo بالكامل من الهيدر إلى الفوتر.

سلسلة تعلم تعديل وتصميم استايلات XenForo | الدرس الثالث من خمسة

يُمنع النقل ابدًا - حقوق كود نت​